探索Page Visibility API以检测页面后台状态

在现代Web开发中，如何检测页面的后台状态是一个重要的课题。本文将通过探索Page Visibility API，分享相关的技术经验和解决方案，帮助开发者更好地应对页面状态管理的挑战。

旧时代的页面状态管理

在早期的Web开发中，开发者通常使用浏览器的 beforeunload 或 unload 事件来处理用户离开页面的场景。这些事件会在页面资源即将卸载或已经卸载时触发，例如从页面A导航到页面B，或关闭当前会话的浏览器选项卡。

虽然这些方法在桌面浏览器中表现尚可，但在移动设备上却显得不够可靠。这主要是因为移动平台的资源管理机制更为复杂，浏览器可能会直接终止页面，而不会触发这些事件。此外，这些事件的使用还可能影响浏览器的性能优化，例如后退/前进缓存（Back/Forward Cache）。

现代移动平台的约束

移动设备的资源限制使得操作系统倾向于主动回收资源，例如在后台关闭应用程序。这种情况下，传统的卸载事件无法满足需求。此外，移动设备的用户交互方式也更加多样化，例如：

• 用户锁定屏幕。
• 按下主屏幕按钮。
• 在应用切换器中切换应用程序。

这些操作可能导致页面进入后台状态，甚至被终止，而无需通知开发者。这些场景下，传统的卸载事件无法捕获状态变化。

新的需求与挑战

随着移动网络的普及，用户对Web应用的期望也在不断提高。这种转变带来了新的技术需求，例如：

• 当用户锁定屏幕时，视频播放器应暂停播放。
• 资源密集型动画应在页面不可见时停止。
• 自动轮播内容应在后台状态下暂停更新。
• 减少或暂停对服务器的轮询请求。

这些需求促使开发者寻找更现代化的解决方案来管理页面状态。

Page Visibility API：现代解决方案

为了应对上述挑战，Page Visibility API 提供了一种编程方式来检测页面的可见性状态。该API引入了一个名为 visibilitychange 的事件和一个 visibilityState 属性。

通过监听 visibilitychange 事件，开发者可以在页面可见性发生变化时收到通知，并通过 document.visibilityState 属性查询当前状态。以下是页面可能处于隐藏状态的典型场景：

• 页面从前台选项卡切换到后台选项卡。
• 浏览器被最小化。
• 用户刷新页面或导航到其他页面。
• 操作系统锁屏。
• 用户切换到其他应用程序。

这些场景都可以通过 visibilitychange 事件进行捕获，从而满足现代Web开发的需求。

实现用例：页面状态管理

在我们的项目中，我们需要在页面进入后台或用户启动导航时执行清理操作。由于使用了React（或Preact）作为视图层框架，我们创建了一个自定义的Hook来实现这一需求。

Safari中的问题与解决方案

在实现过程中，我们发现Safari浏览器未能正确触发页面导航的相关事件。为了解决这一问题，我们结合使用了 visibilitychange 和 pagehide 事件。pagehide 事件会在页面即将被隐藏或终止时触发，从而弥补了Safari的不足。

为了避免在支持 visibilitychange 的浏览器中重复触发事件，我们引入了一个标志位来区分页面状态的变化。这种方法确保了事件处理的高效性和准确性。

深入规范：事件触发顺序

在研究事件触发顺序时，我们发现HTML规范中的描述与实际行为存在差异。根据最新的规范更新，pagehide 事件会在 visibilitychange 事件之前触发。这一发现帮助我们优化了事件处理逻辑，确保了代码的可靠性。

最终实现与优化

综合以上研究，我们提出了一种可靠的实现方案，能够满足大多数用例需求。此外，对于用户切换标签后关闭页面的特殊场景，我们也提供了相应的解决方法。

总结：Page Visibility API 的动态特性

Page Visibility API 是一个强大的工具，但其行为可能因设备、浏览器和操作系统的不同而有所差异。Web开发者需要接受这种动态性，并通过关注规范更新和浏览器问题跟踪器，及时调整实现方案。

通过不断学习和优化，我们可以更好地利用Page Visibility API，为用户提供流畅、高效的Web体验。

编码愉快！

原文链接: https://tech.trivago.com/post/2020-11-17-exploringthepagevisibilityapifordetectin