您可以偵測使用者是否是透過瀏覽器或獨立模式使用 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 的使用時間、方式和程度。
應用程式安裝
當使用者在瀏覽器中接受安裝提示時，appinstalled 事件會在以 Chromium 為基礎的瀏覽器中觸發。這個事件處理常式很適合用來移除你新增的所有應用程式內安裝促銷活動。
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 例項都會有不同的工作階段。
相關應用程式
網站會透過資訊清單指出與應用程式的關係。方法是使用網頁應用程式資訊清單規格的 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 中應用程式的智慧型應用程式橫幅廣告。因此，如果您想宣傳 PWA 或其他在 App Store 中發布的應用程式，您可以在 PWA 的 HTML 中加入中繼標記，邀請使用者安裝應用程式 (請參閱剛才提供的連結)，或轉移已安裝的導覽功能。
偵測相關已安裝的應用程式
透過 getInstalledRelatedApps() 方法，您的網站可檢查使用者的裝置是否已安裝 iOS/Android/電腦版應用程式或 PWA。
檢查是否已安裝相關應用程式，即可協助您實作特定功能，例如隱藏自訂安裝的提示，或將使用者直接重新導向至已安裝的應用程式，而非前往一般用途網站。如要使用 getInstalledRelatedApps() 方法，已安裝的應用程式和網站都必須設定各自的連線。每個應用程式 (視平台而定) 都會提供用來識別網站的中繼資料，而網站則在資訊清單的 related_applications 欄位中包含預期安裝的應用程式。
您可以利用 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 檔案，並將權限授予其他範圍，詳情請參閱這篇文章。