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

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

解决方案

1. 注册 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);     }); }

2. 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')   ); });

3. 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)，私钥保存在服务器端。

4. 服务器端推送： 使用 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 如何影响移动端性能和电池寿命？

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

25

查看详情

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 的兼容性已经相当不错，主流浏览器都支持。但是，仍然存在一些差异。

• iOS： 在 iOS 上，Service Worker 的支持相对较弱。只有添加到主屏幕的 Web 应用才能使用推送通知。
• Android： Android 上的 Chrome 和 Firefox 都支持 Service Worker 推送通知。
• 桌面浏览器： 桌面浏览器对 Service Worker 的支持最好。

要处理兼容性问题，可以使用 Feature Detection 来检查浏览器是否支持 Service Worker 和推送 API。 针对不支持的浏览器，可以提供降级方案，例如使用传统的轮询方式来获取更新。