Is it possible to implement deep links from website to native app?

Question

I have three buttons on my website, that link to Facebook, Twitter & vk.com pages. I want to open native app, if it is installed on user device. Otherwise, I want URL fallback to be opened.

First of all, I tried to use native app schemes directly with deep-link.js plugin. But, when I tried to open native app URL scheme, when native app was not installed, Safari has shown an error, but opened URL fallback page finally. Default Android browser said that he does not know how to handle such URL scheme:

<a class="btn btn-primary" href="https://www.facebook.com/warpcompany" data-app-ios="fb://profile/838619192839881" data-app-android="fb://page/838619192839881">Facebook</a>

Then I tried to use App Links "standard", that that has so much promotion from Facebook. I even tried to use their hosted app links, to make sure I've generated everything right way. It does not work, it always redirect to website fallback. You can easily test it by yourself from https://fb.me/746134728830806

Is it possible to provide deep link on website, that will open native app without errors at least in default os browsers, or fallback silently to URL?

Answer 1

It is still possible, but on newer versions of the Android default browser you have to use intents instead of just trying to open the deep link. For example replace your fb://page/838619192839881 with

intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;end

This will fallback to Google play by default, but you can override the fallback adding a S.browser_fallback_url:

intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;S.browser_fallback_url=http%3A%2F%2Fwww.facebook.com%2F;end

The fallback should be url encoded.

Of course you'll have issues if the user is not on an Android phone or with an old version of the default browser (or strange browser). You can setup a bunch of conditions and replace your HTML with the correct code for each case.

Answer 2

The accepted answer will only work on Chrome v28 and default browsers for Android 5.0. If you want this to work on other browser like Facebook/Twitter webviews, Firefox, UC and older default browsers than 5.0, you'll need to use some code that's a little more complicated.

Add this function to your JS snippet:

    var openSesame = function() {
        var method = 'iframe';
        var fallbackFunction = function() {
            if (method == 'iframe') {
                window.location = "market://details?id=com.facebook.katana";
            }
        };
        var addIFrame = function() {
            var iframe = document.createElement("iframe");
            iframe.style.border = "none";
            iframe.style.width = "1px";
            iframe.style.height = "1px";
            iframe.src = "fb://page/838619192839881";
            document.body.appendChild(iframe);
        };
        var loadChromeIntent = function() {
            method = 'intent';
            document.location = "intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;end";
        };
        if (navigator.userAgent.match(/Chrome/) && !navigator.userAgent.match("Version/")) {
            loadChromeIntent();
        }
        else if (navigator.userAgent.match(/Firefox/)) {
            window.location = "fb://page/838619192839881";
        }
        else {
            addIFrame();
        }
        setTimeout(fallbackFunction, 750);
    };

Then your button will look like this:

<a href="" onclick="openSesame();">Open the App</a>

Or you can use a service like branch.io which does exactly what you're looking for automatically.