JavaScript推送通知怎么实现？NotificationAPI教程

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript如何实现推送通知？Notification API使用教程》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript 实现推送通知主要依赖两个核心机制：浏览器原生的 Notification API（用于显示本地通知）和 Push API + Service Worker（用于接收服务器发起的后台推送）。很多人混淆二者，这里先明确：Notification API 本身不收消息，只负责“显示”；真正实现远程推送必须配合 Push API 和后台服务。

一、启用 Notification API（用户授权与显示）

这是推送功能的第一步，必须获得用户明确授权才能显示通知：

• 调用 Notification.requestPermission() 弹出浏览器权限请求框（仅在用户交互后如点击按钮中调用才有效）
• 检查返回值是否为 "granted"，只有授权成功才能创建通知
• 使用 new Notification(title, options) 创建并显示通知，支持图标、正文、声音（需用户设置）、重定向链接等

示例代码：

document.getElementById('notify-btn').onclick = async () => {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    new Notification('你好！', {
      body: '这是一条前端触发的通知',
      icon: '/icon.png',
      tag: 'welcome'
    });
  }
};

二、实现真正的远程推送（Push API + Service Worker）

要让页面关闭后也能收到通知，必须走 Push 流程：

• 注册一个 Service Worker（必须 HTTPS 或 localhost），它能在后台持续运行
• 通过 navigator.serviceWorker.ready 获取 registration 对象
• 调用 registration.pushManager.subscribe() 向浏览器推送服务申请订阅，生成唯一的 PushSubscription（含 endpoint、keys 等）
• 将该订阅信息（尤其是 endpoint）发送到你的后端服务器保存
• 后端通过 Web Push 协议（如使用 web-push 库）向 endpoint 发送加密消息，浏览器收到后自动唤醒 Service Worker
• 在 Service Worker 的 push 事件监听器中调用 self.registration.showNotification() 显示通知

三、Service Worker 中处理推送事件

这是关键一环，纯前端无法绕过：

• Service Worker 文件（如 sw.js）需监听 push 事件
• 从 event.data 中解析推送载荷（注意：Chrome/Firefox 要求消息必须加密）
• 调用 showNotification() 并传入标题、选项（可含 data、actions、badge 等）
• 还可监听 notificationclick 事件，实现点击跳转逻辑

简例（sw.js）：

self.addEventListener('push', event => {
  const data = event.data?.json() || { title: '新消息' };
  const options = {
    body: data.body || '',
    icon: data.icon || '/icon-192.png',
    badge: '/badge.png',
    data: { url: data.url || '/' }
  };
  event.waitUntil(self.registration.showNotification(data.title, options));
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

四、注意事项与常见问题

• 所有涉及 Push API 的操作必须在 HTTPS 下进行（开发可用 localhost）
• 移动端 Chrome / Firefox 支持完整流程；Safari 仅支持 Notification API（无 Push API）
• 用户可在浏览器设置中随时禁用通知，需定期检查 Notification.permission
• 推送消息体大小受限（通常 ≤ 4KB），敏感内容建议只传 ID，前端再拉取详情
• 订阅过期或失效时（如用户清除浏览数据），需重新订阅并更新服务端记录

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。