Install a service handler for URI scheme from webp

2019-03-08 20:38发布

问题:

When accessing Google Mail or Google Calendar from Chrome, small icon appears in addressbar allowing to install custom service handler for URI scheme (marked with red square in picture).

Tooltip for icon is: This page wants to install a service handler. When I click icon and allow Google Mail to handle mailto: links, all mailto: links are opening in Chrome.

Is it possible to create webpage that will be able to install custom handler for my custom URI scheme just like Google Mail do?

回答1:

For Chrome (13+), Firefox (3.0+) and Opera (11.60+) it is possible to register web application as service handler for custom URI scheme using JavaScript API:

window.navigator.registerProtocolHandler(protocol, uri, title);
  • protocol is the protocol the site wishes to handle, specified as a string.
  • uri is the URI to the handler as a string. You can include "%s" to indicate where to insert the escaped URI of the document to be handled.
  • title is the title of the handler presented to the user as a string.

Specifically for Chrome there is a limitation that does not allow to use custom schemes that don't start with web+ prefix (except standard ones: mailto, mms, nntp, rtsp and webcal). So if you want to register your web app as service handler as GMail do, you should write something like this:

navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail");

or

navigator.registerProtocolHandler("web+myscheme", "https://www.example.com/?uri=%s", "My Cool App");

Pay attention at URI pattern, it have to contain %s which will be replaced with actual URI of the link user clicks. For example:

<a href="web+myscheme:some+data">Open in "My Cool App"</a>

will trigger GET request to http://www.example.com/?uri=web%2Bmyscheme%3Asome%20data

Here are some useful links:

  • Standard http://www.whatwg.org/specs/web-apps/current-work/#custom-handlers
  • MDN https://developer.mozilla.org/en-US/docs/DOM/navigator.registerProtocolHandler
  • HTML5ROCKS http://updates.html5rocks.com/2011/06/Registering-a-custom-protocol-handler