Notifications API 与权限处理

Notification.permission 是一个反映当前权限状态的静态字符串。它可以是 "granted"（用户已允许）、"denied"（用户已阻止）或 "default"（从未询问）。尝试显示通知之前，请检查此属性，以避免不必要的错误。

Notification.requestPermission() 返回一个承诺对象，其解析结果是新的权限字符串。请只在明确的用户操作响应中调用它，而不要在页面加载时调用。浏览器会忽略或抑制页面刚加载时立即出现的权限提示；如果提示在没有上下文的情况下出现，用户也会觉得很烦。

最有效的模式是先显示一条应用内提示，说明启用通知的好处，然后让用户点击“启用通知”，再调用 requestPermission()。这样可以提供必要的上下文、提高接受率，并避免浏览器将您的网站标记为垃圾网站。绝不要在页面加载时请求权限。

new Notification(title, options) 会创建并显示系统通知。第一个参数是标题字符串。第二个参数是 options 对象，它接受 body（副标题文本）、icon（图片网址）和用于去重的 tag 等属性。只有在权限为 "granted" 时，这种方式才有效。

重要的通知选项包括：body 用于显示标题下方的描述文本，icon 用于显示小图片，badge 用于显示在 OS 通知区域中的小型单色图标，image 用于显示大型内嵌图片，tag 用于使用相同标签替换之前的通知，以及 requireInteraction: true 用于让通知一直保留，直到用户进行操作。

Notification 实例会触发多个事件：用户点击通知时触发 onclick（可用于聚焦窗口并进行导航），通知被关闭时触发 onclose，创建通知出现问题时触发 onerror。调用 new Notification() 后，请为返回的实例附加处理函数。

将返回的 Notification 实例存储在一个变量中，然后调用 notification.close() 以通过程序将其关闭。这对于在一段时间后变得无关紧要的时效性通知很有用。将它与 setTimeout 结合使用，可以在几秒后自动关闭通知。

通知接口要求使用安全上下文。在 HTTP 页面上，根据浏览器的不同，typeof Notification === 'undefined' 可能成立，或者该接口可能会被完全禁用。这是一项安全措施，用于防止恶意网站向用户大量发送虚假的系统消息。使用前请始终检查接口是否可用。

useNotifications 钩子可以提供两个方法：requestPermission() 和 showNotification(title, options)。它会在内部跟踪当前权限状态，并在请求权限后更新该状态。组件可以直接调用 showNotification，无需担心权限检查，因为钩子会在内部处理这些工作。

页面可见性接口提供了 document.hidden 和 visibilitychange 事件。当用户没有正在查看标签页时，通知最有意义。显示通知前请检查 document.hidden === true，这样可以避免页面已经位于前台时发出重复提醒。

这里介绍的通知接口用于从页面自身触发本地通知。若要让推送通知在页面关闭时也能到达，您需要将推送接口与服务工作线程结合使用。服务工作线程会接收推送事件，并在后台调用 self.registration.showNotification()。

Notification.permission 可以是 granted、denied 或 default。始终在用户操作时请求权限，而不要在页面加载时请求。使用 new Notification(title, options) 创建通知，并处理 onclick 以聚焦窗口。将其与可见性接口结合，只在标签页隐藏时显示通知。