The URLPattern API is a modern web standard that provides a powerful, declarative way to match and parse URLs. It allows developers to define URL patterns using a simple syntax with named groups (:name), wildcards (*), optional segments (?), and even regular expressions. It's particularly useful in service workers, routing libraries, and anywhere you need robust URL matching without complex regex.

Create a pattern with new URLPattern('/users/:userId'), then call pattern.test('https://example.com/users/42') to check if it matches. Use pattern.exec(url) to extract captured groups like { userId: '42' }. This makes it perfect for client-side routing, API gateways, and service worker fetch handlers.

URLPattern is purpose-built for URLs and is far more readable and maintainable than equivalent regex. A pattern like /blog/:year/:month/:slug is self-documenting, while the equivalent regex /blog/([^/]+)/([^/]+)/([^/]+) is harder to read. URLPattern also handles edge cases (encoding, empty segments, query strings) automatically. However, if you need extremely fine-grained matching logic beyond URL structure, regex may still be useful.

As of 2024, Chrome 95+ and Edge 95+ have full support. Firefox has added support in recent versions (behind a flag in older versions). Safari support is evolving. For production use, consider using a polyfill or feature detection with typeof URLPattern !== 'undefined' to provide fallback logic.

Named groups are defined with the :name syntax in your pattern. When a URL matches, each named group captures the corresponding segment. For example, pattern /users/:userId/posts/:postId matching /users/42/posts/7 yields groups { userId: '42', postId: '7' }. You can also use regex constraints like /users/(\\d+) to ensure only digits match.

Yes! URLPattern can match search (query string) and hash fragments. Use patterns like /search?:query to capture query parameters, or /page#:section to match hash fragments. You can also match full URLs including protocol and hostname: https://*.example.com/*?utm_source=:source.

The * wildcard matches zero or more characters within a URL segment, while ** (not yet widely supported) would match across segments. For example, /files/*.pdf matches /files/report.pdf and /files/summary.pdf, but not /files/sub/report.pdf. To match any sub-path, you can use /files/* which matches /files/anything/here as a single wildcard segment.

Service workers use URLPattern extensively for routing fetch events. Instead of writing complex if-else chains, you can define patterns like new URLPattern({ pathname: '/api/*' }) to intercept API calls, or { pathname: '/images/*.webp' } to handle image caching. This makes service worker code cleaner, more maintainable, and less error-prone.

test(url) returns a simple boolean indicating whether the URL matches the pattern — perfect for quick checks. exec(url) returns a detailed result object (or null if no match) containing all matched components and captured groups. Use test() for filtering/routing decisions, and exec() when you need to extract parameters from the URL.

Absolutely! If your pattern is a relative path like /dashboard/:tab, URLPattern matches the pathname portion of any URL. You can test it against full URLs (https://app.example.com/dashboard/analytics) or relative paths (/dashboard/analytics). You can also provide a base URL as the second argument to new URLPattern() for resolving relative patterns.