What is PWAs as URL Handlers? #
Imagine you are chatting with a friend using an instant messenger application like Messages on macOS and you are talking about music. Further imagine you both have the
music.example.com PWA installed on your devices. If you want to share your favorite track for your friend to enjoy, you can send them a deep link like
https://music.example.com/rick-astley/never-gonna-give-you-up. Since this link is pretty long, the developers of
music.example.com may have decided to add an additional short link to each track, like, for example,
PWA as URL Handlers allows apps like
music.example.com to register themselves as URL handlers for URLs that match patterns like
https://🎵.example.com, so that links from outside of the PWA, for example, from an instant messenger application or an email client, open in the installed PWA rather than in a browser tab.
PWA as URL Handlers consists of two additions:
"url_handlers"web app manifest member.
web-app-origin-associationfile format for validating in- and out-of-scope URL associations.
Suggested use cases for PWAs as URL Handlers #
Examples of sites that may use this API include:
- Music or video streaming sites so track links or playlist links open in the player experience of the app.
- News or RSS readers so followed or subscribed-to sites open in the app's reader mode.
Current status #
How to use PWAs as URL Handlers #
Enabling via about://flags #
To experiment with PWAs as URL Handlers locally, without an origin trial token, enable the
#enable-desktop-pwas-url-handling flag in
Enabling support during the origin trial phase #
Starting in Chromium 94, Progressive Web Apps as URL Handlers is available as an origin trial in Chromium. The origin trial is expected to end in Chromium 97 (January 26, 2022).
Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page.
Register for the origin trial #
- Request a token for your origin.
- Add the token to your pages. There are two ways to do that:
- Add an
<meta>tag to the head of each page. For example, this may look something like:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
- If you can configure your server, you can also add the token using an
Origin-TrialHTTP header. The resulting response header should look something like:
- Add an
"url_handlers" web app manifest member #
To associate an installed PWA with URL patterns, these patterns need to be specified in the web app manifest. This happens through the
"url_handlers" member. It accepts an array of objects with an
origin property, which is a required
string that is a pattern for matching origins. These patterns are allowed to have a wildcard (
*) prefix in order to include multiple sub-domains (like
https://*.example.com). URLs that match these origins could be handled by this web app. The scheme is always assumed to be
https://, but it needs to be explicitly mentioned.
The excerpt of a web app manifest below shows how the music PWA example from the introductory paragraph could set this up. The second entry with the wildcard (
"https://*.music.example.com") makes sure that the app also gets activated for
https://www.music.example.com or potential other examples like
web-app-origin-association file #
Since the PWA lives on a different origin (
music.example.com) than some of the URLs it needs to handle (e.g.,
https://🎵.example.com), the app needs to verify ownership of these other origins. This happens in a
web-app-origin-association file hosted on the other origins.
This file must contain valid JSON. The top-level structure is an object, with a member named
"web_apps". This member is an array of objects and each object represents an entry for a unique web app. Each object contains:
|(Required) URL string of the web app manifest of the associated PWA||N/A|
|(Optional) An object that contains arrays of included and excluded URL patterns||N/A|
"details" object contains:
|(Optional) Array of allowed path strings|
|(Optional) Array of disallowed path strings|
web-app-origin-association file for the music PWA example from above is given below. It would be hosted on the origin
🎵.example.com and establishes the association with the
music.example.com PWA, identified by its web app manifest URL.
When does a URL match? #
A PWA matches a URL for handling if both of the following conditions are fulfilled:
- The URL matches one of the origin strings in
- The browser is able to validate via the respective
web-app-origin-associationfile that each origin agrees to let this app handle such a URL.
web-app-origin-association file discovery #
For the browser to discover the
web-app-origin-association file, developers need to place the
web-app-origin-association file in the
/.well-known/ folder at the root of the app. For this to work, the file name must exactly be
To test PWAs as URL Handlers, be sure to set the browser flag as outlined above and then install the PWA at https://mandymsft.github.io/pwa/. By looking at its web app manifest, you can see that it handles URLs with the following URL patterns:
https://luhuangmsft.github.io. Since the latter is on a different origin (
luhuangmsft.github.io) than the PWA, the PWA on
mandymsft.github.io needs to prove ownership, which happens via the
web-app-origin-association file hosted at https://luhuangmsft.github.io/.well-known/web-app-origin-association.
To test that it is indeed working, send yourself a test message using an instant messaging app of your choice or an email viewed in an email client that is not web-based like Mail on macOS. The email or text message should contain either of the links
https://luhuangmsft.github.io. Both should open in the installed PWA.
Security and permissions #
The Chromium team designed and implemented PWAs as URL Handlers using the core principles defined in Controlling Access to Powerful Web Platform Features, including user control, transparency, and ergonomics.
User control #
If more than one PWA registers as a URL handler for a given URL pattern, the user will be prompted to choose which PWA they want to handle the pattern with—if any at all. Navigations that start in a browser tab are not handled by this proposal, it is explicitly aimed at navigations that start outside of the browser.
If the necessary association validation cannot be completed successfully during PWA installation for any reason, the browser will not register the app as an active URL handler for the affected URLs. URL handlers, if improperly implemented, can be used to hijack traffic for websites. This is why the app association mechanism is an important part of the scheme.
Platform-specific applications can already use operating system APIs to enumerate installed applications on the user's system. For example, applications on Windows can use the
FindAppUriHandlersAsync API to enumerate URL handlers. If PWAs register as OS level URL handlers in Windows, their presence would be visible to other applications.
Permission persistence #
An origin could modify its associations with PWAs at any time. Browsers will regularly attempt to revalidate the associations of installed web apps. If a URL handler registration fails to revalidate because the association data has changed or is no longer available, the browser will remove registrations.
The Chromium team wants to hear about your experiences with the PWAs as URL Handlers.
Tell us about the API design #
Is there something about the API that doesn't work like you expected? Or are there missing methods or properties that you need to implement your idea? Have a question or comment on the security model? File a spec issue on the corresponding GitHub repo, or add your thoughts to an existing issue.
Report a problem with the implementation #
Did you find a bug with Chromium's implementation? Or is the implementation different from the spec? File a bug at new.crbug.com. Be sure to include as much detail as you can, simple instructions for reproducing, and enter
UI>Browser>WebAppInstalls in the Components box. Glitch works great for sharing quick and easy repros.
Show support for the API #
Are you planning to use PWAs as URL Handlers? Your public support helps the Chromium team prioritize features and shows other browser vendors how critical it is to support them.
Helpful links #
- Public explainer
- Demo | Demo source
- Chromium tracking bug
- ChromeStatus.com entry
- Blink Component:
- TAG Review
- Microsoft documentation