防止浏览器进程在移动设备上被关闭

Question

我正在尝试构建一个计时器 PWA（主要用于移动设备），它会在一定时间过去时通知用户。 （用户会知道这一点并希望它发生 - 因此请求许可不会成为问题。）

只要用户实际停留在页面上，保持浏览器打开并且不锁定屏幕，此方法就可以正常工作。

使用Wakelock API，我可以防止屏幕自行锁定——如果我们使用的是支持该功能的设备和浏览器。 （可悲的是，many don't。） NoSleep.js library 通过播放用户看不到的视频来增加对更多设备的支持。 就是这样。

但是，如果用户主动启用锁屏（很多人会本能地这样做，例如，将手机放入口袋时），则 iOS 或 Android 会在一段时间后暂停该过程。 这意味着，通知将延迟到用户再次打开浏览器。 这可能要晚得多，从而破坏了这个应用程序的全部目的。

如果我正在开发本机应用程序，我可以在 iOS 上使用匹配的 UIBackgroundMode 或 Background Fetch 或在 Android 上使用 WorkManager。 但是，将其构建为原生应用程序不会具有 PWA 的优势，例如无需安装或我们可以随意更新应用程序。

据我了解，许多（全部？）浏览器制造商似乎不希望网站能够在后台运行。 尽管如此，有没有办法构建这种 PWA？ 还是我必须切换到构建本机应用程序？ （如dontkillmyapp.com 等页面上所解释的那样，它可能仍然与操作系统抗争。）

Answer 1

您可以使用Notification Triggers 完成此操作。它们目前仅在 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)
  });
};