PWAs as URL Handlers is part of the capabilities project and is currently in development. This post will be updated as the implementation progresses.
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
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 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
Support for the PWAs as URL Handlers feature is limited to desktop operating systems like Windows, macOS, and Linux. On Android, Chromium browsers install PWAs by generating a WebAPK, which can register a set of intent filters for all URLs within the scope of the app. This means that PWAs already handle associated URLs on Android at the operating system level using intent filters.
"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
*.example.com). URLs that match these origins could be handled by this web app. The scheme is
always assumed to be
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 (
"*.music.example.com") makes sure
that the app also gets activated for
www.music.example.com or potential other examples like
While in an online scenario, short links from
🎵.example.com would typically be
music.example.com. Such navigation redirection is not a good alternative with
respect to offline scenarios. Therefore the app needs to register for both origins.
web-app-origin-association file #
Since the PWA lives on a different origin (
music.example.com) than some of the URLs it needs to
🎵.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||
||(Optional) An object that contains arrays of included and excluded URL patterns||
"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.
web-app-origin-association file is similar to
Apple's associated domain file,
What differs is that the
web-app-origin-association file does not reference PWAs using a
platform-specific app ID, but by their 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 have two choices.
- Add a
<link rel="web-app-origin-association">element in the header section of the main document at the origin's root path that points at the
web-app-origin-associationfile via the
- Place the
web-app-origin-associationfile 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 (
than the PWA, the PWA on
mandymsft.github.io needs to prove ownership, which happens via the
web-app-origin-association file hosted at
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 has 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
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