March 2, 2021

URI Schemes for the front end

URI Schemes like mailto and tel are common, but there is a whole lot more out there.

Prefixing the href attribute with mailto: has been well known for a while. But I was on a page the other day that had a phone number, that when clicked, opened my phone app and called the business. This method has almost the same functionality as adding the mailto: prefix with an email address as the value, but it's done with tel: instead. Let's dive in to this a little. Here's the code:

<a href='tel:414-123-4567' rel='telephone'>414-123-4567</a>

What's happening here is that different URI schemes trigger different behaviors when supplied as a value to the anchor tag's href attribute. There are very many different possible schemes, but I'm gonna talk about a couple important ones. We've already discussed the mailto: and tel: schemes, but I wanna mention a couple others that are useful and interesting:

<a href='bitcoin:<address>[?[amount=<size>][&][label=<label>][&][message=<message>]]'>Send Bitcoin</a>
<a href='chrome://<settings>/<path>/[<specificSetting>'>Access Chrome Settings</a>
<a href='chrome-extension://>extendionID>/<pageName>.html'>Access Chrome Plugin Settings</a>
<a href='example:<anything>'>Example: Anything</a>
<a href='facetime://+19995551234'>Facetime someone</a>
<a href='fax:<phoneNumber>'>Send a fax! JK this is deprecated</a>
<a href='file://[host]/path'>Access a file on local or network file systems</a>
<a href='geo:[lat],[long][,<alt>][;u=>uncertainty<]'>Open a position in the user's preferred mapping service (if enabled)</a>
<a href='lastfm://<radio_stream>'>Open a lastfm radio stream</a>
<a href='market://details?id=Package_name'>Opens Google Play</a>
<a href='skype:<username|phonenumber<'>Launch Skype call</a>
<a href='sms:<phone number>?<action>'>Interact with SMS capable devices</a>
<a href='spotify:user:<username>:playlist:<id>'>Open Spotify (lots of options here, username, playlist, track, artist, album, etc)</a>
<a href='steam://<action>/<id, addon IP, hostname, etc>'>Interact with Steam</a>
<a href='view-source:<absolute-URI>'>Shows a web page's source code</a>
<!-- The URI schemes below are not official but are common -->
<a href='javascript:<javascript to execute>'>Execute JavaScript</a>
<a href='zoommtg://'>Launches Zoom client to a meeting</a>
<a href='slack://open?tem={TEAM_ID}'>Open the Slack client</a>

There are a lot more URI schemes that can be used on the web listed on Wikipedia. I'd be hard pressed to actually rely on some of these, but they're neat if you have a well-defined userbase. For example, the Geo URI scheme did not work when I clicked on it on that Wikipedia page because I don't have a default mapping program installed on my desktop. However, clicking that link on my phone did open Google Maps. Your Mileage May Vary, I guess is what I'm trying to say.