https://developers.google.com/web/fundamentals/codelabs/push-notifications/?hl=en
首先下载源码：
git clone https://github.com/GoogleChrome/push-notifications.git设置如下选项方便开发：
开始
注册之后记录sw实例：
navigator.serviceWorker.register(‘sw.js‘)
.then(function(swReg) {
console.log(‘Service Worker is registered‘, swReg);
swRegistration = swReg;
})
生成key：
https://web-push-codelab.glitch.me/。生成了一个相互对应的public key 与 private key
然后把public key记录到 applicationServerPublicKey变量上。
判断当前sw是否已经订阅过消息推送了：
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
if (isSubscribed) {
console.log(‘User IS subscribed.‘);
} else {
console.log(‘User is NOT subscribed.‘);
}
});
使用之前生成的public key来订阅消息推送：
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
// subscribe 会给推送服务器发送一个网络请求
swRegistration.pushManager.subscribe({
userVisibleOnly: true, // 用于显示请求权限的界面，所以这个值基本必须为true，否则获取不到权限的话，当前promise会被reject
applicationServerKey: applicationServerKey
}).then(function (subscription) {
// 订阅成功。subscription 就是推送服务器返回的信息
console.log(‘User is subscribed.‘);
updateSubscriptionOnServer(subscription); // 在这个自定义函数中，我们应该把订阅信息发送给后端
isSubscribed = true;
}).catch(function (err) {
console.log(‘Failed to subscribe the user: ‘, err);
});
// 工具函数|
function urlB64ToUint8Array(base64String) {
const padding = ‘=‘.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, ‘+‘)
.replace(/_/g, ‘/‘);
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
执行订阅的时候，界面上会有如下弹框来请求消息推送的显示权限：
点击同意的话，则订阅成功。但如果用户点击了拒绝，则app没办法再次显示这个弹框而且没有消息推送，以下这个值会为true：
Notification.permission === ‘denied‘
手动点击这里（ask），可以撤销权限，使弹窗再次弹出来，方便开发测试：
处理消息推送
我们需要在sw中监听push事件，来接收服务器发来的消息推送：
self.addEventListener(‘push‘, function(event) {
console.log(‘[Service Worker] Push Received.‘);
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = ‘Push Codelab‘;
const options = {
body: ‘Yay it works.‘,
icon: ‘images/icon.png‘,
badge: ‘images/badge.png‘ //仅仅用在安卓
};
// showNotification 用于显示一个通知 // waitUntil ：使sw等待直至这个promise被处理，否则有可能这个promise没被处理，sw 就被浏览器终止了
event.waitUntil(self.registration.showNotification(title, options));
});
测试：在这里点击push：
屏幕左下角就会看到这个通知：
但是点击这个通知是没什么响应的，需要我们去注册一个点击事件：
self.addEventListener(‘notificationclick‘, function(event) {
console.log(‘[Service Worker] Notification click Received.‘);
event.notification.close(); // 关闭这个通知
event.waitUntil(
clients.openWindow(‘https://developers.google.com/web/‘) // 打开一个标签
);
});
发送消息推送
以上订阅成功后返回的subscription，将它 JSON.stringify(subscription) 后的字符串粘贴到 https://web-push-codelab.glitch.me/ 就可以发送用于测试的消息推送了（注意要用页面所在的key来订阅才可以）。
同理在实际应用中，我们后端也需要这个subscription信息来发送消息推送。步骤如下（使用 web-push）：
创建firebase项目，里面的key为（用来作为GCM API key）：
然后在https://web-push-codelab.glitch.me/ 中生成的public/private key为（其实也可以用webpush.generateVAPIDKeys来生成）：
接着来订阅消息推送：
function urlB64ToUint8Array(base64String) {
const padding = ‘=‘.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, ‘+‘)
.replace(/_/g, ‘/‘);
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
const applicationServerPublicKey = ‘BP0bPsBFRO4JI4WPI-0Hztl49AX2mjfPxr5SAmiu9i1C4T1X2EFQvuoCekow-JD9Gs3aHlkxstVm9UTndHA0YM8‘;
function subscribeUser() {
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log(‘User is subscribed.‘);
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(err) {
console.log(‘Failed to subscribe the user: ‘, err);
updateBtn();
});
}
node服务器来发送消息推送：
const webpush = require(‘web-push‘);
// VAPID keys should only be generated only once.
// const vapidKeys = webpush.generateVAPIDKeys();
webpush.setGCMAPIKey(‘AIzaSyAPNqXa931TMPdEx5im92uDQmWQKfKFJNo‘);
webpush.setVapidDetails(
‘mailto:[email protected]‘,
"BP0bPsBFRO4JI4WPI-0Hztl49AX2mjfPxr5SAmiu9i1C4T1X2EFQvuoCekow-JD9Gs3aHlkxstVm9UTndHA0YM8",
"Y23-foXK_oHtxOA5whmR61RBbyqqm9Sxnl-bapZPghQ"
);
// This is the same output of calling JSON.stringify on a PushSubscription
const pushSubscription = {
endpoint: ‘https://fcm.googleapis.com/fcm/send/fN0CygRBHVo:APA91bH4FB9bkE6RjD6v758TaNoHIx4IhUxdSm_bcFMPRRnyY4IcTlID9md6AwAdhUhqE7HzbL76WY6Wzak7MGmtrJ5InYAwYP31B-mc-TXRCnKQwUKxjIPe1Kv6-U_S672rG_8jVmpJ‘,
keys: {
auth: ‘uOxqcnlXYQIyDucqXeWeeA==‘,
p256dh: ‘BFoO1hMB5kpWA4lPx2fKZGiyw3Qd-3n9afeE3jrJ62Bna66LsHQmCSIjo0Q9t2UF6MZdzyqe6cNkNbSGpNpmX6I=‘
}
};
webpush.sendNotification(pushSubscription, ‘Your Push Payload Text‘).then(()=>{
console.log("发送完成")
}).catch((err)=>{
console.log("被拒绝")
console.log(err)
})
因为在中国被墙的原因，以上代码运行会报错：
被拒绝
{ Error: connect ETIMEDOUT 172.217.160.106:443
at Object._errnoException (util.js:1024:11)
at _exceptionWithHostPort (util.js:1046:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1182:14)
code: ‘ETIMEDOUT‘,
errno: ‘ETIMEDOUT‘,
syscall: ‘connect‘,
address: ‘172.217.160.106‘,
port: 443 }
查看issue之后，发现有人针对这个问题提交了一个PR，但是没有被应用，即master分支上还是存在这个问题。
取消订阅
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
// TODO: Tell application server to delete subscription
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log(‘Error unsubscribing‘, error);
})
并且要记得通知后端，不要往这个subscription推送消息了 。
原文地址：https://www.cnblogs.com/hellohello/p/8441188.html
时间： 2024-10-16 09:55:16