Skip to content

Instantly share code, notes, and snippets.

@mcxiaoke

mcxiaoke/index.html

Forked from davidwkeith/index.html
Created July 3, 2014 03:53
Show Gist options
  • Save mcxiaoke/c2dd7d24c31c5bd2d724 to your computer and use it in GitHub Desktop.
Save mcxiaoke/c2dd7d24c31c5bd2d724 to your computer and use it in GitHub Desktop.
Download ZIP
detect app installed in browser
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App Redirection</title>
</head>
<body>
<!-- iframe used for attempting to load a custom protocol -->
<iframe style="display:none" height="0" width="0" id="loader"></iframe>
<script>(function(){
// For desktop browser, remember to pass though any metadata on the link for deep linking
var fallbackLink = 'http://example.com/my-web-app/'+window.location.search+window.location.hash;
// Simple device detection
var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'),
isAndroid = navigator.userAgent.match('Android');
// Mobile
if (isiOS || isAndroid) {
// Load our custom protocol in the iframe, for Chrome and Opera this burys the error dialog (which is actually HTML)
// for iOS we will get a popup error if this protocol is not supported, but it won't block javascript
document.getElementById('loader').src = 'custom-protocol://my-app'+window.location.search+window.location.hash;
// The fallback link for Android needs to be https:// rather than market:// or the device will try to
// load both URLs and only the last one will win. (Especially FireFox, where an "Are You Sure" dialog will appear)
// on iOS we can link directly to the App Store as our app switch will fire prior to the switch
// If you have a mobile web app, your fallback could be that instead.
fallbackLink = isAndroid ? 'https://play.google.com/store/apps/details?id=com.mycompany.myapp' :
'itms-apps://itunes.apple.com/app/my-app/idxxxxxxxx?mt=8' ;
}
// Now we just wait for everything to execute, if the user is redirected to your custom app
// the timeout below will never fire, if a custom app is not present (or the user is on the Desktop)
// we will replace the current URL with the fallbackLink (store URL or desktop URL as appropriate)
window.setTimeout(function (){ window.location.replace(fallbackLink); }, 1);
/*
Q&A
I have a native desktop app as well, how do I link to a custom protocol handler on the desktop?
IE Only: http://msdn.microsoft.com/en-us/library/ms537512.aspx#Version_Vectors
All Other Browsers: Use a custom plugin like iTunes does: http://ax.itunes.apple.com/detection/itmsCheck.js
*/
})();</script>
</body>
</html>
@menzri
Copy link

menzri commented Nov 24, 2020

thanks

@corexo
Copy link

corexo commented May 5, 2021

thanks you.

@rokib321
Copy link

Verify Github on Galxe. gid:uta2Ny9c3MgMtXzRQrTFYM

@way2ex
Copy link

way2ex commented Nov 11, 2022

Thank you

@T-Damer
Copy link

T-Damer commented Nov 8, 2023

Itunes if needed: http://web.archive.org/web/20220813165102/https://ax.itunes.apple.com/detection/itmsCheck.js

@ccaa7530
Copy link

setTimeout still executes after the app is opened, so the current page will navigate to the fallback link
to prevent this, I use the document.hasFocus function to check.

This is work for me.

redirectToApp() {
    let fallbackLink = 'https://yourapp.com/download';

    // isiOS isAndroid implement by yourself
    if (isiOS() || isAndroid()) {
        window.location = 'cutom_scheme://';

        const androidAppStoreLink = 'https://play.google.com/store/apps/details?id=com.test.android';
        const iosAppStoreLink = 'itms-apps://itunes.apple.com/app/my-app/idxxxxxxxx?mt=8';
        fallbackLink = isAndroid() ? androidAppStoreLink : iosAppStoreLink;
        // setTimeout still executes after the app is opened, so the current page will navigate to the fallback link
        // to prevent this, I use the document.hasFocus function to check
        setTimeout(function () {
            // if the app is opened, the document won't be focused
            // so if app is not installed, the document will be focused
            if (document.hasFocus()) {
                window.location = fallbackLink;
            }
        }, 1000);
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment