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

• 切换：主动→被动，被动→隐藏
• 切换到：隐藏→被动，被动→主动
• 激活应用程序切换器并返回：没有变化

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