Application-Specific Links

You know like https:? That’s a URL Scheme. You’re probably familiar with the concept, thanks to others that come up in front-end development, like mailto:. You can actually make your own, which is pretty cool. There are a lot of them.

I find that custom URL schemes come up the most with apps that are both web apps and native apps. For example, two that I use nearly every day: Notion and Figma. I love that the things I work on in these apps have URLs. URLs for everything! 🎉

And yet. When I grab the URL to a Notion page, which I do regularly to share with co-workers, I get a URL like…

https://www.notion.so/csstricks/...

That’s fine, and works to open that Notion page in the browser. But I prefer Notion-the-native-app. It’s Electron, so it’s still a web app I guess, but I don’t use it from my web browser, I use it from the application Notion.app on my literal machine.

Geoff shared with me an article the other day that documents how easy it is to make an application’s browser URL open up in the native app instead:

Fortunately, Notion’s dev team thought about that, and built the notion:// link protocol. If you replace the https:// portion of any Notion page link with notion://, your link will automatically open within the native app instead of a web browser.
Thomas Frank, “How to Share Notion Links That Open Directly in the App”

That’s great that the native scheme is essentially the same as the web scheme, aside from the name. Thomas goes super deep on this with methods to alter the content of clipboard to replace Notion links with the custom scheme.

I just wanted to note a method I think works nicely for me. The trick isn’t to alter the links themselves, but to react to links that you know are Notion links by redirecting them to open in Notion.app.

The trick, on Macs, is Choosy:

I prefer to set up Choosy such that it never asks me what browser to use, it just does it based on rules. So under the settings, I have a bunch of apps set up:

For Notion, I watch for links to Notion, and have it open up Notion… that’s it!

The other apps basically do the exact same thing. Works great.

One caveat though! Once in a blue moon, I have to come in here and flip certain applications off. For example, a password reset flow might send me to slack.com or something, for a certain page as part of the flow that is only available through the web. If Choosy is doing its thing, it tries to force that page to open in Slack.app, which it won’t, and you can kinda get trapped. So, I have to come in here and flip it off temporarily.

Comments

Jakob

# August 31, 2021

The new Chromium Edge has one of these protocols – microsoft-edge: Which will open a link in an Edge window.

This is useful because with IE11 sunsetting now, and Edge being a viable alternative, you can check to see if the browser is running IE 11, and then automatically open the page in Edge, where it would be properly supported. Here’s a little snippet that does that.

// First check if the user agent is Trident (IE)
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {

  // We are going to take the current url, and use the edge protocol to bounce the url to Edge.
  window.location = 'microsoft-edge:' + window.location; 

  // After a short timeout (long enough to process the prior request) we are then going to redirect the IE window to a generic microsoft landing page.
  setTimeout(function() { 
    window.location = 'https://go.microsoft.com/fwlink/?linkid=2135547';
  }, 1);
}

IE 11 is already behaving similar to this when it handles youtube, facebook, or other big websites (if you still have IE11 try loading one of these sites in that browser. I would still use the following with caution, as I’m still not certain this is good to use in production, though if the browser is already doing something like this natively, then it may be fine.

Kyrodes

# August 31, 2021

You can use the console to create new URL schemes in Firefox but it needs to be web+yourscheme

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler

Then you can setup the scheme to open whatever app you want in about:preferences > Applications

You can modify the existent URL schemes too. For example: I modified “tel:” to open phone numbers in Whatsapp web, like this: https://web.whatsapp.com/send?phone=%s

That way I can type tel:99999999 and send a message to a number without even having to add the contact to my phone book.

Comments

Leave a Reply Cancel reply