在 PWA 中保持计时器运行的最佳实践 [英] Best practice for keeping timer running in PWA

问题描述

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

I am building a progressive web app using React, the concept of which revolves around keeping a timer running.

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

For context, the app is for home-brewers to keep track of when hops and other additions need to be added to their boil during their brew. Additions are added with a certain amount of time remaining in the boil, i.e. 1 oz Citra hops at 20 minutes remaining.

我使用 JavaScript 的 setInterval 来勾选"计时器，这是一个 elapsedSeconds 状态属性，用于驱动应用程序的其余部分.

I'm using JavaScript's setInterval to "tick" the timer, which is an elapsedSeconds state property that drives the rest of the application.

我遇到的问题是计时器何时停止计时.如果我让应用程序运行，屏幕最终会锁定，或者我会切换应用程序等.Service Worker 将继续运行，计时器将继续滴答声，持续很短的时间(从我可以知道的大约 10 分钟)在测试中?)

The problem I'm running into is when the timer stops ticking. If I let the app run, the screen will eventually lock, or I'll switch apps, etc. The service worker will continue running, and the timer will continue to tick, for a short time (about 10 minutes from what I can tell in testing?)

我的想法是我将在 state 中存储一个纪元时间，它代表计时器开始的时间.这样，当用户返回"到 PWA 时，我可以将当​​前纪元时间与存储的 startingEpochTime 进行比较，以返回 elapsedSeconds.但是，如果不需要的话，我不想在每个滴答"处都进行这种比较.理想情况下，这种比较只会在用户从其他上下文返回应用程序时运行，并且服务工作者已经停止处理.

My thought is that I will store an epoch time in state, that represents the time when the timer started. That way, when a user "returns" to the PWA, I can compare the current epoch time against the stored startingEpochTime to get the elapsedSeconds back. But I don't want to do this comparison at every "tick" if I don't have to. Ideally, this comparison would only run when the user is returning to the application from some other context, after the service worker has already stopped processing.

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

What I'm looking for is the correct way to do this. Would window.onload work in this instance? If I switch apps to another app for 20 minutes then switch back to my timer app, is that method run again? Looking for the best practice for this sort of scenario, or any idea that might help me out.

推荐答案

这里有一些可以提供帮助的提示:

Here's a couple of pointers that can help:

您所描述的一般解决方案是唤醒锁 API，这是正在设计和指定的过程，但默认情况下(目前)在任何地方都不可用.

The general solution to what you describe is the Wake Lock API, which is the process of being design and specified, but is not available anywhere by default (yet).

就当前实现的内容而言，至少有一些非常可靠的方法可以使用 页面生命周期 API 事件.一旦您可靠地检测到何时回到前台，就像评论中提到的将开始时间与当前时间进行比较的技术听起来是正确的.

In terms of what's currently implemented, there are pretty reliable ways of at least detecting when your web app goes into the background and goes back into the foreground using the Page Lifecycle API events. Once you're reliably detecting when you've come back to the foreground, a technique like what's mentioned in the comments about comparing the start time to the current time sounds about right.

这篇关于在 PWA 中保持计时器运行的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！