什么是ServiceWorker
在介绍ServiceWorker之前，我们先来谈谈PWA。PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。
Https环境部署
响应式设计，一次部署，可以在移动设备和 PC 设备上运行 在不同浏览器下可正常访问。
浏览器离线和弱网环境可极速访问。
可以把 App Icon 入口添加到桌面。
点击 Icon 入口有类似 Native App 的动画效果。
灵活的热更新
在PWA要求的各种能力上，关于离线环境的支持我们就需要仰赖ServiceWorker。Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。由于PWA是谷歌提出，那么对ServiceWorker，同样也提出一些能力要求：
后台消息传递
网络代理，转发请求，伪造响应
离线缓存
消息推送
在目前阶段，ServiceWorker的主要能力集中在网络代理和离线缓存上。具体的实现上，可以理解为ServiceWorker是一个能在网页关闭时仍然运行的WebWorker。
ServiceWorker的生命周期刚才讲到ServiceWorker拥有离线能力的WebWorker，既然这么强的能力，那就需要好好管理起来。所以我们要明白ServiceWorker的生命周期，也就是它从创建到销毁的过程。在所有介绍ServiceWorker生命周期的文章中最常见的就是下面这张图。
整个过程中一个ServiceWorker会经历：安装、激活、等待、销毁的阶段。但实际上这张图我感觉并没有清晰的解释ServiceWorker的声明周期，所以我制作了下面这张图。
这张图把ServiceWorker的声明周期分为了两部分，主线程中的状态和ServiceWorker子线程中的状态。子线程中的代码处在一个单独的模块中，当我们需要使用ServiceWorker时，按照如下的方式来加载：
if (navigator.serviceWorker != null) { // 使用浏览器特定方法注册一个新的service worker navigator.serviceWorker.register('sw.js') .then(function(registration) { window.registration = registration; console.log('Registered events at scope: ', registration.scope); }); }