Блог

Я пытаюсь создать таймер PWA (в основном для мобильных устройств), который уведомляет пользователя по истечении определенного времени. (Пользователи будут знать об этом и захотят, чтобы это произошло, так что запрос разрешения не будет проблемой.)

Это работает нормально до тех пор, пока пользователи фактически остаются на странице, сохраняют браузер открытым и не блокируют экран.

С помощью API Wakelock я могу предотвратить блокировку экрана — если мы находимся на устройстве и в браузере, который это поддерживает. (К сожалению, многие этого не делают.) В NoSleep.js библиотека добавляет поддержку для большего количества устройств, воспроизводя видео, которое пользователь не видит. Так что это уже кое-что.

Однако, если пользователь активно включает экран блокировки (что многие делают инстинктивно, когда, скажем, кладут свои телефоны в карманы), процесс будет приостановлен iOS или Android через некоторое время. Это означает, что уведомление будет отложено до тех пор, пока пользователь снова не откроет браузер. Это может произойти гораздо позже, что сведет на нет всю цель этого приложения.

Если бы я разрабатывал собственное приложение, я мог бы использовать что-то вроде соответствующего UIBackgroundMode или фоновой выборки на iOS или WorkManager на Android. Однако создание этого как собственного приложения не будет иметь преимуществ PWA, таких как то, что установка не требуется или что мы можем обновлять приложение по желанию.

Насколько я понимаю, многие (все?) Производители браузеров, похоже, не хотят, чтобы веб-сайты могли работать в фоновом режиме. Тем не менее, есть ли способ создать такой PWA? Или мне придется переключиться на создание собственного приложения? (Который все еще может бороться с операционной системой, как описано на таких страницах, как dontkillmyapp.com .)

Вы могли бы сделать это с помощью триггеров уведомлений. В настоящее время они доступны только в качестве пробной версии origin в Chrome, но это один из основных вариантов использования, для которого они были разработаны.

С помощью триггеров уведомлений вы можете установить определенное время для срабатывания уведомления, например, окончания вашего таймера. Затем он разбудит работника службы и позволит вам показать уведомление пользователю.

Например:

 const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: "The 30 second timer is up!",
    showTrigger: new TimestampTrigger(timestamp   30 * 1000)
  });
};