微信小程序 Progressive Web App

这次我也做一回标题党，蹭一次热点话题。
近期，微信扔出一个还在内测阶段的技术，就炸翻了这个小圈子。吃瓜群众纷纷表示惊叹，甚是担心这个 “小程序” 会不会革了自己的命。个人认为，革命倒是不会，小程序本质上还是类似 H5，属于轻量级应用，大型复杂业务还是更适合使用原生应用来处理。不过，在处理小规模任务上，我们又多了一种不错的选择。

我们暂时不关心革命不革命的问题，转而思考更本质的东西 --- 我们需要一个什么样的小型应用？
我觉得应该是：

1. 快速获取
2. 快速加载
3. 快速响应
4. 跨平台的一致性体验

前三点可以总结为一个字，快。第四点则是因为客观上存在着种类繁多的设备类型，我们希望应用在大多数环境下都能保持一致的水准。
传统的 H5 应用可以做到快速获取 --- 你只需要一个网址，无需安装即可使用，也可以做到跨平台 --- 任何支持 H5 的浏览器均可得到一致的体验。但和原生应用相比，H5 应用的加载和响应速度（尤其是在网络不稳定的情况下）实在是令人难以接受，更不用提离线运行了。
假如网络存在波动，断开连接数秒钟，普通 H5 应用很可能就罢工显示 “未连接到互联网”。也许我们只是想发送一条消息，或者浏览已经加载完毕的内容，却引起了整个应用界面的崩溃。
不过我们可以很自然的想到解决思路 --- 能不能让 H5 应用拥有可控制的缓存机制？这样就无须从头加载，减少流量，提升相应效率，甚至实现完全离线的能力。

因此，很多组织和公司都推出了相应的解决方案。其中就包括本次介绍的两位主角：微信小程序 和 Progressive Web App ^[1]。

技术上

经过简单的了解，我发现两者其实使用了相似的技术：

首先要把界面部分缓存在本地，因为界面多是静态的，更新频率不高，把它缓存起来是靠谱的选择。这部分比较容易理解，关键在于如何处理动态数据或者界面更新呢？

为了解决这个问题，Progressive Web App 使用了称为 Service Worker 的技术，而微信小程序的官方说明中也指出 “逻辑层(App Service) ... 类似ServiceWorker，所以逻辑层也称之为App Service。”依此看，这两家应该是差不多。

那这个 Service Worker 或者 App Service 到底是个什么呢？
简单来说这个东西就是一个在网络和浏览器之间的 “中间层”。应用不直接向网络发起请求，而是通过一系列事件，与这个中间层进行交互，然后再由这个中间层去访问网络，获取数据。以前的网页缓存是不可控制的，而使用了上述技术，可实现可编程的离线能力。我们可以指定哪些内容需要被离线保存，当下次访问这些内容时，如果缓存可用，就可以读取缓存从而提升效率。而离线时，可直接从缓存中拿取缓存数据进行加载。甚至还可以在网络恢复时，自动重新连接服务器获取更新内容。

Service Worker

(图片来自 认识Progressive Web App ，文字作者： 外籍杰克 ，图片作者：未知)

依托这种技术，可以得到贴近原生应用的体验。比如，PWA/微信小程序 可以在离线状态下发送聊天消息。因为 Service Worker 或者 App Service 会在后台等待着网络重连，一旦网络重新接入，消息便会自动发送出去。

比较

接下来我们不过多在技术细节上讨论两者（绝对不会告诉你其实是我根本不懂技术细节 233333），从用户的眼光去审视这两者的异同。

提供的功能

Progressive Web App：除了传统 H5 已经提供的功能，还提供了后台同步、后台推送消息通知等功能。
微信小程序：提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

兼容性

Progressive Web App：由浏览器提供支持，Chrome、Opera、Firefox 均已支持 PWA。
微信小程序：由微信提供支持，只能在微信中使用。

自由度

Progressive Web App：PWA 可以生成一个图标，并被添加到桌面上。而且不仅可以在手机端使用，在任何支持 PWA 的浏览器环境下均可正常使用。
微信小程序：只有在微信中使用。

总结

看来，微信小程序是微信生态布局之一，而 Progressive Web App 则把眼光放在了全体 Web App 上，毕竟后面站着的是 Google，而 Google 手里握着 Chrome 这个东西。
微信小程序的杀手锏是它能与微信这个庞大的体系进行交互，比如获取用户信息，进行微信支付，但最终的控制权在微信手上，过不了审核，说不让你发布你就不让你发布。而 Progressive Web App 则更为自由，你可以部署项目到任何支持 HTTPS 的服务器上（而且必须支持 HTTPS 才能工作），支持的范围也不受某个应用的限制，有浏览器即可。

不管是哪一种新技术，都是希望带给用户更爽快的使用体验，给开发者更便捷的开发体验，最好再带来点利益。而对于开发人员，积极拥抱变化，找寻变化中的不变量，才能任其千变万化而应对自如。

最后，已经有一定数量的知名应用使用了 PWA 技术，Flipboard 就是其中之一。快使用支持 PWA 技术的浏览器体验一下吧。（试试看在第一次加载完毕后断开所有网络再刷新）

本文采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
限于作者水平，错误疏漏在所难免，如有文中有任何错误请直接在此回复联系作者。收到之后会及时更正并表示感谢。

1. Progressive Web App 是 Google 在 2015 年中旬推出的技术。 ↩