上一章讲到了ServiceWorker的基础使用，但是它的功能不仅仅只有这些，还有很多很多，比如消息推送，后台同步，甚至还有WebRTC，这一章我们来进阶ServiceWorker。
前期准备
在开始之前，我们先做一下前期的准备，还是使用我上一篇的例子，但是我们需要删除service-worker.js里面的缓存代码，因为这一章用不上，新看到的小伙伴可以直接用我下面的代码也行：
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script> if ('serviceWorker' in navigator) {// 在调试阶段，如果发现 service worker 没有更新，可以先用下面的代码强制更新// navigator.serviceWorker.getRegistrations().then((registrations) => {// for (let registration of registrations) {// registration.unregister()// }// });navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then((registration) => {// 先空着});} </script>
</body>
</html>
service-worker.js里面暂时不写任何代码
消息推送
使用ServiceWorker是一定要了解消息推送的，因为它是ServiceWorker的一个重要功能，它可以让你的网站在用户不在的时候，也能够接收到消息，这对于一些即时通讯的网站来说，是非常重要的。
按照正常的消息推送流程，我们需要经历下面几个步骤：
1.注册ServiceWorker获得registration对象
2.通过registration对象获得PushManager对象
3.通过PushManager对象订阅消息推送，获得subscription对象
4.将subscription对象发送给服务器，由服务器保存
5.服务器通过subscription对象推送消息
6.ServiceWorker通过监听push事件，获得推送的消息
7.ServiceWorker通过showNotification方法，显示消息
在讲推送流程之前，我们先来体验一下消息推送的快感。
1. 体验消息推送
啥也不多说，直接上代码：
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then((registration) => {// 直接调用showNotification方法，显示消息registration.showNotification('Hello World');});
}
上面的方法直接让我们在window上显示了一个消息，但是这个消息是没有任何交互的，我们可以通过Notification对象来实现交互：
// 省略注册 ServiceWorker 的代码
self.showNotification('Hello World<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/703a0cee8b0b494eadd27adc61883956~tplv-k3u1fbpfcp-watermark.image?',actions: [{action: 'yes',title: 'Yes'}, {action: 'no',title: 'No'}" style="margin: auto" />
});
这样我们就可以在消息上添加交互了，但是这个交互是没有任何效果的，我们需要通过监听notificationclick事件来实现交互：
// service-worker.js
// 监听 notificationclick 事件
self.addEventListener('notificationclick', (event) => {// 判断点击的是哪个按钮if (event.action === 'yes') {console.log('yes');} else if (event.action === 'no') {console.log('no');}
});
这个时候我们就可以在控制台看到点击的是哪个按钮了，接下来我们就来认识一下showNotification方法。
2. showNotification
showNotification方法是ServiceWorkerRegistration对象的一个方法，它可以用来显示消息，直接看函数签名：
interface ServiceWorkerRegistration extends EventTarget {/** * 显示消息 * @param title 消息标题 * @param options 消息配置 *options.body 消息内容 *options.icon 消息图标 *options.tag 消息标签 *options.data 消息数据 *options.actions 消息交互按钮 * @returns Promise */showNotification(title: string, options?: NotificationOptions): Promise<Notification>;
}
最低0.47元/天 解锁文章
1422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
