Deep links are easy to test when the app is already installed. Tap the link, the app opens, done.
The awkward case is everyone else.
If the app is missing, the same link can leave someone on a generic homepage or a broken route. That was a problem for Smitten because people often arrive through a shared profile or Delulu Score. The link still needed to show them what had been shared.
Showing the content on the web
I built a read-only web version of the shared content. It uses the same typography, colors, and motion as the app, but it works in a mobile browser.
Someone opening a Delulu Score can see the score first. The “Open in App” button comes after that instead of blocking the content behind an install screen.
Trying the app first
Mobile browsers, especially Safari, do not give the page a reliable callback when another app opens. The browser has to try the app URL and infer what happened.
I used a delayed redirect. The page renders the web preview, tries to open the app, and waits. If the app does not handle the link, the visitor stays with the browser version.
const handleDeepLink = (appUrl, fallbackUrl) => {
const start = Date.now();
window.location.href = appUrl;
setTimeout(() => {
// If the app didn't open, the browser didn't background, and the timer kept running.
if (Date.now() - start < 1500) {
window.location.href = fallbackUrl;
}
}, 1000);
};The fallback is still part of the feature
The first requirement was simple: make the links work. Once we tested the full route, it became obvious that opening the app was only one possible result.
Some visitors will not have it installed. Some will be on a slow connection. Giving them the shared content in the browser made the link useful before asking them to download anything.
That is all the fallback needed to do. Show the thing someone shared, then offer the app.
Loading comments…