Handle protocols in a PWA
To create a more engaging experience, a Progressive Web App (PWA) can handle multiple protocols. A Uniform Resource Locator (URL) is a string that allows clients to identify a resource on the Web. The first part of a URL is the protocol, such as http
or mailto
, which lets clients know how to retrieve the resource.
With Protocol Handling, when a PWA is being installed, the PWA can register to handle certain allowed protocols. For example, an email client app can register to handle the mailto
protocol, or a geolocation app can register to handle the geo
protocol.
Custom protocols can also be handled, if a PWA registers a protocol that starts with the web+
prefix.
To learn more about other existing protocols, see List of URI schemes.
Register protocols to handle
To use Protocol Handling, declare which protocols your app handles. This is done in your web app manifest file, by using the protocol_handlers
array member. Each entry in the protocol_handlers
array contains a protocol
string and a url
string:
{
"protocol_handlers": [
{
"protocol": "mailto",
"url": "/newEmail?to=%s"
}
]
}
In the above example, the app is registered to handle the mailto
protocol. When the operating system launches the app in response to the mailto
protocol, the app navigates to the /newEmail
URL, replacing the %s
placeholder with the full URL that's being handled.
See also:
- protocol_handlers at MDN > References > Web app manifests.
Test protocols with the DevTools
You can use the Application tool in Microsoft Edge DevTools to verify that Microsoft Edge successfully registered your app as a handler for the protocols you defined in your web app manifest. You can also test protocols and launch your PWA with different URLs and endpoints. For more information, see Test Progressive Web App (PWA) protocol handling.