PWA(Progressive Web App)入门系列：（一）PWA简单介绍

---

前言

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

---

什么是PWA

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

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

---

PWA特性

• 渐进加强 - 可以让每一位用户使用。无论用户使用什么浏览器，因为它是始终以渐进加强为原则。
• 响应式用户界面 - 适应不论什么环境：桌面电脑，智能手机，笔记本电脑，或者其余设备。
• 不依赖网络链接 - 经过 service workers 可以在离线或者网速极差的环境下工做。
• 类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验，因为它是创建在 app shell model 上的。

• 持续更新 - 受益于 service worker 的更新进程，应用可以始终保持更新。
• 安全 - 经过 HTTPS 来提供服务来防止网络窥探。保证内容不被篡改。
• 可发现 - 得益于 W3C manifests 元数据和 service worker 的登记。让搜索引擎可以找到 web 应用。

• 再次訪问 - 经过消息推送等特性让用户再次訪问变得easy。
• 可安装 - 赞成用户保留对他们实用的应用在主屏幕上，不需要经过应用商店。
• 可链接性 - 经过 URL 可以轻松分享应用，不用复杂的安装就能够执行。

---

PWA优、缺点

长处：

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

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

缺点：

• 门槛不低。部署的server要求HTTPS，ServiceWorker涉及API众多，需要单独学习
• 浏览器支持不够全面。苹果Safari 短期内不会支持，5 年计划里可能实施
• 用户体验习惯。

  网页应用替代原生应用的方式，用户短期内不适应

---

PWA关键技术

Manifest（应用清单）

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

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

• 可以真实存在于用户主屏幕上
• 在 Android 上可以全屏启动，不显示地址栏
• 控制屏幕方向已得到最佳效果
• 定义启动画面，为你的站点定义主题
• 追踪你的应用是从主屏幕仍是 URL 启动的

好比：

{
  "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，它就像一个位于client和网络之间的代理。可以拦截、处理、响应流经的网络请求，配合Cache API，你可以自由管理网络请求文件的缓存，这使得 Service Worker 可以从缓存中向 web 应用提供资源，即便是在离线的环境下。

这样。在离线和网速低的状况下也能秒开。说白了，以前的Hybrid架构的出现不就是为了这个功能么。

以前尽管有AppCache。但它具备至关多的缺陷，这里就不说了。

来张官网的形象图：

Push Notification（推送通知）

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

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

Push & Notification关系：

• Push : server端将更新的信息传递给 Service Worker
• Notification: Service Worker 将更新的信息推送给用户

---

PWA与其余App的对照

眼下的移动端APP：

• Native APP
• Web App
• Hybrid App

Native APP

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

长处：

• 可以使用移动设备所有功能
• 速度快、性能高、用户体验好
• 离线使用

缺点：

• 开发成本高、维护成本高
• 每个不通的平台都要又一次开发
• 应用商店审核复杂，效率低

Web APP

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

长处：

• 跨平台开发、无需下载、无需安装,开发速度快
• 公布灵活。因为根本不需要应用商店的审核
• 较低的开发成本
• 可即时上线
• 用户可以直接使用最新版本号
• 支持设备普遍

缺点：

• 仅仅能使用有限的移动设备API
• 浏览器兼容问题
• 没法上传到应用商店
• 用户临时不适用

Hybrid App

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

长处：

• 兼容多平台
• Web前端工做人员就可高速构建
• 可以上传到应用商店
• 可以基于浏览器的方式进行页面调试
• 可以使用的移动设备的API多

缺点：

• 用户体验不如原生应用
• 为模拟原生样式。需要大量的html和css
• 性能稍慢
• 技术不是很是成熟

---

PWA兼容性

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

只是在2015年Webkit的5年计划里面，已经说起了Service Worker。相信很是快就能实现。

---

PWA在中国

• 国在IPhone不在少数，而IOS眼下是不支持PWA的
• 国内Android系统，大部分早已把Google框架移除了。因此兼容性会出问题
• 推送依赖于GCM。而国内Google是没法訪问的

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

---

PWA的将来

总的来讲，PWA仍是很是不错的，尽管PWA在国内的体验眼下有一些限制，但相信PWA在国内的春天确定会来的。

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

请不要让 web 再继续离咱们远去，浏览器厂商们已经又一次走到了一块儿，而下一棒将是交到咱们 web 应用开发人员的手上。乔布斯曾相信 web 应用才移动应用的将来，那就让咱们用代码证实给这个世界看吧。

让咱们的用户，也像咱们这般热爱 web 吧”

---

PWA应用体验

Progressive Web Apps：站点内含有需要PWA应用，你们可以体验一下。

---

这一章作了一下PWA的相关介绍。后面章节会具体对PWA API进行具体说明。

---

博客名称：王乐平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本做品採用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。