PWA 简介
什么是渐进式
PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，那么，什么是渐进式呢？我觉得渐进式有两个层面的意思：
一是通过各种 Web 技术实现与原生 App 相近的用户体验，即Web 应用渐进式接近原生 App。
二是由于在当时的背景下，一些浏览器暂时不支持，可以利用 PWA 相关技术，给支持 PWA 的浏览器用户带来更好的体验。
另外，也许你听过渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）这两个概念。
渐进增强：针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。
优雅降级：构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
PWA 本质上是 WEB 应用，所以，我觉得这种“渐进式”其实是一种渐进增强的理念。
PWA 的概念
PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。
纵观现有 Web 应用与原生应用的对比差距，如离线缓存、沉浸式体验等等，可以通过已经实现的 Web 技术去弥补这些差距，最终达到与原生应用相近的用户体验效果。
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 实现添加至主屏幕， 通过 Service Worker 来实现离线缓存和消息推送等功能。
Web Application Manifest[11]，即通过一个清单文件向浏览器暴露 web 应用的元数据，包括名称、icon 的 URL 等，以备浏览器使用，比如在添加至主屏或推送通知时暴露给操作系统，从而增强 web 应用与操作系统的集成能力。
我们原有的整个 Web 应用模型，都是构建在「用户能上网」的前提之下的，所以一离线就只能玩小恐龙了。其实，对于「让 web 应用离线执行」这件事，最早可以追溯到 2007 年的 Google Gears：为了让自家的 Gmail、Youtube、Google Reader 等 web 应用可以在本地存储数据与离线执行，Google 开发了一个浏览器拓展来增强 web 应用。Google Gears 支持 IE 6、Safari 3、Firefox 1.5 等浏览器；要知道，那一年 Chrome 都还没出生呢。
Gears，前身为 Google Gears，是由 Google 提供的已停产的实用软件，用于通过向 Web 浏览器添加离线存储和其他附加功能来创建更强大的 Web 应用程序。Gears 是在没有可比替代品的时候构思的，后来，Gears 被终止，取而代之的是最终流行 的标准化 HTML5 方法。在 Gears API 中，我们通过向 LocalServer 模块提交一个缓存文件清单来实现离线支持。
Service Worker 是一个可编程的 Web Worker，它就像一个位于浏览器与网络之间的客户端代理，可以拦截、处理、响应流经的 HTTP 请求；配合随之引入 Cache Storage API，你可以自由管理 HTTP 请求文件粒度的缓存，这使得 Service Worker 可以从缓存中向 web 应用提供资源，即使是在离线的环境下。
PWA 实现
实现
一个简单的 PWA demo 很简单，新建项目目录，然后：
touch index.html touch sw.js npm install serve -g
之后进行简单的 html 和 sw.js 文件的编写，最后通过 manifest.json 实现添加到桌面功能，完整代码可以查看这里[12]。
// manifest.json { "name": "Progressive Web App", "short_name": "PWA", "description": "Progressive Web App.", "icons": [ { "src": "/icon.png", "sizes": "288x288", // 这里需要格外注意图片的尺寸，如果图片有问题，调试页面Manifest里会给你提示 "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#B12A34", "background_color": "#B12A34" }
示例 demo：
通过对 manifest.json 进行相应配置，可以实现以下功能：
App Shell 模型
另外，我觉得有必要介绍一下的是 App Shell 模型。
App Shell 架构[13]是构建 Progressive Web App 的一种方式，这种应用能可靠且即时地加载到您的用户屏幕上，与本机应用相似。
App“shell”是支持用户界面所需的最小的 HTML、CSS 和 JavaScript，如果离线缓存，可确保在用户重复访问时提供即时、可靠的良好性能。这意味着并不是每次用户访问时都要从网络加载 App Shell，只需要从网络中加载必要的内容。
对于使用包含大量 JavaScript 的架构的单页应用来说，App Shell 是一种常用方法。这种方法依赖渐进式缓存 Shell（使用 Service Worker 线程）让应用运行，接下来，为使用 JavaScript 的每个页面加载动态内容。App Shell 非常适合用于在没有网络的情况下将一些初始 HTML 快速加载到屏幕上。
从微博 Lite 看 PWA
安装 PWA：
安装后，PWA 应用就会出现在桌面/Chrome 应用里面：
从下图可以看出，点击桌面图标打开后，我们可以选择卸载 PWA，图标将会从桌面移除；同时，我们还可以发现，微博 Lite 除了缓存图片、JS、CSS 等静态资源外，也会缓存接口：
当我们将网络设置成离线时，刷新页面，依然可以继续浏览页面上上次加载过的信息，提升用户体验：
PWA 的优势与劣势
在这些存在的问题里面，简单介绍一下摩尔定律。
个人认为，摩尔定律是芯片领域的 OKR。摩尔在 1965 年文章中指出，芯片中的晶体管和电阻器的数量每年会翻番，原因是工程师可以不断缩小晶体管的体积。这就意味着，半导体的性能与容量将以指数级增长，并且这种增长趋势将继续延续下去。1975 年，摩尔又修正了摩尔定律，他认为，每隔 24 个月，晶体管的数量将翻番。
晶体管数量翻倍带来的好处可以总结为：更快，更小，更便宜。根据摩尔定律，芯片设计师的主要任务便是缩小晶体管的大小，然后让芯片能够容纳越多的晶体管。晶体管的增加可以让设计师为芯片添加更多的功能，比如 3D 显卡，从而节约成本。
可以看出，摩尔定律是和我们书本上看到的公式、定理存在很大区别的，它更多的是一个经验总结，是芯片领域自驱的 OKR。
如果说一开始人们埋怨手机内存和流量资费的限制，而不想安装太多的 App，根据摩尔定律，现在的手机内存与硬件都在提升，运营商资费下调。这使得 PWA 最初得以出现的根基开始动摇。所以，PWA 现在国内面临的处境即：用户不知道，也不会用，开发者不见得支持，也不如小程序友好。
尽管有上述的一些缺点，PWA 技术仍然有很多可以借鉴和使用的点：
- Service Worker 技术实现离线缓存，可以将一些不经常更改的静态文件放到缓存中，提升用户体验。
- Service Worker 实现消息推送，使用浏览器推送功能，吸引用户
- 渐进式开发，尽管一些浏览器暂时不支持，可以利用上述技术给使用支持浏览器的用户带来更好的体验。
当然，在通知这一块儿，抛开 PWA 不谈，浏览器通知 API Notification[14]也是一个不错的选择。
