共计 3337 个字符，预计需要花费 9 分钟才能阅读完成。
（ps: 有一段时间没发文了，忙得不可开交，之前团队分享 PWA，答应大家整理出来，终于结稿了~）
PWA 简介
PWA，英文全称是 Progressive Web App，2015 年 由 Google 提出。PWA 是提升 Web App 的体验的一种新方法，能给用户原生应用的体验，兼具了 Web App 和 Native App 的优点。
PWA 主要特性
可靠 – 即使在不稳定的网络环境下，也能瞬间加载并展现；
体验 – 快速响应，并且有平滑的动画响应用户的操作；
粘性 – 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面。
特点：
渐进式 – 适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。自适应 – 适合任何机型：桌面设备、移动设备、平板电脑或任何未来设备。
连接无关性 – 能够借助于服务工作线程在离线或低质量网络状况下工作。
类似应用 – 由于是在 App Shell 模型基础上开发，因此具有应用风格的交互和导航，给用户以应用般的熟悉感。
持续更新 – 在服务工作线程更新进程的作用下时刻保持最新状态。
安全 – 通过 HTTPS 提供，以防止窥探和确保内容不被篡改。
可发现 – W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们，从而将其识别为“应用”。
可再互动 – 通过推送通知之类的功能简化了再互动。
可安装 – 用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。
可链接 – 可通过网址轻松分享，无需复杂的安装。
PWA 本身强调渐进式，但并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。
PWA 功能丰富，相比原生应用更加轻量。我们可以把 PWA 网站添加到桌面上，不管在 PC 端还是移动端，都类似于一个原生应用，并且拥有媲美原生应用的体验。它也拥有原生 APP 应用一般的启动闪屏，也可以进行消息推送——不过要知道，它源自 Web，通常只有传统 APP 的体积的十分之一甚至更小。它不用等待下载安装的时间，打开网页的时候就已经「下载」并且「安装」完毕。
APP Shell
App Shell 架构是构建 PWA 的一种方式，这种应用能可靠且即时地加载到您的用户屏幕上，与本机应用相似。
定义
App Shell 是支持用户界面所需的最小的 HTML、CSS 和 JavaScript，如果离线缓存，可确保在用户重复访问时提供即时、可靠的良好性能。这意味着并不是每次用户访问时都要从网络加载 App Shell。只需要从网络中加载必要的内容。看下面这张图来了解下：
构建单页应用时，可以使用 APP Shell，它依赖渐进式缓存 Shell（使用服务工作线程）让应用运行。App Shell 非常适合用于在没有网络的情况下将一些初始 HTML 快速加载到屏幕上。
App Shell 应能完美地执行以下操作：
快速加载
尽可能使用较少的数据
使用本机缓存中的静态资产
将内容与导航分离开来
检索和显示特定页面的内容（HTML、JSON 等）
可选：缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容，但同时不影响网络的可链接性和可检测性。用户下次访问同一应用时，应用会自动显示最新版本。无需在使用前下载新版本。
Service Worker 与离线存储
依赖
Service Worker 作为现代浏览器的高级特性，依赖于 fetch、promise、CacheStorage、Cache API、等浏览器的基础能力，Cache 提供了 Request / Response 对象对的存储机制。CacheStorage 则提供了存储 Cache 对象的机制。
功能和特性：
一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。
一旦被 install，就永远存在，除非被手动 unregister
用到的时候可以直接唤醒，不用的时候自动睡眠
可编程拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）
离线内容开发者可控
能向客户端推送消息
不能直接操作 DOM
必须在 HTTPS 环境下才能工作
异步实现，内部大都是通过 Promise 实现
注意：
SW 通过 postMessage 与页面之间通信，让页面自己去操作 DOM
是一个可编程的网络代理，允许开发者控制页面上处理的网络请求
在不被使用的时候，它会自己终止，而当它再次被用到的时候，会被重新激活，所以你不能依赖于 service worker 的 onfecth 和 onmessage 的处理函数中的全局状态
如果你想要保存一些持久化的信息，你可以在 service worker 里使用 IndexedDB API
只能在 HTTPS 环境下才能使用 SW，因为 SW 的权利比较大，能够直接截取和返回用户的请求
Push Notification（消息通知）Push 和 Notification 是两个不同的功能，涉及到两个 API。Notification 是浏览器发出的通知消息。Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW，Notification：SW 将更新的信息推送给用户。
IndexedDB 与异步存储
Web Storage 包括 Local Storage、Session Storage。它们使用简单的键值对来存储，方便灵活，但是它们的内存较小，当遇到大量的结构化数据时，就无法应对了。浏览器数据存储方式还有 IndexedDB、Web SQL 和 Cookie。接下来就来看下 IndexedDB，它能够在客户端存储大量的结构化数据。例如，在 PWA 应用中，我们可以用它来离线存储大量的聊天记录。
关于 IndexDB 的介绍，引用这篇文章中的一段话：
indexedDB 是 HTML5 提供的一种本地存储，一般用户保存大量用户数据并要求数据之间有搜索需要的场景，当网络断开的时候，可以做一些离线应用，它比 SQL 方便，不用去写一些特定的语句对数据进行操作，数据格式为 json。
IndexDB 使用索引高效检索的 API，如打开一个 IndexedDB 数据库，可以这样写 window.indexedDB.open(name)。需要注意的是，IndexDB 的功能之一就是它有异步的 API，类似于 ajax 请求。我们通过代码来了解下
如代码所示，打开数据库后，有以下几个回调：
onerror(err => {})
onsuccess(res => {})
onupgradeneeded(data => {})
分别处理数据库打开失败、成功的回调，以及请求数据库版本变化的回调。
IndexDB 在使用时，需要注意以下几点：
过大的数据不适合存放在 IndexDB，浏览器初始化分配是 50M
部分浏览器不支持 IndexDB，使用前先用 ”indexedDB” in window 判断下
敏感数据不能存在客户端
受到同源策略的限制
HTTPS
HTTPS，简单来讲就是 HTTP 的安全版，它是 HTTP over SSL/TLS 的缩写。PWA 只能在 HTTPS 协议下使用，本地开发时支持 localhost 和 127.0.0.1。https 下调试可以用 github page。
HTTPS 会对传输的数据进行加密，建立一个信息安全通道，来保证传输过程中的数据安全。同时，也会对网站服务器进行真实的身份认证。
关于 HTTPS，大家都比较熟悉，这里就不多赘述了。
入门与实践
关于 PWA 开发与调试的，题叶老师写了一篇文章 PWA 入门: 写个非常简单的 PWA 页面，介绍了如何开启一起简单的 PWA 应用，感兴趣的童鞋可以去看看。
总结
PWA 作为下一代 Web 应用模型，在国外非常受重视，在国内同样受到各大互联网企业的欢迎。去年饿了么也实现了一场 PWA 升级实践。之前看过一篇文章，说 PWA 在印度广受欢迎，因为当地 2 /3G 网络覆盖比较多，PWA 的优势就明显了。下面借用列出了一些站点，从最开始的 Flipcart，到目前的 Instangram、Uber、Twitter、Starbucks 等，不仅数量在增加，站点等级和质量也在不断地提升。
图片来源
篇幅有限，无法面面俱到，只能抛装引玉，欢迎批评指正~
参数资料
PWA（Progressive Web App）初探总结
讲讲 PWA
用新版的 Chrome 把 PWA 网站添加到桌面，获得媲美原生应用的体验
您的第一个 Progressive Web App
PWA 博客
App Shell 模型
