PWAs as URL Handlers

Let installed PWAs handle URLs for a more integrated experience.

Thomas Steiner

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 https://music.example.com, https://*.music.example.com, or 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:

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

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.

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

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

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

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/*"]
      }
    }
  ]
}

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 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 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 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.