Interconnected chains, symbolizing the handling of URLs.

PWAs as URL Handlers

PWAs as URL Handlers

Let installed PWAs handle URLs for a more integrated experience.

Updated

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, https://🎵.example.com/r-a/n-g-g-y-u.

PWA as URL Handlers allows apps like music.example.com to register themselves as URL handlers for URLs that match patterns like music.example.com, *.music.example.com, or 🎵.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:

  1. The "url_handlers" web app manifest member.
  2. The web-app-origin-association file 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 #

Step Status
1. Create explainer Complete
2. Create initial draft of specification Not started
3. Gather feedback & iterate on design In progress
4. Origin trial Not started
5. Launch Not started

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 about://flags.

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.

The "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 https://.

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 marketing-activity.music.example.com.

{
"url_handlers": [
{
"origin": "music.example.com"
},
{
"origin": "*.music.example.com"
},
{
"origin": "🎵.example.com"
}
]
}

While in an online scenario, short links from 🎵.example.com would typically be redirected to 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.

The 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., 🎵.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:

Field Description Type Default
"manifest" (Required) URL string of the web app manifest of the associated PWA string N/A
"details" (Optional) An object that contains arrays of included and excluded URL patterns object N/A

Each "details" object contains:

Field Description Type Default
"paths" (Optional) Array of allowed path strings string[] []
"exclude_paths" (Optional) Array of disallowed path strings string[] []

An example 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_apps": [
{
"manifest": "https://music.example.com/manifest.json",
"details": {
"paths": ["/*"],
"exclude_paths": ["/internal/*"]
}
}
]
}

The web-app-origin-association file is similar to Apple's associated domain file, Android's assetlinks.json file, and Windows' windows-app-web-link 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 "url_handlers".
  • The browser is able to validate via the respective web-app-origin-association file that each origin agrees to let this app handle such a URL.

Regarding 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-association file via the href attribute.
  • 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 web-app-origin-association.

Demo #

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://mandymsft.github.io and 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://mandymsft.github.io or https://luhuangmsft.github.io. Both should open in the installed PWA.

The Windows Skype instant messenger app next to the installed demo PWA, which is opened in standalone mode after clicking a link handled by it in a Skype chat message.

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.

Transparency #

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.

Feedback #

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.

Send a tweet to @ChromiumDev using the hashtag #URLHandlers and let us know where and how you're using it.

Helpful links #

Acknowledgements #

PWAs as URL Handlers was specified and implemented by Lu Huang and Mandy Chen from the Microsoft Edge team. This article was reviewed by Joe Medley. Hero image by Bryson Hammer on Unsplash.

Last updated: Improve article