如何检测我的网站/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 在触发事件方面受到限制：

• 切换：主动→被动，被动→隐藏

• 切换到：隐藏→被动，被动→主动

• 激活应用切换器并返回：无变化

我没有找到任何方法来检测应用程序被强制关闭并重新打开。