javascript的通知功能怎么做_如何实现桌面和推送通知-js教程-PHP中文网

javascript的通知功能怎么做_如何实现桌面和推送通知

紅蓮之龍

发布： 2025-12-20 17:37:03

原创

919人浏览过

JavaScript通知分本地桌面通知和Web Push推送两类：前者通过Notification API在用户交互后触发即时提醒；后者需Service Worker、VAPID密钥及服务端配合实现跨页面/后台推送，但Safari（尤其iOS）不支持，且必须HTTPS环境。

javascript的通知功能怎么做_如何实现桌面和推送通知

JavaScript 的通知功能主要通过 Notification API 实现，支持桌面弹窗通知（需用户授权），但不能直接发送远程推送通知（如 App 那样后台唤醒或锁屏提醒）。真正的“推送通知”需要服务端配合（如 Web Push 协议 + Push Service），前端只负责订阅和接收。

一、实现浏览器桌面通知（本地触发）

这是最基础的通知能力，适用于页面内操作后的即时提醒（比如表单提交成功、聊天新消息）：

必须在用户与页面有交互（如点击、输入）后才能请求权限，否则 Chrome 等浏览器会静默拒绝
调用 Notification.requestPermission() 获取用户授权，返回 "granted" 才能显示通知
创建通知使用 new Notification(title, options)，支持图标、正文、声音（需额外播放）、点击回调等

示例代码：

document.getElementById('notifyBtn').addEventListener('click', () => {
  if (Notification.permission === 'granted') {
    new Notification('你好！', {
      body: '这是一条桌面通知',
      icon: '/icon.png'
    });
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        new Notification('已授权', { body: '通知已发出' });
      }
    });
  }
});

登录后复制

二、实现 Web Push 推送通知（服务端触发）

让用户即使关闭网页、切换标签页甚至关掉浏览器（部分浏览器支持），也能收到通知——这需要完整的 Web Push 流程：

立即学习“Java免费学习笔记（深入）”；

Supermeme

Supermeme是一个AI驱动的Meme生成器，可以快速生成有趣的Meme梗图

114

查看详情

前端生成一对公私钥（VAPID），将公钥发给后端保存
调用 serviceWorker.register() 注册一个 Service Worker，它是接收推送的“守门人”
调用 pushManager.subscribe() 订阅推送服务，获得一个 endpoint（类似设备 ID），后端用它发送加密消息
后端使用 Web Push 库（如 Node.js 的 web-push）向 Push Service（如 Google FCM、Mozilla Autopush）发送加密推送
Service Worker 在 push 事件中调用 self.registration.showNotification() 显示通知