一、响应式网页应用-PWA介绍
响应式网页应用-PWA是Progressive Web App的英文缩写，渐进式增强WEB应用。一个为响应式设计的“保护伞”式的术语，是 Google 在2015年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。独立连接性、新颖、安全、可探索、可重定制、可安装性、可链接的应用web站点，并带有原生应用般的交互性能。
二、PWA 的优势
1、消息推送。用户只要允许，即使网页关闭后仍然可以在系统通知栏收到推送消息。
2、后台加载。往常的网页应用只要关闭了网页他的生命就结束了，现在引入了一个 Service Worker 的概念，即使网页关闭，PWA 仍然可以在后台运行获取数据更新（当然有限制）。离线使用。PWA 打开后会缓存一些内容，之后再次访问即使没有网络也可以浏览之前的页面（如同IE时代的离线浏览）。
3、原生应用界面。在某些情况下 PWA 应用可以隐藏浏览器本身的所有视觉成分，光从UI和UX上看，很容易认为这就是一个原生界面，如下图其实都是PWA而不是原生应用。
4、桌面图标。PWA只要配上一个图标，再放快捷方式在桌面上，就真的和原生系统无异了，打开的速度也很快。另一方面，和原生应用比，PWA 又不需要用户安装，只需要浏览器支持 PWA 就可以了。
三、PWA中包含的核心功能及特性如下：
- Web App Manifest
- Service Worker
- Cache API 缓存
- Push&Notification 推送与通知
- Background Sync 后台同步
- 响应式设计
四、Service Worker 介绍
Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静静更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求的功能，包括可编程的消息缓存管理能力，是PWA的核心。
五、Service Worker 工作原理
Service worker 是一个完全独立于 Web 页面的 js 脚本，有他自己的生命周期。每个 service worker 会对应一个缓存池，每个缓存池有多个缓存仓库。
首先讲讲它的声明周期：
若网站对应的 cacheName 没有 install，则首先触发 install事件。
若install失败，则退出等待下次访问再启动；否则触发activate事件。
在activate中，判断当前页面是否在上文声明的 filesToCache 列表中，如果是则接管网页的显示。接管网页以后，如果当前内存不足，会被杀死；否则等待处理fetch和message事件。这两个事件一个是当网络请求时，或者其他网页发出了消息时。