davidwkeith · November 7, 2024 19:03 · Oct 24, 2019 · Oct 24, 2019 · Oct 17, 2016 · Oct 24, 2013
diff --git a/index.html b/index.html
@@ -5,7 +5,19 @@
   <title>App Redirection</title>
 </head>
 <body>
+  <!--
+      NOTE: This was a great hack in days gone by, but now both Apple and Google have improved their support for custom
+      protocol handlers.
 
+      # References
+
+      * Handle Open URL: http://handleopenurl.com/
+      * iOS Smart App Banners: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
+      * Android Intents: https://developer.android.com/reference/android/content/Intent.html
+      * On the desktop you still need to make a custom plugin to do the right thing, or save some sort of user prefernce.
+  -->
+
+
   <!-- iframe used for attempting to load a custom protocol -->
   <iframe style="display:none" height="0" width="0" id="loader"></iframe>
 

diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
 
     // Simple device detection
-    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone'),
+    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'),
         isAndroid = navigator.userAgent.match('Android');
 
     // Mobile

diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@
     }
 
     // Now we just wait for everything to execute, if the user is redirected to your custom app
-    // the timeout below eill never fire, if a custom app is not present (or the user is on the Desktop)
+    // 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);
 

diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!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'),
+        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 eill 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>