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

我正在使用React构建一个渐进式的web应用程序，其概念是保持计时器运行

在上下文中，该应用程序是为家庭酿酒商提供的，用于跟踪啤酒花和其他添加剂在酿造过程中何时需要添加到煮沸物中。添加的添加剂在煮沸后的一定时间内添加，即剩余20分钟添加1盎司柠檬酒花

我使用JavaScript的

setInterval

来“勾选”计时器，它是驱动应用程序其余部分的

elapsedSeconds

状态属性

我遇到的问题是计时器停止计时。如果我让应用程序运行，屏幕将最终锁定，或者我将切换应用程序等。服务人员将继续运行，计时器将继续滴答作响，持续一小段时间（大约10分钟，从我在测试中可以看出的时间开始）

我的想法是，我将在状态中存储一个纪元时间，它表示计时器启动的时间。这样，当用户“返回”到PWA时，我可以将当前历元时间与存储的

startingEpochTime

进行比较，以获得

elapsedSeconds

。但如果不需要的话，我不想在每一个“滴答”都做这个比较。理想情况下，只有在服务工作者停止处理之后，当用户从其他上下文返回应用程序时，才会运行此比较

---

我要找的是正确的方法。

window.onload

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

以下是一些有帮助的建议：

您所描述的一般解决方案是，这是一个设计和指定的过程，但默认情况下（目前）在任何地方都不可用

---

就目前实现的内容而言，至少有相当可靠的方法可以检测web应用何时进入后台，何时使用事件返回前台。一旦你可靠地检测到自己何时回到前台，评论中提到的将开始时间与当前时间进行比较的技术听起来是正确的。

你不想存储开始时间的原因是什么？与存储开始时间相比，

setInterval

有什么好处？存储开始时间没有问题，我只是不想在不需要的情况下每秒都使用当前时间和开始时间之间的比较。理想情况下，我可以利用

setTimeout

在正常应用程序运行期间处理该问题，然后在应用程序重新打开时使用历元时间比较（如果有意义的话）。几个月前我自己编写了一个计时器（），我提出的最终解决方案是混合一些不同的技巧。我做滴答声，不是一秒钟一次，而是像帧速率一样令人满意。我正在使用

requestAnimationFrame

制作帧。每次我都会计算差异，因为这样更安全

setInterval

没有那么可靠。我确实认为，在你提到的10分钟之后，你的PWA后台的服务人员会偶尔瞥一眼。因此，无论何时调用ticking函数，都可以为完成时间设置一个超时。我没有运气找到一个可靠的解决方案，但我认为这是最安全的。是的，这正是我要说的。对于计时器来说，这确实是一种过度的杀伤力，但是通过这种方式，你可以确保你显示的是正确的时间。