我正在使用 React 构建一个渐进式 Web 应用程序，其概念围绕着保持计时器运行。
对于上下文，该应用程序供家庭酿酒商跟踪何时需要在酿造过程中将啤酒花和其他添加物添加到他们的煮沸中。添加物时剩余一定的煮沸时间，即在剩余 20 分钟时加入 1 盎司 Citra 啤酒花。
我正在使用JavaScript的setInterval来"勾选"计时器，这是一个驱动应用程序其余部分的elapsedSeconds状态属性。
我遇到的问题是计时器停止滴答作响。如果我让应用程序运行，屏幕最终会锁定，或者我会切换应用程序等。服务工作者将继续运行，计时器将继续滴答作响，时间很短(大约 10 分钟，我可以在测试中知道？
我的想法是，我将在状态中存储一个纪元时间，该时间表示计时器启动的时间。这样，当用户"返回"PWA时，我可以将当前纪元时间与存储的startingEpochTime进行比较，以取回elapsedSeconds。但是，如果没有必要，我不想在每个"滴答声"时都进行这种比较。理想情况下，只有在服务工作进程停止处理后，当用户从其他上下文返回到应用程序时，才会运行此比较。
我正在寻找的是执行此操作的正确方法。在这种情况下window.onload行得通吗？如果我将应用程序切换到另一个应用程序 20 分钟，然后切换回我的计时器应用程序，该方法会再次运行吗？寻找这种情况的最佳实践，或任何可能对我有帮助的想法。
截至 2022 年，当 PWA 移动到后台时，无法安排任务或保持计时器运行。
对于所有想要此功能的人，请加星并评论Google问题，要求它激励他们采取行动：https://bugs.chromium.org/p/chromium/issues/detail?id=889077
这里有几个可以提供帮助的指针：
您所描述的一般解决方案是唤醒锁 API，这是设计和指定的过程，但默认情况下(尚(在任何地方都不可用。
就当前实现的内容而言，有一些非常可靠的方法至少可以使用页面生命周期 API 事件检测 Web 应用何时进入后台并返回到前台。一旦你可靠地检测到你何时回到前台，像评论中提到的关于将开始时间与当前时间进行比较的技术听起来是正确的。