借助通知触发器,您可以安排不需要网络连接的本地通知,因此非常适合日历应用等使用场景。
什么是通知触发器?
Web 开发者可以使用 Web Notifications API 显示通知。此功能通常与 Push API 结合使用,用于告知用户具有时效性的信息,例如重大新闻事件或收到的消息。通过在用户设备上运行 JavaScript 显示通知。
Push API 的问题在于,触发通知并不可靠,满足特定条件(例如时间或位置)时必须显示这些通知。基于时间的条件的一个示例是日历通知,它会提醒您在下午 2 点与老板召开重要会议。基于位置的条件的一个示例是当您进入杂货店附近时提醒您买牛奶。网络连接或低电耗模式等省电功能可能会延迟推送基于推送的通知。
通过通知触发器,您可以提前安排通知的触发条件,以便即使没有网络连接或设备处于省电模式,操作系统也会在适当的时间传送通知。
用例
日历应用可以使用基于时间的通知触发器来提醒用户即将召开的会议。日历应用的默认通知架构可能是在会议开始前一小时显示第一个浮动通知,然后在会议开始前 5 分钟显示另一个更紧急的通知。
电视网络可能会提醒用户他们喜爱的电视节目即将开始或会议直播即将开始。
时区转换网站可以使用基于时间的通知触发器来让用户为电话会议或视频通话安排闹钟。
当前状态
Step | 状态 |
---|---|
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 开发者工具“通知”面板调试通知。如需开始调试,请按 Start record events 图标 或 Ctrl + E(在 Mac 上,按 Command + E)。即使开发者工具关闭,Chrome 开发者工具也会记录所有通知事件(包括预定通知、显示通知和已关闭通知)三天。
![在 Chrome 开发者工具的“Notifications”窗格(位于“Application”面板中)中记录了预定通知事件。](https://developer.chrome.google.cn/static/docs/web-platform/notification-triggers/image/a-scheduled-notification-1bbf14c57c2da.png?authuser=5&hl=sv)
![在 Chrome 开发者工具的“Notifications”窗格中记录了一个显示的通知事件。](https://developer.chrome.google.cn/static/docs/web-platform/notification-triggers/image/a-displayed-notification-d54816e76c8f2.png?authuser=5&hl=sv)
演示
您可以在演示中查看通知触发器的实际效果。通过演示,您可以安排通知、列出通知,以及取消通知。其源代码可在 Glitch 上找到。
![通知触发器演示 Web 应用的屏幕截图。](https://developer.chrome.google.cn/static/docs/web-platform/notification-triggers/image/a-screenshot-the-notific-8bf4469e1c556.png?authuser=5&hl=sv)
安全与权限
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 是否有什么无法按预期运行?或者,您是否缺少实现自己的想法所需的方法或属性?如果您对安全模型有疑问或意见,在通知触发器 GitHub 代码库中提交规范问题,或添加您对现有问题的看法。
实施时遇到问题?
您在 Chrome 的实现过程中是否发现了错误?或者,实现是否与规范不同?
在 new.crbug.com 上提交 bug。请务必提供尽可能多的细节信息以及有关重现的简单说明,并将“组件”设置为 UI>Notifications
。Glitch 非常适用于分享快速简单的 bug 重现。
打算使用该 API?
打算在您的网站上使用通知触发器?您的公开支持可以帮助我们确定功能的优先级,并向其他浏览器供应商展示支持这些功能的重要性。使用 # 标签 #NotificationTriggers
向 @ChromiumDev 发送一条 Twitter 微博,告诉我们您使用它的地点和方式。
实用链接
- 公开铺垫消息
- 通知触发器演示 | 通知触发器演示来源
- 跟踪错误
- ChromeStatus.com 条目
- Blink 组件:
UI>Notifications
致谢
通知触发器由 Richard Knoll 实现,由 Peter Beverloo 撰写的铺垫消息由 Richard 贡献。以下人员已审核了这篇文章:Joe Medley、Pete LePage 以及 Richard 和 Peter。主打图片,作者:Lukas Blazek,在 Un 创立平台上。