Search code examples
javascripthtmlapplinks

Check from app webpage whether related native app has been installed


I have an iOS and Android app and I'm building a corresponding website. I would like that the webpage, if opened using a mobile device, opens the app or its corresponding app store page (without using Facebook app links). On the app side everything is working, including the url schema.

Does someone know how to implement this procedure, without external services, using HTML and JS?

Thanks in advance for your help.


Solution

  • To be honest, this is kind of a pain to implement on your own. There is no easy way to handle everything without a ton of nasty edge cases, most notably the 'Cannot Open Page" error users will see if they don't have your app installed. Until iOS 9, a reasonable basic implementation was putting a JavaScript redirect like this into a dedicated redirect page on your site:

    setTimeout(function() {
      window.location = "https://yourdomain.com";
    }, 25);
    
    // If "yourapp://" is registered, the user will see a dialog
    // asking if they want to open your app. If they agree, your
    // app will launch immediately and the timer won't fire.
    // If not installed, you'll get an ugly "Cannot Open Page" 
    // dialogue and your fallback page will open when the timer expires.
    
    window.location = "yourapp://";
    

    Unfortunately this would still show a 'Cannot Open Page' error, but until recently it was possible to get around this in a reasonably user-friendly way by using a more nuanced version of this script. Sadly, Apple intentionally broke that with the iOS 9.2 update, so custom URL schemes are actually pretty much useless for deep linking now, unless you are certain the app is already installed on that device.

    Apple is obviously trying to push the newer Universal Links standard as much as possible. Universal Links lets you use a normal http:// URL to a page on your website (the page could be a simple redirection to your desired fallback webpage without the custom URL trigger that causes the 'Cannot Open Page' error), which is intercepted by your phone and sent directly into your app if installed.

    This is quite a lot to handle, so the best option might be a free service like Branch.io (full disclosure: I work with the team) to take care of all the technical aspects. You can find examples of apps using the Branch service here.