Notification Triggers API

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

Thomas Steiner

什么是通知触发器？

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 开发者工具“通知”面板调试通知。如需开始调试，请按开始记录事件图标 开始记录事件 或 Control+E（在 Mac 上，按 Command+E）。Chrome DevTools 会记录所有通知事件（包括已安排的通知、已显示的通知和已关闭的通知）三天，即使 DevTools 处于关闭状态也是如此。

系统会将安排的通知事件记录到 Chrome DevTools 的“通知”窗格（位于“应用”面板中）。
已安排的通知。
系统会将显示的通知事件记录到 Chrome DevTools 的“通知”窗格中。
显示的通知。

演示

您可以在演示中查看通知触发器的运作方式，通过该触发器，您可以安排通知、列出已安排的通知以及取消通知。您可以在 Glitch 上找到相关源代码。

通知触发器演示 Web 应用的屏幕截图。
“通知触发器”演示。

安全与权限

Chrome 团队使用控制对强大 Web 平台功能的访问权限中定义的核心原则（包括用户控制、透明度和人体工学）设计和实现了 Notification Triggers API。由于此 API 需要使用服务工件，因此还需要安全上下文。使用该 API 需要与常规推送通知相同的权限。

用户控制

此 API 仅在 ServiceWorkerRegistration 上下文中可用。这意味着，所有必需数据都存储在同一上下文中，并会在删除服务工件或用户删除来源的所有网站数据时自动删除。屏蔽 Cookie 还会阻止在 Chrome 中安装服务工作器，从而导致无法使用此 API。用户可以随时在网站设置中为网站停用通知。

透明度

与 Push API 不同，此 API 不依赖于网络，这意味着安排的通知需要事先提供所有必需数据，包括 badge、icon 和 image 属性引用的图片资源。这意味着，开发者无法观察到显示已安排的通知，并且在用户与通知互动之前，系统不会唤醒服务工件。因此，目前没有任何已知的方法可让开发者通过 IP 地址地理位置查找等可能侵犯隐私的方法获取用户的相关信息。这种设计还允许该功能可选择性地利用操作系统提供的调度机制（例如 Android 的 AlarmManager），这有助于延长电池续航时间。

反馈

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

请向我们说明 API 设计

API 是否存在某些方面未按预期运行？或者，您是否缺少实现想法所需的方法或属性？对安全模型有疑问或意见？在 Notification Triggers GitHub 代码库中提交规范问题，或在现有问题中添加您的想法。

实现方面存在问题？

您是否发现了 Chrome 实现中的 bug？或者实现方式是否与规范不同？ 请访问 new.crbug.com 提交 bug。请务必提供尽可能详细的信息、简单的重现说明，并将“组件”设置为 UI>Notifications。Glitch 非常适合快速轻松地分享 bug 重现情况。

打算使用该 API？

计划在您的网站上使用通知触发器？您的公开支持有助于我们确定功能的优先级，并向其他浏览器供应商表明支持这些功能非常重要。使用 #NotificationTriggers 标签向 @ChromiumDev 发推文，告诉我们您在哪里以及如何使用该功能。

实用链接

致谢

通知触发器由 Richard Knoll 实现，该说明文档由 Peter Beverloo 撰写，并由 Richard 提供贡献。以下人员已审核本文：Joe Medley、Pete LePage，以及 Richard 和 Peter。主打图片：Unsplash 上的 Lukas Blazek 提供。