在 PWA 中保持计时器运行的最佳实践

Question

我正在使用 React 构建一个渐进式 Web 应用程序，其概念围绕着保持计时器运行。

就上下文而言，该应用程序可供家庭酿酒师跟踪酿造过程中何时需要添加啤酒花和其他添加物。在煮沸剩余一定时间时添加添加物，即在剩余 20 分钟时添加 1 盎司 Citra 啤酒花。

我使用 JavaScriptsetInterval来“勾选”计时器，这是elapsedSeconds驱动应用程序其余部分的状态属性。

我遇到的问题是计时器停止计时。如果我让应用程序运行，屏幕最终将锁定，或者我将切换应用程序等。服务工作人员将继续运行，并且计时器将继续滴答作响，时间很短（据我所知大约 10 分钟）测试中？）

我的想法是，我将在状态中存储一个纪元时间，它代表计时器启动的时间。这样，当用户“返回”PWA 时，我可以将当​​前纪元时间与存储的时间进行比较startingEpochTime以获取elapsedSeconds返回值。但如果不需要的话，我不想在每次“滴答”时都进行这种比较。理想情况下，只有当用户从其他上下文返回应用程序且 Service Worker 已经停止处理时，才会运行此比较。

我正在寻找的是执行此操作的正确方法。window.onload在这种情况下会起作用吗？如果我将应用程序切换到另一个应用程序 20 分钟，然后切换回我的计时器应用程序，该方法是否会再次运行？寻找这种情况的最佳实践，或者任何可能对我有帮助的想法。

Answer 1

以下是一些可以提供帮助的提示：

您所描述的通用解决方案是Wake Lock API，这是设计和指定的过程，但默认情况下（尚）在任何地方都不可用。

就当前实现的内容而言，有相当可靠的方法至少可以使用页面生命周期 API事件检测 Web 应用程序何时进入后台并返回前台。一旦您可靠地检测到您何时返回前台，像评论中提到的有关将开始时间与当前时间进行比较的技术听起来就很正确。