Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does LinkedIn suppress mobile safari "invalid address" warnings, for deeplinks to their iOS app when it's not installed?

How can mobile safari "invalid address" warnings be suppressed, for links to an iOS app that's not installed?

I don't want to use a Smart App Banner (too little control over UX). I don't want to pay nor integrate with a 3rd party vendor ($, dependency).

The use case is simple to understand: In mobile Safari (eg on an iPhone): follow a link to my mobile-web-friendly page (eg "www.example.com/mw-foo.html"). If my native iOS app is installed, route / redirect the user to an app deeplink within it (e.g. "com.example.app://my-deeplink"). (Note the mapping from mw url to the app uri is easily managed in an apache rewritemap or a js collection object, that's the easy part.) The real challenge is: If the app is NOT installed, suppress the "invalid address" popup warning gracefully (allowing me to decide whether it's a NOOP / stay on the mw page, or to route the user to the app store to install the app).

How is it possible to work around this bad UX? I've seen half-baked solutions involving iframe injection and race conditions with "magic numbers" for timeouts, pagehide event listeners and window.location overrides... but none of them seem able to reliably work around the popup. A solution that seemed close was this one: http://www.mazdigital.com/blog/post/2014/deep-links-on-mobile-browsers-demystified ... but it doesn't prevent the warning from appearing either.

I'd considered declaring it impossible, except that a few big enterprises seem to have managed it (e.g. LinkedIn). But I haven't succeeded in reverse-engineering their approach from the outside.

A good solution here would be a huge benefit to the community (and to me personally). If anyone can describe exactly how LinkedIn manages this, I'd be extremely grateful. Also, thanks in advance for helpful feedback / links to gists or posts, ideally which you've actually used and can vouch for. Thank you!

PS Not really a DUP of this one: how to prevent iOS safari alert when trying to open non-installed native app? because they don't answer how LinkedIn does it (and the suggested answers there don't work).

like image 442
cweekly Avatar asked Nov 23 '22 10:11

cweekly


1 Answers

They are using the smart banner API.

From their minimized code on their touch webpage (formatted):

 var smartBannerIOS = {};
(function(c) {
    c.initialize = function() {
        var a = c.createMetaTagContent();
        metaBanner = document.createElement("meta");
        metaBanner.setAttribute("name", "apple-itunes-app");
        metaBanner.setAttribute("content", a);
        document.getElementsByTagName("head")[0].appendChild(metaBanner)
    };
    c.createMetaTagContent = function() {
        var a = window.location.hash;
        a || (a = "#home");
        var b = "";
        b = a.indexOf("?") >= 0 ? "&smartbanner=1" : "?smartbanner=1";
        var d = $initMetrics && $initMetrics.getServerData();
        if (d && d.isLoggedIn)
            b += "&logged_in=1";
        b += "&session_id=" + 
        ($initMetrics && $initMetrics.sessionId);
        return "app-id=288429040, app-argument=" + ("linkedin://" + a + b)
    }
})(smartBannerIOS);

smartBannerIOS.initialize();

It's documentation can be found here: Apple Dev Docs - Promoting Apps with Smart App Banners

like image 144
JonathanTech Avatar answered Nov 25 '22 00:11

JonathanTech