Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Install a service handler for URI scheme from webpage

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

Icon for installing custom service handler

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?

like image 694
rpeshkov Avatar asked Apr 17 '13 08:04

rpeshkov


People also ask

What does it mean when a page wants to install a service handler?

Therefore, the message indicates to configure the application to run as “Handler” whenever the link is clicked on. By doing so, instead of opening the link in the browser, it will automatically be opened in the application.

Where is the handler icon in Chrome?

The Protocol Handler Icon Look for the Protocol Handler icon at the top right. This looks like a gray-colored diamond that's to the left of a star, with the latter being used for bookmarking.


1 Answers

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
like image 135
Vadim Avatar answered Oct 01 '22 13:10

Vadim