PWA
先了解下浏览器的三大进化路线：
- 第一个是运用程序 Web 化；
- 第二个是 Web 运用移动化；
- 第三个是 Web 操作系统化；
其中，第二个 Web 运用移动化是 Google 梦寐以求而又一直在发力的一件事，不过对于移动设备来说，前有本地 App，后有移动小程序，想要浏览器切入到移动端是适当困难的一件事，由于浏览器的运转功用是低于本地 App 的，而且 Google 也没有类似微信或许 Facebook 这种体量的用户群体。
但是要让浏览器切入到移动端，让其取得和原生运用同等待遇可是 Google 的愿望，那该怎么做呢？
这便是咱们本节要聊的 PWA。那什么是 PWA？PWA 又是以什么方式切入到移动端的呢？
PWA，全称是 Progressive Web App，翻译过来便是渐进式网页运用。根据字面意思，它便是“渐进式 + Web 运用”。对于 Web 运用很好了解了，便是现在咱们一般的 Web 页面，所以 PWA 所支撑的首先是一个 Web 页面。至于“渐进式”，就需求从下面两个方面来了解。
- 站在 Web 运用开发者来说，PWA 供给了一个渐进式的过渡计划，让一般站点逐步过渡到 Web 运用。采取渐进式能够降低站点改造的价值，使得站点逐步支撑各项新技能，而不是一步到位。
- 站在技能视点来说，PWA 技能也是一个渐进式的演化过程，在技能层面会一点点演进，比方逐步供给更好的设备特性支撑，不断优化更加流畅的动画效果，不断让页面的加载速度变得更快，不断完成本地运用的特性。
从这两点能够看出来，PWA 采取的是十分一个平缓的渐进式策略，不再像曾经那样激进，动不动便是替代本地 App、替代小程序。与之相反，而是要充分发挥 Web 的优势，渐进式地缩短和本地运用或许小程序的间隔。
那么 Web 最大的优势是什么呢？我认为是自在敞开，也正是由于自在和敞开，所以大家就很容易对同一件事情到达一致，到达一致之后，一套代码就能够运转在各种设备之上了，这便是跨渠道，这也恰恰是本地运用所不具备的。而对于小程序，倒是能够完成跨渠道，但要让各家到达一致，现在来看，似乎仍是十分不切实际的。
所以我给 PWA 的界说便是：它是一套理念，渐进式增强 Web 的优势，并经过技能手段渐进式缩短和本地运用或许小程序的间隔。根据这套理念之下的技能都能够归类到 PWA。
那今天咱们就首要来聊聊 PWA 首要采用了哪些技能手段来缩短它和本地运用或许小程序的间隔。
Web 运用 VS 本地运用
那相对于本地运用，Web 页面到底短少了什么？
- 首先，Web 运用短少离线运用能力，在离线或许在弱网环境下基本上是无法运用的。而用户需求的是沉浸式的体会，在离线或许弱网环境下能够流畅地运用是用户对一个运用的基本要求。
- 其次，Web 运用还短少了音讯推送的能力，由于作为一个 App 厂商，需求有将音讯送到达运用的能力。
- 最后，Web 运用短少一级入口，也便是将 Web 运用安装到桌面，在需求的时分直接从桌面翻开 Web 运用，而不是每次都需求经过浏览器来翻开。
针对以上 Web 缺陷，PWA 提出了两种处理计划：经过引入 Service Worker 来试着处理离线存储和音讯推送的问题，经过引入 manifest.json 来处理一级入口的问题。下面咱们就来具体分析下 Service Worker 是怎么工作的。
什么是 Service Worker
咱们先来看看 Service Worker 是怎么处理离线存储和音讯推送的问题。
其实在 Service Worker 之前，WHATWG 小组就推出过用 App Cache 规范来缓存页面，不过在运用过程中 App Cache 所露出的问题比较多，遭到多方吐槽，所以这个规范最终也只能被抛弃了，可见一个成功的规范是需求阅历实践考量的。
所以在 2014 年的时分，规范委员会就提出了 Service Worker 的概念，它的首要思维是在页面和网络之间增加一个阻拦器，用来缓存和阻拦恳求。
在没有安装 Service Worker 之前，WebApp 都是直接经过网络模块来恳求资源的。安装了 Service Worker 模块之后，WebApp 恳求资源时，会先经过 Service Worker，让它判断是回来 Service Worker 缓存的资源仍是重新去网络恳求资源。一切的控制权都交由 Service Worker 来处理。
Service Worker 的规划思路
现在咱们知道 Service Worker 的首要功用便是阻拦恳求和缓存资源，接下来咱们就从 Web 运用的需求视点来看看 Service Worker 的规划思路。
1. 架构
咱们知道 JavaScript 和页面烘托流水线的任务都是在页面主线程上履行的，假如一段 JavaScript 履行时间过久，那么就会阻塞主线程，使得烘托一帧的时间变长，然后让用户产生卡顿的感觉，这对用户来说体会是十分不好的。
为了避免 JavaScript 过多占用页面主线程时长的情况，浏览器完成了 Web Worker 的功用。Web Worker 的目的是让 JavaScript 能够运转在页面主线程之外，不过由于 Web Worker 中是没有当前页面的 DOM 环境的，所以在 Web Worker 中只能履行一些和 DOM 无关的 JavaScript 脚本，并经过 postMessage 办法将履行的成果回来给主线程。所以说在 Chrome 中， Web Worker 其实便是在烘托进程中开启的一个新线程，它的生命周期是和页面相关的。
“让其运转在主线程之外”便是 Service Worker 来自 Web Worker 的一个中心思维。不过 Web Worker 是临时的，每次 JavaScript 脚本履行完成之后都会退出，履行成果也不能保存下来，假如下次还有相同的操作，就还得重新来一遍。所以 Service Worker 需求在 Web Worker 的根底之上加上贮存功用。
另外，由于 Service Worker 还需求会为多个页面供给服务，所以还不能把 Service Worker 和单个页面绑定起来。在现在的 Chrome 架构中，Service Worker 是运转在浏览器进程中的，由于浏览器进程生命周期是最长的，所以在浏览器的生命周期内，能够为所有的页面供给服务。
2. 音讯推送
音讯推送也是根据 Service Worker 来完成的。由于音讯推送时，浏览器页面也许并没有启动，这时就需求 Service Worker 来接纳服务器推送的音讯，并将音讯经过必定方式展示给用户。关于音讯推送的细节就不详述了，感兴趣的话能够自行查找相关资料去学习。
总结
好了，就介绍到这儿，下面总结下本文的首要内容。
咱们先分析了 PWA，它是由许多技能组成的一个理念，其中心思维是渐进式。对于开发者，它供给了十分温和的方式，让开发者将一般的站点逐步过渡到 Web 运用。对于技能自身而言，它是渐进式演进，逐步将 Web 技能发挥到极致的同时，也逐步缩小和本地运用的距离。在此根底上，咱们又分析了 PWA 中的 Service Worker 的规划思路。
另外，PWA 还供给了 manifest.json 配置文件，能够让开发者自界说桌面的图标、显现称号、启动方式等信息，还能够设置启动画面、页面主题色彩等信息。关于 manifest.json 的配置仍是比较简单的，具体运用教程网上有许多，这儿就不做介绍了。
增加桌面标、增加离线缓存、增加音讯推送等功用是 PWA 走向设备的必备功用，但我认为真正决议 PWA 能否崛起的仍是底层技能，比方页面烘托效率、对系统设备的支撑程度、WebAssembly 等，而这些技能也在渐进式进化过程中。所以未来怎么，咱们拭目以待。
