-
-
Save mcxiaoke/c2dd7d24c31c5bd2d724 to your computer and use it in GitHub Desktop.
| <!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> |
thanks you.
Verify Github on Galxe. gid:uta2Ny9c3MgMtXzRQrTFYM
Thank you
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);
}
}
@ccaa7530 in chrome on android this shows a bar popup that asks if continue to [App Name]?.
it seems that it is not detected as lost focus, and after 1 second if the user didn't click, it loads the app store.
is there a solution?
@nitzan-blink Hello, did you find solution?
@nitzan-blink Hello, did you find solution?
no. it is impossible to do a good customer experience using such detections.
ultimately, companies like branch.io and appsflyer can give a better experience (they integrate listeners into your app, and know (using proprietary) fingerprints which users installed and uninstalled your app).
I went with a commercial solution
Thanks
thanks