PWA(Progressive Web App)入门系列：（一）PWA简介_H5之家

前言

PWA做为一门Google推出的WEB端的新技术，好处不言而喻，但目前对于相关方面的知识不是很丰富，这里我推出一下这方面的入门教程系列，提供PWA方面学习。

什么是PWA

PWA全称Progressive Web App，直译是渐进式WEB应用，是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。

所谓的P（Progressive）这里有两层含义，一方面是渐进增强，让WEB APP的体验和功能能够用渐进增强的方式来更接近原生APP的体验及功能；另一方面是指下一代WEB技术，PWA并不是描述一个技术，而是一些技术的合集。

技术分享

PWA特性

技术分享

PWA优、缺点优点：

上面提到的，所有这些现代 Web 特性。

Web最重要的意义在于开放和去中心化，这才是万维网的初衷

缺点： PWA关键技术 Manifest（应用清单）

Web App Manifest是一个W3C规范，定义了一个基于JSON的清单，为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。manifest 就是 PWA 概念的一环，它给你了控制你的应用如何出现在用户期待出现的地方（比如用户手机主屏幕），这直接影响到用户能启动什么，以及更重要的，用户如何启动它。

使用 web 应用程序清单，你的应用可以：

例如：

{ "lang": "en", "dir": "ltr", "name": "Donate App", "description": "This app helps you donate to worthy causes.", "short_name": "Donate", "icons": [{ "src": "icon/lowres.webp", "sizes": "64x64", "type": "image/webp" },{ "src": "icon/lowres.png", "sizes": "64x64" }, { "src": "icon/hd_hi", "sizes": "128x128" }], "scope": "/racer/", "start_url": "/racer/start.html", "display": "fullscreen", "orientation": "landscape", "theme_color": "aliceblue", "background_color": "red", "serviceworker": { "src": "sw.js", "scope": "/racer/", "use_cache": false }, "screenshots": [{ "src": "screenshots/in-game-1x.jpg", "sizes": "640x480", "type": "image/jpeg" },{ "src": "screenshots/in-game-2x.jpg", "sizes": "1280x920", "type": "image/jpeg" }] }

技术分享

Service Workers

Service Worker是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。这个 API 之所以令人兴奋，是因为它可以支持离线体验，让开发者能够全面控制这一体验。

ServiceWorker是由两部分构成，一部分是 cache，还有一部分则是 Worker。

它被设计为一个相对底层、高度可编程、子概念众多，也因此异常灵活且强大的 API，它就像一个位于客户端和网络之间的代理，可以拦截、处理、响应流经的网络请求，配合Cache API，你可以自由管理网络请求文件的缓存，这使得 Service Worker 可以从缓存中向 web 应用提供资源，即使是在离线的环境下。这样，在离线和网速低的情况下也能秒开，说白了，之前的Hybrid架构的出现不就是为了这个功能么。之前虽然有AppCache，但它具有相当多的缺陷，这里就不说了。

来张官网的形象图：

技术分享

Push Notification（推送通知）

Push 和 Notification是两个不同的功能，涉及到两个API，但是它们之前有依赖关系。

Notification这块应该大家多少了解一些，属于浏览器发出的通知消息，之前需要浏览器一直开着才能实现这种通知，但是现在有了上面提到的Service Worker，就可以驻留在进程里面操作了。

Push & Notification关系：

Push : 服务器端将更新的信息传递给 Service Worker

Notification: Service Worker 将更新的信息推送给用户

技术分享

PWA与其它App的对比

目前的移动端APP：

Native APP

Native APP，指原生App，是一个完整的App，可拓展性强，需要用户下载安装使用。

优点：

缺点：

Web APP

Web App 指采用Html5语言写出的App，生活在浏览器里的应用，不需要下载安装。

优点：

缺点：

Hybrid App

Hybrid APP指的是半原生半Web的混合类App，需要下载安装。

优点：

缺点：

PWA兼容性

Blink内核（Chrome、Oprea、Samsung Internet 等）和 Gecko内核（Firefox）和Microsoft Edge都已经实现了 PWA 所需的所有关键技术的支持，但IOS的Safari（Webkit），目前不支持PWA的API。

不过在2015年Webkit的5年计划里面，已经提及了Service Worker，相信很快就能实现。

PWA在中国

Google的技术在国内推进是很痛苦的，Android虽然近年来在国内不错，但PWA在国内的发展有很多困难。

PWA的未来

总的来说，PWA还是很不错的，虽然PWA在国内的体验目前有一些限制，但相信PWA在国内的春天肯定会来的。

这里引用一下黄玄说过的一句话：