偵測

您可以偵測使用者是否在瀏覽器或獨立模式下使用 PWA。在以 Chromium 為基礎的瀏覽器 (Android 和電腦版) 上，你也可以偵測下列事件：

• 安裝邀請對話方塊狀態和結果。
• 安裝完成。
• 從瀏覽器切換到 PWA 視窗，反之亦然。
• PWA 安裝狀態：
• 從應用程式商店安裝的相關應用程式。

您可以根據這些資料進行分析、瞭解使用者的偏好並自訂使用體驗。如要擷取這些事件，您可以使用各種工具，例如媒體查詢、window 的事件，或使用此處列出的功能 API。

正在偵測顯示模式

如要追蹤使用者啟動 PWA 的方式，您可以使用 matchMedia() 測試 display-mode 媒體查詢。

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

如果您使用這個範例，請記得與網頁應用程式資訊清單的顯示模式相符，例如 standalone、minimal-ui 或 fullscreen。您也可以以半形逗號分隔條件，比對媒體查詢字串中的多項查詢。

您也可以在資訊清單的 start_url 中加入查詢參數，透過數據分析追蹤相關統計資料，瞭解 PWA 的使用時間、方式和使用方式。

應用程式安裝

當使用者在瀏覽器中接受安裝提示時，以 Chromium 為基礎的瀏覽器會觸發 appinstalled 事件。這個事件處理常式的一個好處，就是能移除您新增的所有應用程式內安裝促銷活動。

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

請注意，在採用 WebAPK 的 Android 裝置上，當使用者接受對話方塊時會觸發事件；在擷取及安裝 WebAPK 後則不會觸發事件。應用程式可能需要幾秒鐘才會安裝完成。

安裝提示章節說明如何偵測是否有可用的安裝提示，以及使用者選擇的選擇。

工作階段轉移

使用者可以透過瀏覽器和安裝獨立格式使用 PWA。您可以在電腦版瀏覽器中使用標記或選單項目來轉移目前的瀏覽方式，如下圖所示。

在 Android 中，瀏覽器會顯示一個類似電腦版選單項目，選單項目會將導覽轉移至應用程式。在這種情況下，系統會開啟目前的網址，但會在應用程式中以新方式瀏覽網頁。

下圖顯示 Android 中已安裝應用程式的選單項目。

安裝後轉移

如果是電腦瀏覽器，目前的瀏覽方式會在安裝時立即轉移至應用程式。瀏覽器的分頁已關閉，並且開啟新安裝的應用程式，繼續使用者進行的活動。

在行動瀏覽器中，當您安裝應用程式時，瀏覽器會保留目前的導覽。如果使用者想移至應用程式，就必須手動開啟該應用程式，並取得新的瀏覽方式。

偵測轉乘

如要偵測瀏覽器與視窗之間的傳輸，可以使用媒體查詢：

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

iOS 和 iPadOS 儲存空間隔離

在 iOS 和 iPadOS 上，瀏覽器與安裝的圖示之間無法進行瀏覽或網址轉移。即使是同一個 PWA，使用者安裝的每個 PWA 圖示都會都有專屬的儲存空間，而且能夠與 Safari 的分頁和其他圖示隔離。 使用者開啟已安裝的圖示後，Safari 就不會共用儲存空間。如果 PWA 需要登入，使用者就必須重新登入。如果應用程式多次新增至主畫面數次，每個 PWA 執行個體都會擁有不同的工作階段。

相關應用程式

網站會透過資訊清單表明與應用程式的關係。如要這麼做，請使用 Web App 資訊清單規格中的 related_applications 成員。 related_applications 鍵是物件陣列，用於代表各個相關應用程式。每個項目都包含 platform、url 和選用的 id。

以下是可能的平台值：

• chrome_web_store：Google Chrome 線上應用程式商店。
• play：Google Play 應用程式 (Android 和 ChromeOS)。
• chromeos_play：ChromeOS Play。
• webapp：網頁應用程式。
• windows：Microsoft Store (Windows 10 和 11)。
• f-droid：F-droid。
• amazon：Amazon AppStore (FireOS)。

優先使用相關應用程式

當使用者安裝應用程式時，如果您在資訊清單中將 prefer_related_applications 欄位設為 true，您可以將他們重新導向至相關的應用程式。如果採用這項設定，在相容的瀏覽器中安裝 PWA 時，將不會安裝 PWA；而是從 related_applications 項目中指定的 url 或 id 觸發商店安裝作業。

相關的應用程式可以是 PWA，且會透過應用程式商店安裝。這項設定的優點之一在於，目前只有透過應用程式商店安裝的應用程式可以在你改用新裝置時透過備份復原。

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Apple 智慧型應用程式橫幅廣告

Safari 不支援 related_applications 成員，但可為 App Store 中的應用程式提供智慧型應用程式橫幅廣告。因此，如果您想宣傳 PWA 或其他已在 App Store 發布的應用程式，可以在 PWA 的 HTML 中加入中繼標記，藉此邀請使用者安裝應用程式 (請查看剛才提供的連結)；如果已安裝該應用程式，也可以轉移導覽功能。

偵測相關的已安裝應用程式

getInstalledRelatedApps() 方法可讓網站檢查使用者的裝置是否已安裝您的 iOS/Android/電腦版應用程式或 PWA。

檢查是否已安裝相關應用程式有助於實作功能，例如隱藏自訂安裝提示，或將使用者直接重新導向至安裝版應用程式，而非前往一般用途網站。 如要使用 getInstalledRelatedApps() 方法，已安裝的應用程式和網站都必須設定彼此的連線。每個應用程式 (視其平台而定) 都會在資訊清單的 related_applications 欄位中，提供用於辨識網站的中繼資料，也會在應用程式的 related_applications 欄位中列出預計安裝的應用程式。

可讓您將 PWA 發布到應用程式商店的 BubbleWrap 或 PWA 建構工具 (PWA)，已經新增必要中繼資料，讓網站能夠立即使用 getInstalledRelatedApps()。 如要偵測是否已透過 getInstalledRelatedApps() 安裝 PWA，請在資訊清單 related_applications 欄位中使用資訊清單的網址定義 webapp：

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps() 會傳回應用程式物件的陣列。如果陣列空白，則不會安裝相關應用程式。

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

偵測 PWA 範圍以外的安裝作業

從 Android 89 版 Chrome 開始，你可以偵測是否已安裝 PWA，即使不在 PWA 範圍內也沒問題。您的 PWA 必須在 /.well-known/ 資料夾中設定 JSON 檔案，授予其他範圍的權限，如本文所述。

資源

• 您的應用程式是否已安裝？getInstalledRelatedApps() 會告訴您！
• MDN：相關應用程式
• MDN：AppInstalled 事件
• Apple：運用智慧型應用程式橫幅廣告宣傳應用程式