Protocol handlers allow you to inform the browser that your web app is capable of handling links and URLs with certain schemes. Using the
registerProtocolHandler method you are able to register your web app as a handler for schemes like
webcal, or even create your own schemes from scratch.
In this post you’re going to learn how to use the
registerProtocolHandler method to set up protocol handlers for your web applications.
Examining the registerProtocolHandler Method
Registering a protocol handler for your web app is pretty straight-forward. You just need to call the
registerProtocolHandler method from within your web app.
navigator.registerProtocolHandler(protocol, url, title)
The browser will then display a small icon in the address bar. Once this icon is clicked, a popup will be displayed asking the user to confirm that they wish your application to handle the specified scheme.
registerProtocolHandler method has three parameters:
protocol– The scheme that you want your app to handle (e.g.
url– The URL that will be used as the handler for this scheme.
title– The title of your app. This will be displayed in the permissions popup.
You can use the
%s placeholder to specify where in the handler URL the request data should be placed (more on this later).
It’s important that you call the
registerProtocolHandler method from the same domain as your handler, otherwise the call will be ignored. This is a security feature that prevents rogue applications from registering protocol handlers for other apps.
Designing Your Own Schemes
If you look at existing schemes you’ll notice that they’re all related to a protocol or action. It’s often the case that a user might have multiple applications capable of handling a particular scheme. For example the
mailto scheme could be handled by a number of different email clients – native and web. Keep this in mind when designing your own URL schemes.
When creating your own schemes for a web app you should prefix the scheme name with
web+. The example below shows a proposed scheme for sending a tweet.
In theory, multiple Twitter clients could register themselves as handlers for the
When constructing a URL, you can pass data to your handler by placing it after the scheme. Make sure that you use a colon to separate the data string from the scheme.
Here’s an example of a link that uses the
web+tweet scheme. The data here would be used to populate a new tweet.
<a href="web+tweet:Hello%20Treehouse">Tweet 'Hello Treehouse'</a>
Clicking this link would trigger a GET request to:
(Assuming that the protocol handler URL was set to
Note that the entire contents of the
href attribute is passed to the handler. You will need to separate the data from the scheme manually.
Limitations of Web-Based Protocol Handlers
Having the ability to register your app as a handler for certain schemes is really useful, but
registerProtocolHandler does have some limitations.
The biggest limitation is that you can only pass text data to the handler. This is just fine for a lot of applications but quickly becomes a problem if you need to handle more complex data types or files.
Another limitation is that you cannot send data back to the application where the request originated. The current implementation of
registerProtocolHandler is very much ‘fire-and-forget’ from the calling applications perspective.
Firefox has had support for
registerProtocolHandler since version 3. With Google Chrome adding support in version 13, and Opera in version 11.60.
Safari and Internet Explorer do not currently support
Final Thoughts on Protocol Handlers
In this blog post you’ve learned how to set your web applications to handle certain URL schemes using the
registerProtocolHandler method is very useful if you’re building a web application that can handle a standardized protocol like
mailto. The ability to create your own schemes is also a valuable feature. It’s great that web apps can register to handle protocols that may previously have been handled by native apps. This is just another example of how browser vendors are helping to bridge the gap between native and web applications.
What are your thoughts about protocol handlers? Have you ever used this feature in an app you’ve built? Share your views in the comments below.
Comments are closed.
Front End Web Design
User Experience (UX) Design
iOS Development with Swift
Python Web Development
Each is designed by our faculty of tech professionals to guide even a coding beginner to becoming a job-ready software developer armed with a professional portfolio of real-world projects. Try one out today with our free seven-day trial, and see if software development is for you.