Notification API：权限、动作与交互治理

--- title: Notification API：权限、动作与交互治理 keywords: - Notification - requestPermission - showNotification - actions - notificationclick description: 介绍通知权限与展示、动作按钮与点击交互，前后台协作与合规治理，包含页面与 Service Worker 示例及工程建议。 categories: - 文章资讯 - 技术教程 --- 概述 Notification API 提供系统级通知能力，需要用户授权并在安全上下文使用。可在页面或 Service Worker 中展示通知，支持动作按钮与点击交互，适合消息提醒与后台任务完成提示。 用法与示例 ```js const perm = await Notification.requestPermission() if (perm === 'granted') { new Notification('新消息', { body: '您有一条通知', actions: [{ action: 'open', title: '打开' }] }) } ``` ```js self.addEventListener('push', async e => { const reg = await self.registration.showNotification('后台任务完成', { body: '点击查看', actions: [{ action: 'view', title: '查看' }] }) }) self.addEventListener('notificationclick', e => { e.notification.close() e.waitUntil(clients.openWindow('/inbox')) }) ``` 工程建议 - 权限与频率：只在必要场景请求权限，控制通知频率并允许用户关闭。 - 交互一致性：动作按钮与页面状态同步，避免误导或重复提醒。 - 合规与隐私：遵循平台政策与本地法规，避免敏感信息泄露。 参考与验证 - MDN Notification 文档：https://developer.mozilla.org/docs/Web/API/Notifications_API - web.dev 通知与权限指南：https://web.dev/articles/notifications - Service Worker 与通知：https://developer.chrome.com/docs/workbox/handling-push-events/