Я создаю прогрессивное веб-приложение с использованием React, концепция которого вращается вокруг поддержания таймера в рабочем состоянии.
Для контекста, приложение предназначено для домашних пивоваров, чтобы отслеживать, когда хмель и другие добавки необходимо добавлять в варку во время варки. Дополнения добавляются с определенным количеством времени, оставшегося в кипении, то есть 1 унция хмеля Citra за 20 минут до конца.
Я использую JavaScript setInterval, чтобы «отметить» таймер, которыйelapsedSeconds свойство состояния, которое управляет остальной частью приложения.
Проблема, с которой я сталкиваюсь, заключается в том, что таймер перестает тикать. Если я разрешу запускать приложение, экран в конечном итоге заблокируется, или я переключу приложения и т. Д. Работник службы продолжит работу, и таймер продолжит работать в течение короткого времени (около 10 минут, как я могу сказать)в тестировании?)
Я думаю, что я буду хранить время эпохи в состоянии, которое представляет время, когда таймер запустился. Таким образом, когда пользователь «возвращается» в PWA, я могу сравнить текущее время эпохи с сохраненным startingEpochTime, чтобы получить обратно elapsedSeconds. Но я не хочу делать это сравнение на каждом «тике», если мне не нужно. В идеале это сравнение должно выполняться только тогда, когда пользователь возвращается в приложение из какого-то другого контекста, после того, как работник сервиса уже прекратил обработку.
Мне нужен правильный способ сделать это. Будет ли window.onload работать в этом случае? Если я переключаю приложения на другое приложение в течение 20 минут, а затем снова переключаюсь на приложение таймера, этот метод запускается снова? В поисках лучшей практики для такого сценария или любой идеи, которая может мне помочь.