使用 Notifications API - Web API

使用 Notifications API - Web API

使用 Notifications API安全上下文: 此项功能仅在一些支持的浏览器的安全上下文(HTTPS)中可用。

Notifications API 允许网页或应用程序以系统级别发送在页面外部显示的通知;这样即使应用程序空闲或在后台,Web 应用程序也会向用户发送信息。本文将介绍在你自己的应用程序中使用此 API 的基础知识。

通常,系统通知是指操作系统的标准通知机制,例如,思考典型的桌面系统或移动设备如何发布通知。

系统通知系统当然会因平台和浏览器而异,但无需担心,通知 API 编写得足够通用,足以与大多数系统通知系统兼容。

备注: 此特性在 Web Worker 中可用。

示例Web 通知最明显的用例之一是基于 Web 的邮件或 IRC 应用程序,即使用户正在使用另一个应用程序执行其他操作,它也需要在收到新消息时通知用户。现在存在许多这样的例子,例如 Slack。

我们编写了一个现实世界的示例——一个待办事项列表应用程序——来让你更多地了解如何使用 Web 通知。它使用 IndexedDB 在本地存储数据,并在任务到期时使用系统通知通知用户。下载待办事项列表代码,或查看实时运行的应用程序。

请求权限在应用程序可以发送通知之前,用户必须授予应用程序这样做的权利。当 API 尝试与网页之外的内容进行交互时,这是一个常见的要求——用户至少需要专门授予该应用程序显示通知的权限一次,从而让用户控制哪些应用程序或站点允许显示通知。

由于过去滥用推送通知,网络浏览器和开发人员已开始实施策略来帮助缓解此问题。你应该仅请求同意显示通知以响应用户手势(例如:单击按钮)。这不仅是最佳实践(你不应该向用户发送他们不同意的通知),而且未来的浏览器将明确禁止未响应用户手势而触发的通知权限请求。例如,Firefox 从版本 72 开始就已经这样做了,Safari 也已经这样做了一段时间了。

此外,在 Chrome 和 Firefox 中,除非网站是安全上下文(即 HTTPS),否则你根本无法请求通知,并且你不能再从跨源