概述
Web Push是在PWA开发中配合ServiceWorker实现消息推送的技术。大致流程分为以下几步：
- 浏览器向推送服务器发起推送订阅请求
- 浏览器拿到订阅完成后推送服务器返回的订阅信息，发送到应用服务器进行保存。
- 后面应用服务器通过web push向推送服务发送消息，同时携带之前保存的订阅信息，用于让推送服务器知道要推送给谁。
- 推送服务器接收到消息后，根据订阅信息将消息推送给指定的浏览器，serviceWorker需要提前监听push事件。
接下来看一下每一步的具体操作。
客户端发起订阅
首先前端在serviceWorker注册完成之后可以获取到一个serviceWorkerRegistration实例对象。使用这个对象的pushManager.subscribe方法进行订阅。
const registrtion = await navigator.serviceWorker.register('./sw.js')
const pushSubscription = await registrtion.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: base64ToUint8Array('BAvgL3epn4A5JN5tBhKsjpOUXnqYcbOGEitOw8KOAedS69NgcZ814NuP7IV5Ei5Wz2VBralB1WYkazdLBRMq3yw')
})
// 当然也可以取消订阅，先不关心
pushSubscription.unsubscribe().then(function () {
console.log('取消订阅成功！')
})
userVisibleOnly参数为了保证推送对用户可见，设置为true即可；applicationServerKey服务器密钥的生成需要借助一个npm包web-push来生成，可以通过代码生成：
const webpush = require('web-push')
const vapidKeys = webpush.generateVAPIDKeys()
也可以全局安装web-push,通过命令生成：
web-push generate-vapid-keys --json
以上可以生成一个这样的一对公钥和私钥（不加--json也可以，生成的格式不用而已）：
{
"publicKey":"BAvgL3epn4A5JN5tBhKsjpOUXnqYcbOGEitOw8KOAedS69NgcZ814NuP7IV5Ei5Wz2VBralB1WYkazdLBRMq3yw",
"privateKey":"SMIFmRPZHtLhIfxEqkbzanZg7NH1FlrFF8cf_K3BeWQ"
}
以上在应用服务器生成，公钥给到客户端（就是订阅是需要传递的），同时因为公钥是base64编码的字符串，需要将其转成Uint8Array格式才能作subscribe为参数传入。私钥是需要保存在应用服务器的。
function base64ToUint8Array (base64String) {
let padding = '='.repeat((4 - base64String.length % 4) % 4)
let base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
let rawData = atob(base64)
let outputArray = new Uint8Array(rawData.length)
for (let i = 0; i < rawData.length; i++) {
outputArray[i] = rawData.charCodeAt(i)
}
return outputArray
}
推送服务器返回的订阅信息pushSubscription，是需要传递给应用服务器的，格式如下：
{
"endpoint": "https://fcm.googleapis.com/xxxxx",
"keys": {
"p256dh": "xxxxxx",
"auth": "xxxxxx"
}
}
应用服务器保存订阅信息
拿到订阅信息之后需要保存到我们自己的应用服务器，可以通过pushSubscription.getKey('p256dh')和pushSubscription.getKey('auth')获取密钥和校验码信息，由于通过getKey获取到的是ArrayBuffer类型，所以需要转成base64字符串便于传输。应用服务器可以提供一个接口，比如/api/saveSubscription，然后把数据存储到数据库中。
fetch('/api/saveSubscription', {
method: 'post',
body: JSON.stringify({
endpoint: pushSubscription.endpoint,
keys: {
p256dh: uint8ArrayToBase64(pushSubscription.getKey('p256dh')),
auth: uint8ArrayToBase64(pushSubscription.getKey('auth')),
}
})
})
function uint8ArrayToBase64 (arr) {
return btoa(String.fromCharCode.apply(null, new Uint8Array(arr)))
}
应用服务器推送消息
我们的Node应用服务端需要使用web-push库实现向推送服务器发送消息。首先通过setVapidDetails进行配置。然后需要配置在云服务申请到的GCM API Key，最后通过sendNotification发送，第一个参数是之前保存的pushSubscription对象，第二参数是要发送给浏览器前端的数据信息。
const webpush = require('web-push')
const vaipdKeys = {
publicKey: '', // 公钥
privateKey: '' //私钥
}
webpush.setVapidDetails(
'mailto:邮箱地址.com', // 注意前缀mailto:不能丢
vaipdKeys.publicKey,
vaipdKeys.privateKey
)
webpush.setGCMAPIKey('<Your GCM API Key Here>')
webpush.sendNotification(pushSubscription, JSON.stringfy({}))
浏览器监听推送
在serviceWorker文件sw.js中，在注册完成之后可以进行监听。这样就可以收到推送消息了。
self.addEventListener('push', e => {
if(e.data) {
// 推送的消息在data属性中，通过text()可以解析成字符串
console.log(e.data.text())
// 也可以通过json()解析成json等
}
})
注意：如果不翻一下，推送服务器在国内是用不了的哦。
补充
Notification
配合使用的 Notification API，判断是否支持并允许通知：
function requestNotificationPermission () {
if (!window.Notification) {
return Promise.reject('浏览器不支持桌面通知')
}
return Notification.requestPermission().then(function (permission) {
if (permission === 'granted') {
return Promise.resolve()
}
return Promise.reject('用户已禁止通知权限')
})
}
整体流程图
