How the Apple News deep links work

Wired is currently previewing a story that can only be read through the Apple News app. Let’s investigate how Wired is able to link to their content inside the News app.

The Apple News URL for the story is https://news.apple.com/A-oPQmJNfTyi9oHKs1xCY3w. If you request it with a non-iOS user agent header it redirects you to the original content on Wired:

However with an iOS user agent header you get an HTML response:

Safari will attempt to open the News app for you when it loads this page. First there’s an old-school meta refresh to a custom URL scheme supported by the News app:

<meta http-equiv=”refresh” content=”0;URL=applenews:///A-oPQmJNfTyi9oHKs1xCY3w”/>

This seems to pass the path portion of the original URL.

It’s backed up by a simple script which inserts (and immediately removes) a hidden iframe:

window.onload = function() {
var redirect = function (id, location) {
var iframe = document.createElement('iframe');
iframe.id = id;
iframe.src = location;
iframe.width = 0;
iframe.height = 0;
iframe.frameBorder = 0;
iframe.setAttribute('position', 'absolute');
iframe.setAttribute('top', '0');
iframe.setAttribute('left', '0');
document.body.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
};
setTimeout(function() {redirect("applenewsredirect", "applenews:///A-oPQmJNfTyi9oHKs1xCY3w"); }, 5);
setTimeout(function() { window.location = "http://www.wired.com/2015/09/bjarke-ingels-2-world-trade-center-wtc"; }, 500);
};

Half a second after trying to open the app you’re redirected to Wired for the original content. This page will remain open in Safari while you peruse the content in the News app.

Annoyingly, navigating back in the Safari history from Wired once again opens the News app.

There is nice enough placeholder page while all of this is going on, which includes an “Open This Story” link which reloads the placeholder page.

Placeholder page shown during the redirect.

Note that if the News app isn’t installed you’ll briefly see an alert before you’re redirected to Wired. The prompt says “Cannot Open Page — Safari cannot open the page because the address is invalid.”

Error shown (briefly) if the News app isn’t installed.

Presumably this is the state-of-the-art when it comes to automatically deep linking into iOS applications. The iframe and timeout hacks are a bit crazy, it’d be nice if Safari could provide a method that would either open the app or take the user to the actual content without unnecessary alerts.

For now though this is what you’d need to do in order to implement deep links like Apple does themselves:

  • Weed out non-iOS browsers on the server, redirecting them to the actual content
  • Use a meta refresh to redirect to a custom URI scheme belonging to your app
  • Load the same custom URI scheme by inserting a hidden iframe
  • In case your app wasn’t installed, redirect to the actual content after half a second
  • Show a placeholder page so the user isn’t left with an empty screen

One improvement I would suggest (and that I have implemented in the past) is to use replaceState() to change the URL of the deep link page before redirecting to the actual content. That way you can stop the user from accidentally opening the app when going back through their browser history.