class="topic_img" alt=""/>
来自：thoughtworkers
文/汪志成
资深 ThoughtWorker。Google 开发者专家（Web 领域）。儒家信徒，好为人师，好为人师。崇尚简单、专业、分享。个人站点：https://wx.angular.cn
作为一个程序员，这两天的朋友圈被微信小应用刷屏了吧？想试了吧？没拿到邀请吧？没关系，我来帮你！
当然，我没法帮你拿到邀请码 —— 因为我也没有。不过，别失望，我今天要跟大家谈一项比微信小程序更宏观的概念 —— Google 提出的 PWA。
PWA 是什么？
PWA 全称是“Progressive Web Apps”，译成中文就是渐进式应用。这是 Google 在 2015 年 6 月 15 日提出的概念，参见 Alex Russell 写的《Infrequently Noted》。
那么，什么是渐进式应用呢？
Alex 写道：
在昨天的晚餐上，我和 Frances 列举出了新型应用的几个特征：
- 响应式：适应任何形态因素
- 不依赖网络：在 Service Worker（H5 中的新技术，appcache 的升级版）的支持下能够离线使用
- 像本地应用一样交互：采用“壳+内容”模式来实现类似本地应用的浏览和交互体验
- 保持最新：始终透明的升级到最新版，这要感谢 Service Worker 提供的升级机制
- 安全：通过 TLS（这是 Service Worker 所要求的）来防止通讯被窥探
- 可发现的：具有像“应用”一样的唯一标识，这要感谢 W3C 的 Manifest 文件格式，它在“Service Worker”中注册的 scope 能允许搜索引擎发现这些应用。
- 可“再接触”的：可以访问操作系统的“可再接触”界面，比如推送通知
- 可安装的：通过浏览器提供的提示，可以把它加入主屏，允许用户把觉得有用的应用“保留”下来，而不用到应用商店去安装，那样太麻烦了。
- 可链接的：这意味着它们是零阻力、零安装，并且易于共享的。URL 更能发挥社交传播的能量。
PWA 怎么用？
一个 PWA 的使用过程大概是这样的：
这货开始就是一个普通网页：
然后，这是什么鬼？
这网站看着还不错，那就接受吧！
它出现在手机的首屏了，以后随叫随到！
点了就能像一个本地应用那样启动它：
看，启动完也跟一个本地应用没有区别：
PWA 的好处
Web 应用（网页）和本地应用（App）各有优势，比如：
那么，它们能否合二为一呢？这就是 PWA 所做的事！
通过前面提到的这些步骤，PWA 可以让用户同时获得这两种好处。这无论对于用户本身还是对于应用的开发者都非常有意义。
如何实现 PWA？
其实从 Alex 的描述中就可以看到，在技术上我们离实现 PWA 并不远：
Web 应用开发技术
已经具备。
特别是得益于 Angular 等 SPA 应用的普及，SPA 不但响应更加快速，更加接近原生应用的操作体验，而且让我们可以完全不依赖服务器工作。
离线存储技术
可能有人还记得一项叫 AppCache 的技术，它已经废弃了，现在被 Service Worker 所取代。这是一个更强大的 AppCache，它不仅能存储 HTML/JS 等静态文件，而且还让你能够在客户设备上运行起一个仿真的超轻量级 Web 服务器，你在里面已经几乎可以写 Node 程序了！
这是新的 H5 标准的一部分，而不是 PWA 特有的。
推送通知
H5 标准中已经有了用来推送通知的 API（用过 Web Gmail 的话应该见过），现在只要把它和操作系统的 API 对接就行了。当然，这最好由操作系统提供支持，这已经实现了，那就是新推出的 Android 7。
App 壳程序
这个壳程序其实自己来实现也没问题，技术上没啥难度，不过不用重复造轮子了，因为官方已经出了一个，参见 https://github.com/GoogleChrome/application-shell。如果用 Angular 2 就更幸福了，因为 Angular 2 还制作了一个 Angular 2 专用的壳：https://github.com/angular/mobile-toolkit。不过，它现在还处于未发布状态，早鸟可以开始提前尝试了。
微信小程序与 PWA
虽然”微信小程序”概念的提出比 PWA 晚了半年，不过相信张小龙这个级别的产品经理不会是简单的抄袭 PWA 概念，而是会发挥微信生态圈的优势，提供更广阔的应用场景。或许我们应该把微信小程序看做 PWA 的一种优质实现。
相关文章
