PWA程序相关介绍

官网上对PWA的宣传是这四个关键字：可靠、快速、Engaging、安全；再点进去PWA的主页，会发现还有Instant Loading、添加自主屏、通知推送、响应式，而官方教程就更棒了，一次性给了10个关键字！包括Progressive, App-like, Fresh, Installable……

什么是渐进式Web应用程序？
渐进式Web应用程序是：

渐进式 - 适用于所有用户，无论浏览器的选择是什么，因为它是以渐进式增强为核心宗旨而构建的。
响应 - 适用于任何形式的因素：桌面，手机，平板电脑或其他任何下一个。
独立连接 - 与服务工作人员进行离线或低质量网络工作。
App-like - 感觉就像一个应用程序，因为应用程序外壳模型将应用程序功能与应用程序内容分开。
新鲜 - 感谢服务人员更新过程始终保持最新状态。
安全 - 通过HTTPS提供防止窥探并确保内容未被篡改。
可发现 - 由于W3C清单和服务工作人员注册范围，可被识别为“应用程序” ，允许搜索引擎找到它。
重新参与 - 通过推送通知等功能让重新参与变得轻松。
可安装 - 允许用户添加他们认为对他们的主屏幕非常有用的应用程序，而无需应用程序商店的麻烦。
可链接 - 通过URL轻松共享应用程序，不需要复杂的安装。

PWA有何过人之处

1、Installability （可安装性）：说白了就是可被添加自主屏与全屏运行。
2、App Shell：说白了就是第一次渲染渲个壳、等异步数据来了再填充
3、Offline （离线能力）：说白了就是离线和弱网环境也能秒开，但是这个就牛逼了。Hybrid架构搞了那么久，说白了不就为的这个吗？之前有个东西叫Application Cache，但是那货就是个shit。所以这次Chrome搞了个Service Worker出来，给了Web一个可以跑在后台的线程，它可以搭配非常靠谱的Cache API做缓存、可以拦截所有HTTP请求并使用Fetch API进行response，一个非常完备的Proxy就这么诞生了。
4、Re-engageable：说白了，目前主要就是推送通知的能力。推送通知依赖Service Worker与HTTP Push
那么技术角度上，我对PWA的看法？
缺点：
门槛不低（要求 HTTPS；Service Worker也需要学习）；
浏览器支持（主要是Safari不愿意支持，只是在5年计划里提了一嘴）；
用户习惯（让用户习惯于网页可以离线工作真不是短期可以达到的）。

优点：
刚才提到的，所有这些现代 Web 特性；
由于这些都是“优雅降级、渐进增强” 的，给支持的设备更好的体验，不支持的设备也不会更差。
提高了用户体验
平均用户停留时长增长 65%
Web 站点发推的数量增长 75%
跳出率降低 20%

PWA 关键技术

Web App Manifest

Web App Manifest，即通过一个清单文件向浏览器暴露 web 应用的元数据，包括名字、icon 的 URL 等，以备浏览器使用，比如在添加至主屏或推送通知时暴露给操作系统，从而增强 web 应用与操作系统的集成能力。

2013 年，W3C WebApps 工作组开始对基于 JSON 的 Manifest 进行标准化，于同年年底发布第一份公开 Working Draft，并逐渐演化成为今天的 W3C Web App Manifest：

诸如 name、icons、display 都是我们比较熟悉的，而大部分新增的成员则为 web 应用带来了一系列以前 web 应用想做却做不到（或在之前只能靠 hack）的新特性：

scope：定义了 web 应用的浏览作用域，比如作用域外的 URL 就会打开浏览器而不会在当前 PWA 里继续浏览。
start_url：定义了一个 PWA 的入口页面。比如说你添加 Hux Blog 的任何一个文章到主屏，从主屏打开时都会访问 Hux Blog 的主页。
orientation：终于，我们可以锁定屏幕旋转了（喜极而泣…）
theme_color/background_color：主题色与背景色，用于配置一些可定制的操作系统 UI 以提高用户体验，比如 Android 的状态栏、任务栏等。
这个清单的成员还有很多，比如用于声明「对应原生应用」的 related_applications 等等，本文就不一一列举了。作为 PWA 的「户口本」，承载着 web 应用与操作系统集成能力的重任，Web App Manifest 还将在日后不断扩展，以满足 web 应用高速演化的需要。

Service Worker

我们原有的整个 Web 应用模型，都是构建在「用户能上网」的前提之下的，所以一离线就只能玩小恐龙了。其实，对于「让 web 应用离线执行」这件事，Service Worker 至少是 web 社区的第三次尝试了。

故事可以追溯到 2007 年的 Google Gears：为了让自家的 Gmail、Youtube、Google Reader 等 web 应用可以在本地存储数据与离线执行，Google 开发了一个浏览器拓展来增强 web 应用。Google Gears 支持 IE 6、Safari 3、Firefox 1.5 等浏览器；要知道，那一年 Chrome 都还没出生呢。

Service Worker 的生命周期

除了类似 fetch 这样的功能事件外，Service Worker 还提供了一组生命周期事件，包括安装、激活等等。比如，在 Service Worker 的「安装」事件中，我们可以把 web 应用所需要的资源统统预先下载并缓存到 Cache Storage 中去：

// sw.js
self.oninstall = (e) => {
e.waitUntil(
caches.open(‘installation’)
.then(cache => cache.addAll([
‘./’,
‘./styles.css’,
‘./script.js’
]))
)
});
这样，当用户离线，网络无法访问时，我们就可以从缓存中启动我们的 web 应用：

//sw.js
self.onfetch = (e) => {
const fetched = fetch(e.request)
const cached = caches.match(e.request)

e.respondWith(
fetched.catch(_ => cached)
)
}
可以看出，Service Worker 被设计为一个相对底层（low-level）、高度可编程、子概念众多，也因此异常灵活且强大的 API，故本文只能展示它的冰山一角。出于安全考虑，注册 Service Worker 要求你的 web 应用部署于 HTTPS 协议下，以免利用 Service Worker 的中间人攻击。笔者在今年 GDG 北京的 DevFest 上分享了 Service Worker 101，涵盖了 Service Worker 譬如「网络优先」、「缓存优先」、「网络与缓存比赛」这些更复杂的缓存策略、学习资料、以及示例代码，可以供大家参考。

Service Worker 的一种缓存策略：让网络请求与读取缓存比赛

Push Notification

PWA 推送通知中的「推送」与「通知」，其实使用的是两个不同但又相得益彰的 API：

Notification API 相信大家并不陌生，它负责所有与通知本身相关的机制，比如通知的权限管理、向操作系统发起通知、通知的类型与音效，以及提供通知被点击或关闭时的回调等等，目前国内外的各大网站（尤其在桌面端）都有一定的使用。Notification API 最早应该是在 2010 年前后由 Chromium 提出草案以 webkitNotifications 前缀方式实现；随着 2011 年进入标准化；2012 年在 Safari 6（Mac OSX 10.8+）上获得支持；2015 年 Notification API 成为 W3C Recommendation；2016 年 Edge 的支持；Web Notifications 已经在桌面浏览器中获得了全面支持（Chrome、Edge、Firefox、Opera、Safari）的成就。

在 PWA 中，我们利用 Service Worker 的后台计算能力结合 Push API 对推送事件进行响应，并通过 Notification API 实现通知的发出与处理：

// sw.js
self.addEventListener(‘push’, event => {
event.waitUntil(
// Process the event and display a notification.
self.registration.showNotification(“Hey!”)
);
});

self.addEventListener(‘notificationclick’, event => {
// Do something with the event
event.notification.close();
});

self.addEventListener(‘notificationclose’, event => {
// Do something with the event
});

组成 PWA 的各项技术的草案正是由上述各种私有方案背后的浏览器厂商或开发者直接贡献或间接影响的。可以说，PWA 的背后并不是某一家或两家公司，而是整个 web 社区与整个 web 规范。正是因为这种开放与去中心化的力量，使得万维网（World Wide Web）能够成为当今世界上跨平台能力最强、且几乎是唯一一个具备这种跨平台能力的应用平台。

参考链接：
PWA(Progressive Web App)入门系列：（一）PWA简介
简单介绍下PWA
google-渐进web程序
google开发者代码实验室
五分钟上手PWA(里面用了好多非主流技术)
下一代web应用模型
PWA初探
什么是PWA