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"

  }]

}

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVjZXBpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=" " title="">

Service Workers

Service Worker是浏览器在后台独立于网页执行的脚本，它打开了通向不须要网页或用户交互的功能的大门。

这个 API 之所以令人兴奋，是由于它能够支持离线体验，让开发人员能够全面控制这一体验。

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

它被设计为一个相对底层、高度可编程、子概念众多，也因此异常灵活且强大的 API，它就像一个位于client和网络之间的代理。能够拦截、处理、响应流经的网络请求，配合Cache API，你能够自由管理网络请求文件的缓存，这使得 Service Worker 能够从缓存中向 web 应用提供资源，即使是在离线的环境下。

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

之前尽管有AppCache。但它具有相当多的缺陷，这里就不说了。

来张官网的形象图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVjZXBpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=" " title="">

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 国际许可协议进行许可。