Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
// 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;
}
}
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}}
<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>
@benytocarlo

This comment has been minimized.

benytocarlo commented May 27, 2013

works on windows phone 7.8 ?

@ChaseFlorell

This comment has been minimized.

Owner

ChaseFlorell commented May 28, 2013

No idea. Please test and comment back.

@flashlizi

This comment has been minimized.

flashlizi commented May 30, 2013

doesn't work on itouch ios 5.0. the elapsed time > 1 even the scheme fires.

@ChaseFlorell

This comment has been minimized.

Owner

ChaseFlorell commented May 31, 2013

Unfortunately I don't have access to every mobile device/browser/platform known. I can't test beyond what I have. If it's not working for you, try messing with it to get it working on yours and then submit a pull request.

@kmallea

This comment has been minimized.

kmallea commented Oct 1, 2013

Instead of checking for elapsed time what about using window.open and see if its a true or false? Along with testing if mobile device.

How about

if(!window.open(uri)){
document.location = href;
}

@ChaseFlorell

This comment has been minimized.

Owner

ChaseFlorell commented Jan 5, 2014

@kmallea, that's an interesting idea. I didn't know window.open() returned a bool. I'll have to check it out.

@ChaseFlorell

This comment has been minimized.

Owner

ChaseFlorell commented Jan 5, 2014

@kmallea, I see you forked the repo and updated it to use your suggestion. How has it been working with that approach? I never was super happy with the timer.

@naeluh

This comment has been minimized.

naeluh commented Nov 18, 2014

Any Idea how to include a post with this ? something like fb://publish/?text=some text to post or pass something to a post on the app. I have limited docs as to what fb:// links still work. any advice would be much appreciated. I have tried a lot on my shitty phone and I have limited to no success getting these to work. iphone 4 ios 7 thanks

@Stevearzh

This comment has been minimized.

Stevearzh commented May 12, 2015

It worked fine in normal page, but didn't work in ajax part.

Ps: I have tried window.open(), which works in all situation, but when you use window.open() method, it will open a new window in browser wether you install the app or not. Maybe we can add it into function uriSchemeWithHyperlinkFallback, after if (elapsed < 1), like this:

if (elapsed < 1) {
    document.location = href;
} else {
    window.open(uri);
}

Pss: The ajax problem solved, better change js to this:

$(document).on('click', '.intent', function (event) {
                uriSchemeWithHyperlinkFallback($(this).data('scheme'), $(this).attr('href'));
                event.preventDefault();
            });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment