fix: open and download (#529)

* fix: open and download * fix: remove listener * fix: mobile event * fix: mobile download * fix: remove * fix: replace click * fix: adjust code order * fix: open type * fix: open link * fix: open link * fix: open link * fix: open link * fix: open link * fix: open link * fix: open link * fix: open link * fix: open link * fix: open link * fix: open link
2024-05-08 11:03:23 +08:00 · 2024-05-08 11:03:23 +08:00 · 1eb29cd614
parent 3508262d1d
commit 1eb29cd614
1 changed files with 105 additions and 14 deletions
--- a/admin_frontend/templates/pages/open_appflowy_or_download.html
+++ b/admin_frontend/templates/pages/open_appflowy_or_download.html
@ -6,29 +6,120 @@
  </head>
  <body>
    <script>
-      document.addEventListener("DOMContentLoaded", function() {
-        var fallbackLink = 'https://appflowy.io/download/'+window.location.search+window.location.hash;
+      const getDeviceType = () => {
+        const ua = navigator.userAgent;

-        // Mobile
-        const isiOS = navigator.userAgent.match(/iPad|iPhone|iPod/);
-        const isAndroid = navigator.userAgent.match(/Android/);
+        if (/(iPad|iPhone|iPod)/g.test(ua)) {
+          return 'iOS';
+        } else if (/Android/g.test(ua)) {
+          return 'Android';
+        } else {
+          return 'Desktop';
+        }
+      };
+      const deviceType = getDeviceType();
+      const isMobile = deviceType !== 'Desktop';
+      const getFallbackLink = () => {

-        if (isiOS) {
-          fallbackLink = 'https://testflight.apple.com/join/6CexvkDz';
-        } else if (isAndroid) {
-          fallbackLink = 'https://play.google.com/store/apps/details?id=io.appflowy.appflowy';
+        if (deviceType === 'iOS') {
+          return 'https://testflight.apple.com/join/6CexvkDz';
+        } else if (deviceType === 'Android') {
+          return 'https://play.google.com/store/apps/details?id=io.appflowy.appflowy';
+        } else {
+          return 'https://appflowy.io/download/#pop';
+        }
+      };
+
+      const getDuration = () => {
+        switch (deviceType) {
+          case 'iOS':
+            return 250;
+          default:
+            return 1500;
+        }
+      }
+
+      const APPFLOWY_SCHEME = 'appflowy-flutter://';
+
+      const iframe = document.createElement('iframe');
+      iframe.style.display = 'none'
+      iframe.src = APPFLOWY_SCHEME;
+
+      const openSchema = () => {
+        if (isMobile) return window.location.href = APPFLOWY_SCHEME;
+        document.body.appendChild(iframe);
+        setTimeout(() => {
+          document.body.removeChild(iframe);
+        }, 1000);
+      };
+
+      const openAppFlowy = (force) => {
+        openSchema();
+
+        if (force) return;
+
+        const initialTime = new Date();
+        let interactTime = initialTime;
+        let waitTime = 0;
+        const duration = getDuration();
+
+        const updateInteractTime = () => {
+          interactTime = new Date();
+        };
+
+        document.removeEventListener('mousemove', updateInteractTime);
+        document.removeEventListener('mouseenter', updateInteractTime);
+
+        const checkOpen = setInterval(() => {
+          waitTime = new Date() - initialTime;
+
+          if (waitTime > duration) {
+            clearInterval(checkOpen);
+            if (isMobile || new Date() - interactTime < duration) {
+              document.getElementById('download-link').click();
+            }
+          }
+        }, 20);
+
+        if (!isMobile) {
+          document.addEventListener('mouseenter', updateInteractTime);
+          document.addEventListener('mousemove', updateInteractTime);
        }

-        // Attempt to redirect
-        window.location = 'appflowy-flutter://'+window.location.search+window.location.hash;
+        document.addEventListener('visibilitychange', () => {
+          const isHidden = document.hidden;
+          if (isHidden) {
+            clearInterval(checkOpen);
+          }
+        });
+
+        window.onpagehide = () => {
+          clearInterval(checkOpen);
+        };
+
+        window.onbeforeunload = () => {
+          clearInterval(checkOpen);
+        };
+
+      };
+      document.addEventListener("DOMContentLoaded", function() {
+        document.getElementById('open-appflowy').addEventListener('click', (e) => {
+          e.preventDefault();
+          openAppFlowy(true);
+        });
+
+        document.getElementById('download-link').addEventListener('click', (e) => {
+          e.preventDefault();
+          window.open(getFallbackLink(), '_current');
+        });
+
+        openAppFlowy();

-        // Update the fallback download link
-        document.getElementById('download-link').href = fallbackLink;
      });
    </script>

    <h1>Opening AppFlowy</h1>
-    <p>If AppFlowy does not open, you can click <a href="appflowy-flutter://">here</a> to launch the app.</p>
+    <p>If AppFlowy does not open, you can click <a id="open-appflowy" href="#">here</a> to launch the app.</p>
    <p>If AppFlowy is not installed, you can <a id="download-link" href="#">download AppFlowy manually</a>.</p>
  </body>
 </html>