Notification Triggers API

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

Thomas Steiner

警告：Notification Triggers API 是 Google 功能项目的一部分，我们已停止开发它。各种操作系统的通知模式发展得非常快，目前还不清楚我们能否跨平台提供可靠、一致且可靠的体验。

为了提供良好的体验，需要有一种机制，能够在不依赖于标签页处于打开状态的情况下，修剪过时或已失效的定时通知（例如已取消的日历活动）。我们收到反馈，使用“定期后台同步”的频率并不足以实现这一目的，并且由于需要显示通知，Push API 也不是一个好的解决方案。

什么是通知触发器？

Web 开发者可以使用 Web Notifications API 显示通知。此功能通常与 Push API 搭配使用，以向用户告知具有时效性的信息，例如最新资讯或收到的消息。通过在用户设备上运行 JavaScript 显示通知。

Push API 的问题在于，它无法可靠地触发在满足特定条件（例如时间或位置）时必须显示的通知。基于时间的条件示例：日历通知提醒您下午 2 点有与老板的重要会议。基于位置的条件示例：当您进入超市附近时，系统会提醒您购买牛奶。网络连接或低电耗模式等省电功能可能会延迟推送基于推送的通知。

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

注意：目前，Chrome 仅支持基于时间的触发器。未来，我们可能会根据开发者的需求添加其他触发器，例如基于位置的触发器。

使用场景

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

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

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

当前状态

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

如何使用通知触发器

通过 about://flags 启用

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

注意：我们之前针对该功能开展了两次源试用（Chrome 80 到 83 和 Chrome 86 到 88），以便开发者有机会试用建议的 API。您可以阅读收集到的反馈摘要。

功能检测

您可以通过检查 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),
  });
};

注意：在桌面设备上，只有在 Chrome 运行时，通知触发器才会触发。在 Android 设备上，无论如何都会触发这些事件。

取消定时通知

如需取消安排的通知，请先通过 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 开发者工具也会记录所有通知事件（包括预定通知、显示通知和已关闭通知）三天。

已安排的通知。

显示的通知。

演示

您可以在演示中查看通知触发器的实际效果。通过演示，您可以安排通知、列出通知，以及取消通知。您可以在 Glitch 上找到相关源代码。

“通知触发器”演示。

安全与权限

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

用户控制

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

透明度

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

反馈

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

请向我们说明 API 设计

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

实现方面存在问题？

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

打算使用该 API？

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

实用链接

• 公开铺垫消息
• 通知触发器演示 | 通知触发器演示来源
• 跟踪 bug
• ChromeStatus.com 条目
• Blink 组件：UI>Notifications

致谢

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