Create custom browser protocols 🌐 A little guide into protocol handlers 📘

Hi, in this tutorial I will cover the creation of custom browser protocols using Javascript and the posible use cases.

What are the protocol handlers ?

These are ways to "generalize" services, to understand it i will use a very common example. Imagine that you want your website to open the user preferred mail client with an email address. To approach this task we may think to use an anchor link with "mailto:[e-mail]" this way it will open the Mail APP.

In this case mailto is the custom protocol, instead of using http or https we are using mailto.

Why can be interesting for your webpage/app ?

If you want some type of branding in your links or simplicity.

If you want to create standart way to comunicate your website with an APP or web page from the browser. As i have shown in the previous example custom protocols can be really usefull in this aspect but exists more examples.

Another example of this can be Instant.io, it is a service to share files through webtorrent. When you upload a file the website will give you a link that looks like "magnet:....." this way someone who has already visited Instant.io and agreed to use it with the magnet protocol you can paste this custom url in the browser and it will work. But magnet is an standart so other websites are using it

How can I create protocol handlers ?

Now we are going to see how the code looks. In a script we will write

// Modified example taken from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers#registering

if ('registerProtocolHandler' in navigator) {

   const customProtocol = "web+burguer"
   const placeHolder = "https://myburguerwebpage.com/?uri=%s"
   const protocolDescription = "Burger handler"

   navigator.registerProtocolHandler(
        customProtocol,
        placeHolder,
        protocolDescription,
      ); 
}

And now if you want to try out

<a href="web+burger:cheeseburger">My custom browser protocol: web+burger</a>

This feature may not be for everyone but it is very easy to implement and interesting. This was all for this post, I hope you liked. ♥

Write down in the comments if you have funny/better use cases for this feature

Resources: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers#registering

Comments

[Ruslan Korkin]

What a real case of using it?)

[PiterDev]

I think it will be usefull if you want to link to a common service that the user have decided previously the provider of it.

As it works with the mail, for example mail:[e-mail] will send you to your prefered mail provider and try to send a mail to the specified email addres.
Another real case I have seen is in instant.io/ to manage magnet links.