jlayen
3/8/2013 - 7:20 PM

Ever want to launch a mobile app from within the browser, but ensure that the browser still redirects the user to the link if the app isn't

Ever want to launch a mobile app from within the browser, but ensure that the browser still redirects the user to the link if the app isn't installed? This took some fiddling around, but when the "ah ha" moment hit, the solution is really quite simple.

x-demo.html
content_copyfile_download
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="uriSchemeWithHyperlinkFallback.min.js"></script>
    </head>
    <body>
        <!-- links will work as expected where javascript is disabled-->
         <a class="intent"   
            href="http://facebook.com/someProfile"   
            data-scheme="fb://profile/10000">facebook</a>
            
            <script>
                // `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();
                });
            </script>
    </body>
</html>
uriSchemeWithHyperlinkFallback.min.js
content_copyfile_download
function uriSchemeWithHyperlinkFallback(e,t){var n=(new Date).getTime(),r,i;document.location=e;r=(new Date).getTime();i=r-n;if(i<1){document.location=t}}
uriSchemeWithHyperlinkFallback.js
content_copyfile_download
// tries to execute the uri:scheme
function uriSchemeWithHyperlinkFallback(uri, href) {
    // set up a timer and start it
    var start = new Date().getTime(), 
        end, 
        elapsed;

    // 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;
    }
}