我想跟教練說: 網頁開啟 App 其實很麻煩

2024 iThome 鐵人賽

DAY 16

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 16 篇

16th鐵人賽

YUAN

2024-09-13 21:42:29

962 瀏覽

分享至

前言

不知道讀者們有沒有需要在網頁開啟自家App的需求
如果是自己開發的App問題應該不大，ios 以及 android 都設定一樣的開啟連結即可
開啟連結有個專有名詞叫做 URL Schemes

如果希望在line分享連結的話，建議是跳去瀏覽器開比較容易成功
引導頁.html?openExternalBrowser=1
=> 在引導頁做個按鈕來開啟自家App

還有另一種方式是透過Firebase跳轉
ex: https://maps.app.goo.gl

為什麼開頭會說網頁開啟 App 其實很麻煩?
因為隨著軟體不斷改版,作業系統不斷更新，連結不一定都可以一直使用
以前可以使用youtube://開啟YT但是現在不行了

不同作業系統URL Schemes也可能不同，看各廠商自己定義

成果

這邊放上做出來的demo

      data-url="comgooglemaps://"
      data-name="Google Maps"
      data-website="http://maps.google.com/maps"

重點1: 透過button上的參數控制開啟的連結
重點2: 透過昨天學的visibilitychange判斷網頁是否跳轉成功

程式碼

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打開 App</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      button {
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
        margin-bottom: 20px;
      }
      #message {
        text-align: center;
        display: none;
      }
    </style>
  </head>
  <body>
    <h3>試著用不同的手機瀏覽點按鈕，嘗試開啟App</h3>
    <button
      id="openYouTubeApp1"
      data-url="youtube://"
      data-name="YouTube"
      data-website="https://www.youtube.com/"
    >
      打開 youtube://📱 https://www.youtube.com/
    </button>
    <button
      id="openGoogleMapApp1"
      data-url="comgooglemaps://"
      data-name="Google Maps"
      data-website="http://maps.google.com/maps"
    >
      打開 comgooglemaps://📱 http://maps.google.com/maps
    </button>
    <button
      id="openIgApp1"
      data-url="instagram://app"
      data-name="instagram"
      data-website="https://www.instagram.com/"
    >
      打開 instagram://app📱 https://www.instagram.com/
    </button>
    <div id="message"></div>

    <script>
      const messageElement = document.getElementById("message");

      const main = (e) => {
        const appUrl = e.target.dataset.url;
        const appName = e.target.dataset.name;
        const appWebsite = e.target.dataset.website;
        let appOpenedSuccessfully = false;

        // 添加一個事件監聽器來檢測頁面是否變為不可見（表示應用程序已打開）
        document.addEventListener("visibilitychange", () => {
          if (document.hidden) {
            appOpenedSuccessfully = true;
            showMessage(`${appName} 應用程序已成功打開！`);
          }
        });

        // openYouTube
        try {
          showMessage(`嘗試打開 ${appName} App ...`);
          jump(appUrl);

          // 2秒後檢查
          setTimeout(() => {
            if (!appOpenedSuccessfully) {
              showMessage(`無法打開 ${appName} App 3秒後跳轉...`, true);
              setTimeout(() => jump(appWebsite), 3000);
            }
          }, 2000);
        } catch (error) {
          console.error("發生錯誤:", error);
          showMessage(`嘗試打開 ${appName} 時發生錯誤`, true);
        }
      };

      openYouTubeApp1.addEventListener("click", main);
      openGoogleMapApp1.addEventListener("click", main);
      openIgApp1.addEventListener("click", main);

      function showMessage(text, isError = false) {
        messageElement.textContent = text;
        messageElement.style.color = isError ? "red" : "green";
        messageElement.style.display = "block";
      }

      function jump(url) {
        window.location.href = url;
      }
    </script>
  </body>
</html>