How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed

24,845

I think I've got a working solution.

 <!-- links will work as expected where javascript is disabled-->
 <a class="intent"   
    href="http://facebook.com/someProfile"   
    data-scheme="fb://profile/10000">facebook</a>

And my javascript works like this.
note: there's a little jQuery mixed in there, but you don't need to use it if you don't want to.

(function () {

    // tries to execute the uri:scheme
    function goToUri(uri, href) {
        var start, end, elapsed;

        // start a timer
        start = new Date().getTime();

        // attempt to redirect to the uri:scheme
        // the lovely thing about javascript is that it's single threadded.
        // if this WORKS, it'll stutter for a split second, causing the timer to be off
        document.location = uri;
        
        // end timer
        end = new Date().getTime();

        elapsed = (end - start);

        // if there's no elapsed time, then the scheme didn't fire, and we head to the url.
        if (elapsed < 1) {
            document.location = href;
        }
    }

    $('a.intent').on('click', function (event) {
        goToUri($(this).data('scheme'), $(this).attr('href'));
        event.preventDefault();
    });
})();

I also threw this up as a gist that you can fork and mess with. You can also include the gist in a jsfiddle if you so choose.


Edit

@kmallea forked the gist and radically simplified it. https://gist.github.com/kmallea/6784568

// tries to execute the uri:scheme
function uriSchemeWithHyperlinkFallback(uri, href) {
    if(!window.open(uri)){
        window.location = href;
    }
}
// `intent` is the class we're using to wire this up. Use whatever you like.
$('a.intent').on('click', function (event) {
    uriSchemeWithHyperlinkFallback($(this).data('scheme'), $(this).attr('href'));
    // we don't want the default browser behavior kicking in and screwing everything up.
    event.preventDefault();
});
Share:
24,845
Chase Florell
Author by

Chase Florell

I'm a developer in BC Canada and one of the owners of Flo Media Group Inc. I work primarily in C# .NET, Xamarin, HTML5 and Javascript, and I'm also very passionate about DevOps, and have been known to sling my fair share of PowerShell. When I'm not coding, I'm enjoying time with my wonderful wife and children, riding my motorcycle, camping in the summer months, snowboarding in the winter, or maybe just a round at the Golf Course. I Blog Here, and I'm also on Linkedin Contact Me

Updated on July 09, 2022

Comments

  • Chase Florell
    Chase Florell almost 2 years

    I am hoping there might be some way of detecting whether or not an uri:scheme is registered on a mobile device from within the browser.

    IE: I'd like to check if the facebook, twitter, pinterest apps are installed and can be launched from their associated uri:scheme.

    if(fb_isInstalled) {
        // href="fb://profile/...."
    } else {
        // href="http://m.facebook.com/..."
    }
    

    Basically if the user has installed facebook, then launch the app, but fall back to the mobile version of the fb website if the app is not installed.