如何检测我的网站/PWA 已加载到前台？

Question

我有一个用 React 编写的用于 Ipad 的渐进式 Web 应用程序，我想检测用户在切换到另一个应用程序后何时重新加载该应用程序。重新加载应用程序时，是否有我可以订阅的浏览器事件或服务工作者事件？

沿着类似的线索，有没有办法告诉渐进式 Web 应用程序已被强制关闭并重新打开？

谢谢

Answer 1

您可以使用visibilitychange事件侦听器来检测以前处于后台的 Web 应用程序现在何时处于前台：

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

这篇博文中有更多关于页面生命周期 API 的信息，但您应该注意，并非 API 中的所有可用状态都在 Safari 中公开。该帖子列出了在编写可跨多个浏览器运行的代码时需要注意的一些注意事项。