Thursday, January 19, 2017

Web Based Protocol Handlers: The fastest user experience in the shortest amount of dev time

Firefox's Web Based Protocol Handler support has to be one of its hidden gems. Once a handler is registered, you gain especially quick access to specific content on the web. For 3shrink, this means quick access to the URL behind the 3 letter codes the site produces.

For example, to visit the URL behind the code PQW I need only type the following in my browser bar:

  grow:pqw

The protocol handler serves as the complement to the 1 click bookmarket, insuring that both growing and shrinking a URL is as streamlined as can be.

Best of all, implementing a Web Based handler couldn't be simpler. You need only make a call to: navigator.registerProtocolHandler. Here's the code that powers the register protocol handler link on 3shrink:

<?php
/*
 * A PHP file for rendering the code needed to install a web
 * based protocol handler.
 */
$domain = item_domain();
$code = <<<EOF
(function() {
  var proto = prompt("Protocol? (ex: grow)");
  navigator.registerProtocolHandler(proto, 
                                    "http://$domain/grow?i=%s",
                                    "$domain Handler");
})()
EOF;

$code = esc_attr($code);
?>
<a href="javascript:<?= $code ?>">Install Firefox Protocol Handler</a>
(<a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers">Huh?</a>)

Note how the code above prompts the user to enter the protocol name. That way, you could have personal and business and point them to two different 3shrink domains.

When you click to register a protocol, you'll a sort of pop-up bar message thingy:

The first time you use the protocol (that is, enter: grow:...) you'll be prompted to select the handler. While you're at it, select the checkbox so you're not nagged about this again:

One gotcha: attempting to access a protocol containing only numbers fails. For example:

  grow:347

Will take you to: http://grow.com:347/ - not what I wanted. The fix for 3shrink is to use any letter prefix. So you can type:

  grow:x347

I'm amazed I haven't found more uses for web based protocol handlers. For advanced users, you can offer a terrifically fast user experience at almost no cost in terms of development time.

No comments:

Post a Comment