PWA是什么
“渐进式网络应用程序”（Progressive Web Apps）。
PWA是传统Web应用向Native应用的又一次疯狂试探，也只是一次不大不小的进化而已。
PWA相对于传统Web应用，主要在以下几个方面变得更强：
- 观感方面：在手机上，可以添加Web应用到桌面，并可提供类似于
Native应用的沉浸式体验（翻译成人话就是可以隐藏浏览器的脑门）。这部分背后的技术是manifest，虽然可以给带来全新的体验，但不是本文重点，就此别过。 - 性能方面：由于本文主角
Service Worker具有拦截浏览器HTTP请求的超能力，搭配CacheStorage，PWA可以提升Web应用在网络条件不佳甚至离线时的用户体验和性能。 - 其它方面：推送通知、后台同步等可选的高级功能，这些功能也是利用Service Worker来实现的。
简单总结：PWA是Web应用的自然进化，Service Worker是PWA的关键。
Service Worker
Service Worker是浏览器在后台独立于网页运行的、用JavaScript编写的脚本。
// 不起眼的一行if，除了防止报错之外，也无意间解释了PWA的P：
// 如果浏览器不支持Service Worker，那就当什么都没有发生过
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
// 所以Service Worker只是一个挂在navigator对象上的HTML5 API而已
navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
console.log('我注册成功了666');
}, function (err) {
console.log('我注册失败了');
});
});
}
简单总结：
- 我们需要手动编写service-worker.js文件。
- 我们需要在网页中下载并注册service-worker.js文件。
- Service Worker具有超能力，可以拦截并处理HTTP请求。
Service Worker生命周期
- Service Worker生命周期：安装中、安装后、激活中、激活后、我废了。（有点像组件的生命周期不是吗？）
- 首次导航到网站时，会下载、解析并执行Service Worker文件，触发install事件，尝试安装Service Worker，如果install事件回调函数中的操作都执行成功，标志Service Worker安装成功，此时进入waiting状态，注意这时的Service Worker只是准备好了而已，并没有生效，当用户二次进入网站时，才会激活Service Worker，此时会触发activate事件，标志Service Worker正式启动，开始响应fetch、post、sync等事件。
Service Worker主要事件
- install：顾名思义，Service Worker安装时触发，通常在这个时机缓存文件。
- activate：顾名思义，Service Worker激活时触发，通常在这个时机做一些重置的操作，例如处理旧版本Service Worker的缓存。
- fetch：顾名思义，浏览器发起HTTP请求时触发，通常在这个事件的回调函数中匹配缓存，是最常用的事件。
- push：顾名思义，和推送通知功能相关，没有相关需求的话可以不去了解。
- sync：顾名思义，和后台同步功能相关，没有相关需求的话可以不去了解。
Service Worker的应用
1.缓存静态资源
2.离线体验
使得网页支持离线浏览，例如Google的离线小恐龙
