Notification Triggers API

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

Thomas Steiner

什么是通知触发器？

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

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

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

使用场景

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

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

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

当前状态

如何使用通知触发器

通过 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 开发者工具“通知”面板调试通知。如需开始调试，请按开始记录事件图标