https://web.dev/url-protocol-handler/

Background on schemes (aka. protocols) #

A Uniform Resource Identifier (URI) is a compact sequence of characters that identifies an abstract or physical resource. Each URI begins with a scheme name that refers to a specification for assigning identifiers within that scheme. As such, the URI syntax is a federated and extensible naming system wherein each scheme's specification may further restrict the syntax and semantics of identifiers using that scheme. Schemes are also known as protocols. You can see some examples of schemes below.

The term Uniform Resource Locator (URL) refers to the subset of URIs that, in addition to identifying a resource, provide a means of locating the resource by describing its primary access mechanism (e.g., its network location).

Background on the registerProtocolHandler() method #

The secure-content-only Navigator method registerProtocolHandler() lets sites register their ability to open or handle particular URL schemes. Therefore, sites need to call the method like so: navigator.registerProtocolHandler(scheme, url). The two parameters are defined as follows:

• scheme: A string containing the protocol the site wishes to handle.
• url: A string containing the URL of the handler. This URL must include %s, as a placeholder that will be replaced with the escaped URL to be handled.

The scheme must either be one of the safelisted schemes (for example, mailto, bitcoin, or magnet) or begin with web+, followed by at least one or more lowercase ASCII letters after the web+ prefix, for instance, web+coffee.

To make this clearer, here is a concrete example of the flow:

1. The user visits a site at https://coffeeshop.example.com/ that makes the following call: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
2. At a later point, while visiting https://randomsite.example.com/, the user clicks on a link such as <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
3. This causes the browser to navigate to the following URL: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. The search string URL-decoded then reads ?type=web+coffee://latte-macchiato.

What this proposal is about #

The present URL protocol handler registration for PWAs proposal is about offering protocol handler registration as part of a PWA installation through its manifest. After registering a PWA as a protocol handler, when a user clicks on a hyperlink with a specific scheme such as mailto , bitcoin, or web+music from a browser or a platform-specific app, the registered PWA will open and receive the URL. It is important to note that both the proposed manifest-based registration and the traditional registerProtocolHandler() play very similar roles in practice, while still allowing the possibility for complementary user-experiences:

• Similarities include requirements around the list of schemes allowed to be registered, and the name and format of parameters, etc.
• Differences in the manifest-based registration are subtle, but might be useful to enhance the experience for PWA users. For example, manifest-based PWA registration may not require an additional user action apart from the user-initiated installation of the PWA.

Use cases #