web网页对比nativeApp的缺点：
1. 需要通过打开浏览器才能打开web网页；
2. 没有网络无法打开网页，无法离线化；
3. 没有办法推送通知，将用户引导回网页；
针对上面的缺点，Goole提出了PWA的概念，分别解决上述的几点问题。
一、添加应用到主屏幕
采用maniest技术，manifest其实是一份应用清单，描述了应用的基本内容，比如图标、启动地址、名称等概念。将manifest配置到项目中，为应用提供了添加主屏幕的能力。
添加如上json配置文件，并通过如下方式引入html文件中：
manifest文件生效的条件：
1. 必须包含144*144的图标文件；
2. service worker技术生效；
二、离线化能力
要想实现离线化能力，必须有一个生命周期高于网页应用的线程，service worker是一种独立于浏览器主线程的工作线程，独立于浏览器主线程，这是它天生具有离线的能力。
service worker的生命周期如下：
注册 -> 安装 -> 激活 -> idle
1. 在主线程成功注册 Service Worker 之后，开始下载并解析执行 Service Worker 文件，执行过程中开始安装 Service Worker，在此过程中会触发 worker 线程的 install 事件。
2. 如果 install 事件回调成功执行（在 install 回调中通常会做一些缓存读写的工作，可能会存在失败的情况），则开始激活 Service Worker，在此过程中会触发 worker 线程的 activate 事件，如果 install 事件回调执行失败，则生命周期进入 Error 终结状态，终止生命周期。
3. 完成激活之后，Service Worker 就能够控制作用域下的页面的资源请求，可以监听 fetch 事件。
4. 如果在激活后 Service Worker 被 unregister 或者有新的 Service Worker 版本更新，则当前 Service Worker 生命周期完结，进入 Terminated 终结状态。
主线程注册：
worker线程进行install事件，在这个过程中可以预缓存一些app shell需要的js、css文件
fetch可以拦截所有页面发送的请求，在这个阶段可以缓存动态请求内容。
针对缓存资源的管理，有以下几个缓存策略：
1. Network First， 优先发起网络请求失败的话，在缓存中读取资源
2. Cache First，优先获取本地缓存，缓存中读取失败再发起网络请求。这种比较适合本地预缓存文件。
3. Network Only，只通过网络请求获取资源，这种对数据实时性要求比较严格。
4. Cache Only，只通过缓存获取资源
5. Stale While Revalidate，和cache first有点像，不同的是无论本地资源读取有没有成功，都回去网络请求一份更新本地缓存。
通过以上数据缓存，可以尝试将网络断开，重新刷新页面，可以看到网页依然能够正常打开，基本实现了离线缓存的功能。下一篇讲解本地资源的存储管理以及存储位置。
