偵測

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

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

您可以使用這項資料進行數據分析，瞭解使用者的偏好設定，並提供客製化體驗。如要擷取這些事件，您可以使用媒體查詢、window 的事件，或是功能 API (請參閱這裡的清單)。

偵測顯示模式

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

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

如果您使用這個範例，請務必配合網頁應用程式資訊清單中的顯示模式，例如 standalone、minimal-ui 或 fullscreen。您也可以使用逗號分隔的條件，在媒體查詢字串中比對多個查詢。

您也可以在資訊清單的 start_url 中加入查詢參數，並透過 Analytics 擷取相關資料，以便追蹤 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 the display mode used in your manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', () => {
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
    });
});

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；而是會透過您在 related_applications 項目中指定的 url 或 id，觸發商店安裝作業。

相關應用程式可能是您的 PWA，並會透過應用程式商店安裝。這項設定的其中一個優點是，目前只有透過應用程式商店安裝的應用程式，才會在備份或切換至新裝置時還原。

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

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

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

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

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

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

BubbleWrap 或 PWA Builder 等工具可讓您將 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：使用智慧型應用程式廣告橫幅宣傳應用程式