Launch app from link, if no app then go to download app from web

Question

So I'm looking to launch a mobile app when a web page is landed on. I've seen this done and all is great there (see code below with Facebook and Pandora as an example). But I'm looking for a logic check to route the user one way or the other depending upon the successful or unsuccessful launch of the app. It was said in a previous solution that you cannot use a link to check the user's mobile device to see if an app is installed, but I keep thinking that there might be a way to see if the user's app was successfully launched after-the-fact and route them based on that.

Using the code below, if the app is launched, the web page falls away, if you will (disappears into the background while the app takes center stage). If, however, the app isn't installed on the mobile device, then the web page stays up and you get an error (can't recall off-hand which error). But it seems to me that receipt of this error should be able to trigger a re-routing to a specific URL of your choice. Not at the server-level, but at the code-level. In other words... if the app launches, then grats... enjoy! But if the page loads with an error, then it redirects instantly to say, the app download page on Apple or Google (depending upon the OS detected).

Does anyone have a suggestion as to how to make this happen? Essentially one piece of code that is looking for the trigger error and reacting to that as a way to A) launch the app from a page load (link) B) open the app store in a browser to download the app if the app wasn't successfully launched.

This is my first foray into Stack, but I have found the community very helpful over the years.

<script type="text/javascript"> // <![CDATA[
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};



if ( isMobile.Android() ) {
    document.location.href = "fb://profile";
}
else if(isMobile.iOS())
{
    document.location.href="pandora://";
}
</script>

Knop

I think you should set the location with a custom protocol on a hidden iframe so JavaScript will continue to execute if the redirect to app didn't work: gist.github.com/pulletsforever/2662899 – Beseech

Awesome. I was thinking the same thing - having an iframe that basically times out with a redirect if not interrupted by the desired app open success (if I understand it correctly). I'll look in that direction, but it looks promising so far. Thanks for the link Pawel. – Knop

Answer 1

What you're talking about is called Deferred Deep Linking in terms of App Links. If you were coding an app that wanted to utilize this, there are iOS guides and Android ones. Overall, there doesn't seem to be a standard implementation for all scenarios, however, there is a pretty simple "roll-your-own" implementation that is similar to what you're attempting.

(from another SO answer)

<script type="text/javascript">
    window.onload = function() {
        // Deep link to your app goes here
        document.getElementById("l").src = "my_app://";

        setTimeout(function() {
            // Link to the App Store should go here -- only fires if deep link fails
            window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
        }, 500);
    };
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>

As a commentor said above, use an iframe so you can keep processing code even if your window.location fails. Then, set up a simple setTimeout with a reasonable fallback time. You don't need to catch any error messages or response headers. If the app didn't launch, then a website will.

Capriola

Thank you James. I haven't yet tested on mobile devices but I have tried this on Mac OS Catalina + Chrome (see I also need it to work on Windows/MacOS ... and Android/iOS). If the app is not registered if correctly redirects, but it is registered it briefly shows a popup to click in order to open the registered application and immediately closes it again and then redirects to the download page before I had the time to open the app :( – Ibarra

Hmm, sounds like the app confirmation pop up is not blocking the set timeout anymore. Okay... Alternative: blog.branch.io/… (iOS universal link method) and developer.android.com/training/app-links (Android app links) – Capriola

Answer 2

Just thought to add, since you want A) Launch App from link and upon failure B) Go to store to download the app.

A Cross-Platform solution you can use rather than rolling your own as an alternative, I'd suggest trying Firebase Dynamic Links (works on both Android and iOS) and its free.

It also has the benefit of providing your app the link information, like if you put in the link an article ID (from your news website example), then the app can load up that article upon launch, and it persists even if the user has to install the app from the store, when launched it will open to that article you specified in the link.

In addition, Dynamic Links work across app installs: if a user opens a Dynamic Link on iOS or Android and doesn't have your app installed, the user can be prompted to install it; then, after installation, your app starts and can access the link.

https://firebase.google.com/docs/dynamic-links

With very little code you can add the ability for a user to click a link on your mobile web and be taken to the corresponding page in your app, even if they have to go to the App Store or Google Play Store to install it first!

https://firebase.google.com/docs/dynamic-links/use-cases/web-to-app

Situate