JS 移动端推送通知 - 使用 Service Worker 实现后台消息接收-js教程-PHP中文网

JS 移动端推送通知 - 使用 Service Worker 实现后台消息接收

夜晨

发布： 2025-09-23 14:13:01

原创

985人浏览过

移动端推送通知通过Service Worker实现，利用浏览器推送API在应用关闭时接收消息。首先注册Service Worker并请求用户授权，获取VAPID公钥用于安全通信；编写Service Worker脚本监听push事件以显示通知，并处理点击行为；服务器端使用web-push库和VAPID密钥向用户订阅端点发送消息。Service Worker本身对性能和电池影响小，但需避免频繁请求或复杂计算。若用户拒绝授权，应提供说明与手动开启选项。兼容性方面，Android主流浏览器支持良好，iOS仅限添加到主屏幕的PWA，需用特性检测做降级处理。

js 移动端推送通知 - 使用 service worker 实现后台消息接收

移动端推送通知，核心在于利用 Service Worker 实现即使在应用关闭或后台运行时，也能接收和展示消息。这依赖于浏览器的推送 API 和 Service Worker 的拦截和处理能力。

解决方案

注册 Service Worker： 这是推送通知的基石。在你的 JavaScript 代码中，检查浏览器是否支持 Service Worker，如果支持，则注册它。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker 注册成功:', registration);
      // 询问用户是否允许推送通知
      return navigator.serviceWorker.ready;
    })
    .then(registration => {
      return registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: 'YOUR_PUBLIC_VAPID_KEY' // 你的 VAPID 公钥
      });
    })
    .then(subscription => {
      console.log('用户已订阅推送:', subscription);
      // 将订阅信息发送到你的服务器
      sendSubscriptionToServer(subscription);
    })
    .catch(error => {
      console.error('Service Worker 注册失败:', error);
    });
}

登录后复制

Service Worker 脚本 (service-worker.js)： 这个文件负责监听 push 事件（接收推送消息）和 notificationclick 事件（用户点击通知）。

self.addEventListener('push', function(event) {
  const options = {
    body: event.data.text(), // 推送内容
    icon: 'icon.png',        // 通知图标
    badge: 'badge.png'       // Android 设备上的徽章
  };

  event.waitUntil(self.registration.showNotification('推送标题', options));
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // 打开一个 URL，或者执行其他操作
  event.waitUntil(
    clients.openWindow('https://example.com')
  );
});

登录后复制

VAPID 密钥： 你需要生成 VAPID (Voluntary Application Server Identification) 密钥对。这是为了安全地从你的服务器发送推送消息。可以使用像 web-push 这样的库生成。
```
npm install web-push
```
登录后复制
```
const webpush = require('web-push');

const vapidKeys = webpush.generateVAPIDKeys();
console.log(vapidKeys);
```
登录后复制
将生成的公钥放在客户端代码中 (替换 YOUR_PUBLIC_VAPID_KEY)，私钥保存在服务器端。

服务器端推送： 使用 VAPID 私钥和用户订阅信息，从你的服务器发送推送消息。

const webpush = require('web-push');

webpush.setVapidDetails(
  'mailto:your.email@example.com', // 你的邮箱
  'YOUR_PUBLIC_VAPID_KEY',       // 你的 VAPID 公钥
  'YOUR_PRIVATE_VAPID_KEY'      // 你的 VAPID 私钥
);

const pushSubscription = {
  endpoint: '用户订阅信息的 endpoint',
  keys: {
    p256dh: '用户订阅信息的 p256dh 密钥',
    auth: '用户订阅信息的 auth 密钥'
  }
};

const payload = JSON.stringify({
  title: '推送标题',
  body: '推送内容'
});

webpush.sendNotification(pushSubscription, payload)
  .catch(error => console.error(error));

登录后复制

Service Worker 如何影响移动端性能和电池寿命？

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

查看详情

Service Worker 本身并不会显著影响性能或电池寿命。它的设计目标之一就是优化资源利用。关键在于如何编写 Service Worker 脚本。频繁的、不必要的网络请求，或者复杂的计算，都会消耗电量。推送通知的频率也需要控制，避免过度打扰用户。

如何处理用户拒绝授权推送通知的情况？

在注册 Service Worker 并尝试订阅推送之前，应该先检查用户是否已经授权。

navigator.permissions.query({name: 'push'}).then(function(result) {
  if (result.state === 'granted') {
    // 用户已授权，继续订阅
  } else if (result.state === 'prompt') {
    // 用户未授权，需要请求授权
  } else if (result.state === 'denied') {
    // 用户已拒绝授权，显示提示信息
    console.warn('用户已拒绝推送通知');
    // 可以提供一个按钮，让用户手动开启推送通知
  }
});

登录后复制

如果用户拒绝授权，不要强制要求。提供清晰的解释，说明推送通知带来的好处，并提供一个手动开启的选项。

Service Worker 推送通知在不同浏览器和操作系统上的兼容性问题

Service Worker 的兼容性已经相当不错，主流浏览器都支持。但是，仍然存在一些差异。