此页面由 Cloud Translation API 翻译。

Notification Triggers API

通过通知触发器，您可以安排不需要网络连接的本地通知，因此非常适合日历应用等用例。

Thomas Steiner

Twitter GitHub Glitch Mastodon 首页

什么是通知触发器？

Web 开发者可以使用 Web Notifications API 显示通知。此功能通常与 Push API 结合使用，用于告知用户紧急信息，例如重大新闻事件或收到的消息。通过在用户设备上运行 JavaScript 来显示通知。

Push API 的问题是，它对于触发通知在满足特定条件（例如时间或位置）时并不可靠。例如，基于时间的条件是日历通知，它提醒您在下午 2 点与老板召开了重要会议。例如，当您进入杂货店附近时，通知就属于基于位置的条件。网络连接或低电耗模式等省电功能可能会延迟推送基于推送的通知。

通知触发器可以解决此问题，它允许您提前安排具有触发条件的通知，这样一来，即使没有网络连接或设备处于省电模式，操作系统也会在适当的时间发送通知。

用例

日历应用可以使用基于时间的通知触发器来提醒用户即将召开的会议。日历应用的默认通知方案可能是，在会议开始前一小时显示第一条浮动通知，然后在会议前五分钟再显示一条更紧急的通知。

电视网络可能会提醒用户他们喜欢的电视节目即将开始，或会议直播即将开始。

时区转换网站可以使用基于时间的通知触发器，让用户安排电话会议或视频通话的闹钟。

当前状态

步骤	状态
1. 创建铺垫消息	完成
2. 创建规范的初始草稿	尚未开始
3. 收集反馈并对设计进行迭代改进。	进行中
4. 源试用	全面完整
5. 发布	尚未开始

如何使用通知触发器

通过 about://flags 启用

如需在没有源试用令牌的情况下在本地试验 Notification Triggers API，请在 about://flags 中启用 #enable-experimental-web-platform-features 标志。

功能检测

您可以通过检查是否存在 showTrigger 属性来了解浏览器是否支持通知触发器：

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

安排通知

安排通知与显示常规推送通知类似，只不过您需要将一个 showTrigger 条件属性并将 TimestampTrigger 对象作为值传递给通知的 options 对象。

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

取消定时通知

如需取消定时通知，请先通过 ServiceWorkerRegistration.getNotifications() 请求与特定标记匹配的所有通知的列表。请注意，您需要传递 includeTriggered 标志，以便将定期通知包含在列表中：

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

调试

您可以使用 Chrome 开发者工具的“Notifications”面板调试通知。若要开始调试，请按 Start recording events 图标或 Ctrl+E（在 Mac 上，按 Command+E）。即使开发者工具关闭，Chrome 开发者工具也会记录三天的所有通知事件，包括预定通知、显示通知和关闭通知。

计划通知事件会记录到 Chrome 开发者工具的“Notifications”窗格（位于“Application”面板中）。 — 预定通知。

显示的通知事件记录到 Chrome 开发者工具的“Notifications”窗格中。 — 显示的通知。

演示

您可以在演示中查看通知触发器的实际运用，借助该演示，您可以调度通知、列出安排的通知以及取消通知。Glitch 提供了源代码。

安全与权限

Chrome 团队根据控制对强大网络平台功能的访问权限中定义的核心原则设计和实现了 Notification Triggers API，其中包括用户控制、透明度和工效学设计。由于此 API 需要 Service Worker，因此还需要一个安全的上下文。使用该 API 需要的权限与常规推送通知相同。

用户控制

此 API 仅适用于 ServiceWorkerRegistration 的上下文。这意味着所有必需的数据存储在同一上下文中，并在删除 Service Worker 或用户删除源的所有网站数据时自动删除。阻止 Cookie 还可以阻止 Service Worker 安装在 Chrome 中，从而阻止使用此 API。用户可以随时在网站设置中为网站停用通知。

透明度

与 Push API 不同，此 API 不依赖于网络，这意味着预定通知事先需要所有必需的数据，包括 badge、icon 和 image 属性引用的图片资源。这意味着，开发者无法观察是否显示定时通知，并且在用户与通知互动之前不涉及唤醒 Service Worker。因此，目前没有已知的方法开发者可以通过 IP 地址地理定位查询等可能侵犯隐私的方法获取有关用户的信息。这种设计还允许该功能有选择地利用操作系统提供的调度机制（例如 Android 的 AlarmManager），这有助于节省电池电量。

反馈

Chrome 团队希望了解您使用通知触发器的体验。

告诉我们 API 设计

API 是否存在无法正常运行的情况？或者，是否缺少实现您的想法所需的方法或属性？对安全模型有疑问或意见？在 Notification Triggers GitHub 代码库上提交规范问题，或将您的想法添加到现有问题中。

实施时遇到了问题？

您是否发现了 Chrome 实现方面的错误？或者，实现方式是否与规范不同？在 new.crbug.com 上提交 bug。请务必提供尽可能多的详情和有关重现问题的简单说明，并将组件设置为 UI>Notifications。Glitch 非常适合用于快速轻松地重现错误。

打算使用此 API？

打算在您的网站上使用通知触发器？您的公开支持有助于我们确定各项功能的优先级，并向其他浏览器供应商说明支持这些功能的重要性。请使用 # 标签 #NotificationTriggers 向 @ChromiumDev 发送 Twitter 微博，并告知我们您在哪里以及如何使用该标签。

实用链接

致谢

通知触发器由 Richard Knoll 和 Peter Beverloo 根据 Richard 的贡献而编写的解释器实现。以下人员审核了这篇文章：Joe Medley、Pete LePage 以及 Richard 和 Peter。主打图片：Lukas Blazek 在 Unsplash 发布。