当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript推送通知怎么实现？NotificationAPI教程

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

2026-01-05 18:56:32 0浏览收藏

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

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)
  );
});