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

---

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

keywords:

• Notification
• requestPermission
• showNotification
• actions
• notificationclick

description: 介绍通知权限与展示、动作按钮与点击交互，前后台协作与合规治理，包含页面与 Service Worker 示例及工程建议。

categories:

• 文章资讯
• 技术教程

---

概述

Notification API 提供系统级通知能力，需要用户授权并在安全上下文使用。可在页面或 Service Worker 中展示通知，支持动作按钮与点击交互，适合消息提醒与后台任务完成提示。

用法与示例

const perm = await Notification.requestPermission()
if (perm === 'granted') {
  new Notification('新消息', { body: '您有一条通知', actions: [{ action: 'open', title: '打开' }] })
}

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/