移动端推送通知通过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。 针对不支持的浏览器，可以提供降级方案，例如使用传统的轮询方式来获取更新。
以上就是JS 移动端推送通知 – 使用 Service Worker 实现后台消息接收的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522138.html
微信扫一扫 
支付宝扫一扫 
