如何檢測我的網站/PWA 已加載到前台？

Question

我有一個用 React 編寫的 Ipad 的漸進式 Web 應用程序，我想檢測用戶在切換到另一個應用程序后何時重新加載應用程序。 重新加載應用程序時，我可以訂閱瀏覽器事件或服務工作者事件嗎？

沿着類似的線索，有沒有辦法告訴漸進式 web 應用程序已被強制關閉並重新打開？

謝謝

Answer 1

您可以使用visibilitychange事件偵聽器來檢測以前在后台的 web 應用程序現在何時在前台：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // Your code here...
  }
});

在這篇文章中有更多關於頁面生命周期 API 的信息，但您應該注意，並非 API 中可用的所有狀態都在 Safari 中公開。 這篇文章列出了在編寫跨多個瀏覽器工作的代碼時需要注意的一些警告。

Answer 2

您可以使用GoogleChromeLabs/page-lifecycle庫作為訂閱頁面生命周期事件的跨瀏覽器方法。

import lifecycle from 'page-lifecycle'

lifecycle.addEventListener('statechange', ({ oldState, newState }) => {
  console.log(`${oldState} -> ${newState}`)
})

在我的測試中，iOS PWA 在觸發事件時受到限制：

• 切換：主動→被動，被動→隱藏
• 切換到：隱藏→被動，被動→主動
• 激活應用程序切換器並返回：沒有變化

我沒有找到任何方法來檢測該應用程序被強制關閉並重新打開。