上一章讲到了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的一个重要功能，它可以让你的网站在用户不在的时候，也能够接收到消息，这对于一些即时通讯的网站来说，是非常重要的。
按照正常的消息推送流程，我们需要经历下面几个步骤：
- 注册
ServiceWorker获得registration对象 - 通过
registration对象获得PushManager对象 - 通过
PushManager对象订阅消息推送，获得subscription对象 - 将
subscription对象发送给服务器，由服务器保存 - 服务器通过
subscription对象推送消息 ServiceWorker通过监听push事件，获得推送的消息ServiceWorker通过showNotification方法，显示消息
在讲推送流程之前，我们先来体验一下消息推送的快感。
1. 体验消息推送
啥也不多说，直接上代码：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {
scope: '/'
}).then((registration) => {
// 直接调用showNotification方法，显示消息
registration.showNotification('Hello World');
});
}