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

Question

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

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

谢谢

Answer 1

您可以使用 visibilitychange event listener检测以前在后台的网络应用程序何时在前台:

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

在 this post 中有关于页面生命周期 API 的更多信息，但您应该注意，并非 API 中可用的所有状态都在 Safari 中公开。帖子列表some caveats在编写跨多个浏览器的代码时要注意。