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