Notification Triggers API

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

Thomas Steiner

警告：通知触发器 API 是 Google 的 “Capabilities project”不再是 。各种操作系统中的通知格局发展得非常快， 那就让我们明白，我们将能够在各个渠道提供可靠、一致且可靠的体验 平台。

为了创造良好的体验，需要有一种机制 删除过时或无效的预定通知（例如，已取消的日历活动）、 而无需依赖标签页打开了根据我们收到的反馈， 仅使用“定期后台同步”是不够的 并且由于需要显示通知，所以 Push API 并不是 解决方案

什么是通知触发器？

Web 开发者可以使用 Web Notifications API。此功能通常与 Push API 用于告知用户具有时效性的信息，例如 重大新闻事件或收到的消息。通过在 用户的设备

Push API 的问题在于触发通知并不可靠，而触发通知必须 在满足特定条件（例如时间或位置）时显示。一个基于时间的 条件是一种日历通知，它会提醒您与主管在 下午 2 点。一个基于位置的条件示例是提醒你买牛奶的通知 当您进入杂货店附近时。网络连接或省电 低电耗模式等功能可能会延迟推送通知的传递。

借助通知触发器，您可以安排通知的触发时间，从而解决此问题 以便操作系统在正确的时间传送通知 （即使没有网络连接或设备处于省电模式）。

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

使用场景

日历应用可以使用基于时间的通知触发器来提醒用户即将到来的 会议。日历应用的默认通知架构可以是显示第一个浮动提醒 我们会在会议开始前一小时发出通知，然后在五分钟内再次发出更紧急的通知 。

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

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

当前状态

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

如何使用通知触发器

通过 about://flags 启用

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

注意：该功能之前已进行过两次源试用，让开发者有机会试用 建议的 API，运行 Chrome 80 至 83，Chrome 86 至 88 版本运行。您可以阅读 代码摘要 获得的反馈 数据。

功能检测

您可以通过检查是否存在 showTrigger 属性：

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

安排通知时间

安排通知的时间与显示常规推送通知类似，不同之处在于前者需要 将一个以 TimestampTrigger 对象作为值的 showTrigger 条件属性传递给 通知的 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 开发者工具“通知”面板调试通知。初始值 调试过程中，请按开始录制事件 或 Ctrl + E（在 Mac 上为 Command + E）。Chrome 开发者工具记录 所有通知事件（包括计划发布的通知、显示的通知和已关闭的通知）， （即使开发者工具已关闭）。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 定时通知。

。

<ph type="x-smartling-placeholder">

</ph>

显示的通知。

演示

您可以观看演示，查看通知触发器的实际效果，该演示可用于安排 通知、列出已排定的通知和取消它们。源代码可在 故障。

<ph type="x-smartling-placeholder">

</ph>

“通知触发器”演示。

安全与权限

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

用户控制

此 API 仅适用于 ServiceWorkerRegistration。这意味着 所需的数据存储在同一上下文中，当 Service Worker 加载时， 或用户删除源的所有网站数据。阻止 Cookie 也会阻止服务 工作器，因此无法使用此 API。通知可以 始终被用户在网站设置中针对相应网站停用。

透明度

与 Push API 不同，此 API 不依赖于网络，这意味着系统会定期发送通知 需要事先获得所有必需的数据，包括 badge、icon 和 image 属性。这意味着开发者无法观察到显示定时通知 并且在用户与通知互动之前不唤醒 Service Worker。 因此，目前还没有任何已知方法可供开发者获取用户的相关信息 IP 地址地理定位查询等可能侵犯隐私的方法。此设计还 让该功能可以选择利用操作系统提供的时间安排机制 例如 Android 的 AlarmManager， 这有助于节省电量

反馈

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

向我们介绍 API 设计

API 是否有什么无法按预期运行？或者是否缺少方法 需要哪些资源或属性来实现您的想法？对安全性有疑问或意见 模型？在通知触发器 GitHub 代码库中提交规范问题，或将您的想法添加到 一个现有问题。

实施时遇到问题？

您在 Chrome 的实现过程中是否发现了错误？或者，实现是否与规范不同？ 在 new.crbug.com 上提交 bug。请务必提供尽可能多的细节信息 简单说明重现问题，并将“组件”设置为 UI>Notifications。小故障效果很好 分享快速简单的错误重现。

打算使用该 API？

打算在您的网站上使用通知触发器？您的公开支持有助于我们确定各项工作的轻重缓急 并向其他浏览器供应商展示支持这些功能有多么重要。发推文给 @ChromiumDev（使用 # 标签） #NotificationTriggers 并告诉我们您使用它的地点和方式。

实用链接

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

致谢

通知触发器由 Richard Knoll 实现 还有由 Peter Beverloo 撰写的铺垫消息， Richard 所做的贡献。以下人员已评论了这篇文章： Joe Medley、Pete LePage 以及 Richard 和 Peter。主打图片，作者 Lukas Blazek 于 Un 创办公司。