Skip to content

Instantly share code, notes, and snippets.

@ChaseFlorell

ChaseFlorell/uriSchemeWithHyperlinkFallback.js

Last active February 21, 2023 11:22
Show Gist options
  • Save ChaseFlorell/5119047 to your computer and use it in GitHub Desktop.
Save ChaseFlorell/5119047 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
uriSchemeWithHyperlinkFallback.js
// 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;
}
}
Raw
uriSchemeWithHyperlinkFallback.min.js
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}}
Raw
x-demo.html
<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>
@Stevearzh
Copy link

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