Merge pull request #1 from Kyonru/fix/ux

Improvements
Kyonru · Aug 13, 2022 · 11ef166 · 11ef166
2 parents d7d42d3 + 44bea4e
commit 11ef166
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 10 deletions.
diff --git a/lib/deeplink.js b/lib/deeplink.js
@@ -13,6 +13,7 @@ module.exports = function (options) {
   options.title = options.title || '';
   options.label = options.label || '';
   options.timeout = options.timeout || 250;
+  options.usePathOnFallback = options.usePathOnFallback || false;
 
   const deeplink = function (req, res, next) {
     const opts = {};

diff --git a/lib/public/index.html b/lib/public/index.html
@@ -10,8 +10,16 @@
     <div>
       <h2>{{label}}</h2>
       <div style="justify-content: center">
-        <img src="./images/app_store.svg" height="40" onclick="onClickIOS();" />
         <img
+          style="display: none"
+          id="ios_button"
+          src="./images/app_store.svg"
+          height="40"
+          onclick="onClickIOS();"
+        />
+        <img
+          style="display: none"
+          id="android_button"
           src="./images/play_store.svg"
           height="40"
           onclick="onClickAndroid();"
@@ -30,6 +38,15 @@ <h2>{{label}}</h2>
         label: '{{label}}',
       };
 
+      if (options.ios_store_link) {
+        document.getElementById('ios_button').style.display = 'inline-block';
+      }
+
+      if (options.android_package_name) {
+        document.getElementById('android_button').style.display =
+          'inline-block';
+      }
+
       deepLink(options);
       function onClickIOS() {
         var ios_url = options.ios_store_link;

diff --git a/lib/public/script.js b/lib/public/script.js
@@ -4,10 +4,29 @@ function deepLink(options) {
   var iosStoreLink = options.ios_store_link;
   var androidPackageName = options.android_package_name;
   var timeout = options.timeout || 250;
+  var usePathOnFallback = options.usePathOnFallback || false;
   var playStoreLink =
     'https://play.google.com/store/apps/details?id=' + androidPackageName;
   var ua = window.navigator.userAgent;
 
+  var timeoutId;
+
+  const hiddenProp = () => {
+    const properties = {};
+    if (typeof document.hidden !== 'undefined') {
+      properties.name = 'hidden';
+      properties.event = 'visibilitychange';
+    } else if (typeof document.msHidden !== 'undefined') {
+      properties.name = 'msHidden';
+      properties.event = 'msvisibilitychange';
+    } else if (typeof document.webkitHidden !== 'undefined') {
+      properties.name = 'webkitHidden';
+      properties.event = 'webkitvisibilitychange';
+    }
+
+    return properties;
+  };
+
   // split the first :// from the url string
   var split = url.split(/:\/\/(.+)/);
   var scheme = split[0];
@@ -25,15 +44,20 @@ function deepLink(options) {
       androidPackageName +
       ';end;',
     playStoreLink: playStoreLink,
-    fallback: fallback,
+    fallback: usePathOnFallback ? fallback + '/' + path : fallback,
   };
 
   var isMobile = {
     android: function () {
       return /Android/i.test(ua);
     },
     ios: function () {
-      return /iPhone|iPad|iPod/i.test(ua);
+      const isMobile = /iPhone|iPad|iPod/i.test(ua);
+      const isM1IPad =
+        navigator.maxTouchPoints &&
+        navigator.maxTouchPoints > 2 &&
+        /Macintosh/.test(ua);
+      return isMobile || isM1IPad;
     },
   };
 
@@ -46,10 +70,28 @@ function deepLink(options) {
     window.location = urls.fallback;
   }
 
-  function launchWebkitApproach(url, fallback, time = 250) {
-    document.location = url;
-    setTimeout(function () {
-      document.location = fallback;
+  function handleVisibilityChange() {
+    window.clearTimeout(timeoutId);
+    document.removeEventListener(
+      hiddenProp().event,
+      handleVisibilityChange,
+      false
+    );
+  }
+
+  function launchWebkitApproach(url, fallback, time = 3000) {
+    const hidden = hiddenProp();
+    if (
+      typeof document.addEventListener !== 'undefined' ||
+      hidden.name !== undefined
+    ) {
+      document.addEventListener(hidden.event, handleVisibilityChange, false);
+    }
+
+    document.location.replace(url);
+
+    timeoutId = setTimeout(function () {
+      document.location.replace(fallback);
     }, time);
   }
 
@@ -59,15 +101,15 @@ function deepLink(options) {
     iframe.style.width = '1px';
     iframe.style.height = '1px';
     iframe.onload = function () {
-      document.location = url;
+      document.location.replace(url);
     };
     iframe.src = url;
 
     window.onload = function () {
       document.body.appendChild(iframe);
 
       setTimeout(function () {
-        window.location = fallback;
+        window.location.replace(fallback);
       }, time);
     };
   }
@@ -95,7 +137,7 @@ function deepLink(options) {
 
   function androidLaunch() {
     if (ua.match(/Chrome/)) {
-      document.location = urls.android_intent;
+      document.location.replace(urls.android_intent);
     } else if (ua.match(/Firefox/)) {
       launchWebkitApproach(
         urls.deepLink,