已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問如何檢測我的網站/PWA 已加載到前臺？

JavaScript

鳳凰求蠱 2021-11-12 14:12:11

我有一個用 React 編寫的用于 Ipad 的漸進式 Web 應用程序，我想檢測用戶在切換到另一個應用程序后何時重新加載該應用程序。重新加載應用程序時，是否有我可以訂閱的瀏覽器事件或服務工作者事件？沿著類似的線索，有沒有辦法告訴漸進式 Web 應用程序已被強制關閉并重新打開？謝謝

查看完整描述

2 回答

呼如林

TA貢獻1798條經驗獲得超3個贊

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

document.addEventListener('visibilitychange', function() {

if (document.visibilityState === 'visible') {

// Your code here...

}

});

這篇博文中有更多關于頁面生命周期 API 的信息，但您應該注意，并非 API 中的所有可用狀態都在 Safari 中公開。該帖子列出了在編寫可跨多個瀏覽器運行的代碼時需要注意的一些注意事項。

反對回復 2021-11-12

慕森卡

TA貢獻1806條經驗獲得超8個贊

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

import lifecycle from 'page-lifecycle'

lifecycle.addEventListener('statechange', ({ oldState, newState }) => {

console.log(`${oldState} -> ${newState}`)

})

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

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

反對回復 2021-11-12

關注

舉報

0/150

提交

取消