pwa

1.pwa是什么：

PWA的中文名叫做渐进式网页应用。

PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。

需要特别说明的是，PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push，等等。

PWA的核心目标就是提升 Web App 的性能，改善 Web App 的用户体验。媲美native的流畅体验，将网络之长与应用之长相结合。

2.pwa的特点

3.离线使用：

1、PWA 另一项令人兴奋的特性就是可以离线使用,其背后用到的技术是 Service worker ;

2、Service worker实际上是一段脚本，在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 Web 交互行为。Service Worker 的出现是正是为了使得 Web App 也可以做到像 Native App 那样可以离线使用、消息推送的功能。

我们可以把Service worker当做是一种客户端代理 。

Service Worker 是一段脚本，与 Web Worker 一样，也是在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 Web 交互行为。Native App 可以做到离线使用、消息推送、后台自动更新，Service Worker 的出现是正是为了使得 Web App 也可以具有类似的能力。

Service Worker 脚本通过 navigator.serviceWorker.register 方法注册到页面, 之后可以脱离页面在浏览器后台运行。

生命周期：

• parsed: 注册完成, 脚本解析成功, 尚未安装
  
• installing: 对应 Service Worker 脚本 install 事件执行, 如果事件里有 event.waitUntil() 则会等待传入的 Promise 完成才会成功
  
• installed(waiting): 页面被旧的 Service Worker 脚本控制, 所以当前的脚本尚未激活。可以通过 self.skipWaiting() 激活新的 Service Worker
  
• activating: 对应 Service Worker 脚本 activate 事件执行, 如果事件里有 event.waitUntil() 则会等待这个 Promise 完成才会成功。这时可以调用 Clients.claim() 接管页面
  
• activated: 激活成功, 可以处理 fetch, message 等事件
  
• redundant: 安装失败, 或者激活失败, 或者被新的 Service Worker 替代掉

Service Worker 脚本最常用的功能是截获请求和缓存资源文件, 这些行为可以绑定在下面这些事件上:

• install 事件中, 抓取资源进行缓存
  
• activate 事件中, 遍历缓存, 清除过期的资源
  
• fetch 事件中, 拦截请求, 查询缓存或者网络, 返回请求的资源