还在学习微信小程序？Google说PWA是未来！

昨天，我们的团队收到Google团队发来的一封邮件，说到Chrome浏览器应用程序目前计划在2018年第一季度停止在Windows，Mac和Linux上工作，因为Chrome将继续专注于开放网络。Chrome团队现在正致力于在桌面上安装渐进式Web应用程序（PWA）。

那么，PWA是否能带来新一轮大前端技术洗牌？

PWA 的优势在哪？

社长酱从用户角度，来列举一下和传统网页应用相比的优势。

消息推送。用户只要允许，即使网页关闭后仍然可以在系统通知栏收到推送消息。（自从知道 Facebook 应用为了消息的即时性强制阻止安卓系统进入节电模式后，就卸载了 Facebook 原生应用改用他们的网页推送了）

后台加载。往常的网页应用只要关闭了网页他的生命就结束了，现在引入了一个 Service Worker 的概念，即使网页关闭，PWA 仍然可以在后台运行获取数据更新（当然有限制）。

离线使用。PWA 打开后会缓存一些内容，之后再次访问即使没有网络也可以浏览之前的页面（如同IE时代的离线浏览）。

原生应用界面。在某些情况下 PWA 应用可以隐藏浏览器本身的所有视觉成分，光从UI和UX上看，很容易认为这就是一个原生界面，如下图其实都是PWA而不是原生应用。

桌面图标。PWA只要配上一个图标，再放快捷方式在桌面上（比如一定时间内第二次访问PWA会自动询问是否添加快捷方式到桌面），就真的和原生系统无异了，打开的速度也很快（当然功能不能很庞大）。

另一方面，和原生应用比，PWA 又不需要用户安装，只需要浏览器支持 PWA 就可以了。

PWA 的发展

这个概念在行业内发展的挺快，在本文的这个时间点上，基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了，Firefox 和微软的 Edge 正在开发中，水果公司的 Safari 最近刚刚表达了可能会支持 PWA。从长久的角度看，只要 Google 不断推动一些网站往 PWA 转型，其他的浏览器或者竞争对手也就会自然跟风上船。

网上已经可以找到大把的 PWA 例子了，这里有不少：https://pwa.rocks/，其中不乏 The Washington Post，Flip Board，AliExpress，Wikipedia，Gmail，Booking 这样的大头。

里面有个 Air Honer 很有意思，大家可以玩一下（小心有声音别在开会的时候打开。。），The Air Horner，从点开到使用只需要点击一次屏幕（不需要安装），使用体验又非常接近原生应用（UI/UX设计，桌面图标）。

放眼未来：PWA 将带来前端技术洗牌？

1. 业界厂商纷纷支持，包括苹果

各家浏览器厂商在 2017 年开始大力支持 PWA，下图统计了主流浏览器对 PWA 的支持程度，可以看到，大部分浏览器对 PWA 已经支持得很好了。

图片来源于 ispwaready

UC 浏览器开发的 U2 内核已经支持 Push API 了，也是国内第一个支持 Push API 的浏览器。现在浏览器厂商唯恐自己没跟上标准，而被淘汰。

不仅国内浏览器厂商的态度发生转变，连苹果都已经在几个月前悄悄的进行了 Service Worker 的开发了，相信在不远的将来，iOS 也将支持 PWA。

2. PWA 开发门槛也在降低

为了降低 PWA 的开发门槛，业界也推出了相应的工具。

例如，百度推出的 Lavas 就是一个开源的命令行工具，可以通过它来快速创建 PWA 项目。它提供了多种常用的 APP Shell 给用户选择，降低了开发成本，也简化了工作流程，让 PWA 项目变得易于管理。

3. 各大站点纷纷实践，用 PWA 已成趋势？

PWA 刚推出时，就获得了很多大型站点的支持，比如印度最大的电商网站 Flipcart，它是第一个大规模应用 PWA 的站点，也取得了非常好的收益，用户停留时长增长了 3 倍。除 Flipcart 之外，还有很多不错的案例。下面我们来看看国内外的两个站点的实践案例。

案例 1：Twitter Lite PWA

首先，国外的 Twitter 在 2017 年上线了 Twitter Lite PWA， Google 开发者网站上有 Twitter PWA 的案例分析。Twitter Lite PWA 同样收益惊人：

平均用户停留时长增长 65%

Web 站点发推的数量增长 75% (Amazing)

跳出率降低 20%

Twitter Lite 能取得这样的成绩，归功于 PWA 的新技术和用户体验至上的设计原则：它通过 Service Worker 缓存文件，让页面可以离线，同时降低网络消耗；通过 Web Push 接受服务器推送的消息；采用 App Shell 的设计模型，配合 Service Worker 能让页面瞬间展现。

案例 2：ele.me PWA

Google 开发者网站上也对 ele.me 的案例进行了 分析。从这个案例分析中，我们可以看到 ele.me PWA 改造的收益如下：

预缓存的页面平均加载时间减少 11.6%

所有页面的平均加载时间减少 6.35%

在 3G 网络并且是第一次加载时，从页面加载到用户可操作的时间下降到 4.93s

可见，ele.me 同样取得了很不错的收益。不同于 Twitter Lite，ele.me 是 MPA 站点，这会让站点变的更复杂，并且体验不如 SPA 那么顺畅，但是 ele.me 充分利用了 PWA 的各种新技术和设计模式，将 MPA 的影响降到最小，比如使用了 PRPL 模式，最大程度的降低页面的首屏时间，还采用了 App Skeleton 的设计方式让用户对正在加载的页面内容有心里预期。

Twitter 和 ele.me 只是 PWA 站点中两个效果比较显著的案例，同样还有很多其他的案例，可以访问 Google 的案例分析页面合集：

https://developers.google.cn/web/showcase/

实际收益明显，再加上 Google 的强力支持，使得 PWA 的增长非常迅速，越来越多的互联网大站跟进。下面这张图列出了一些站点，从最开始的 Flipcart，到目前的 Instangram、Uber、Twitter、Starbucks 等，不仅数量在增加，站点等级和质量也在不断地提升。放眼国内，百度、饿了么、阿里都已经有部分站点支持 PWA 了，滴滴也表示有兴趣，可见，PWA 不仅在国外非常受重视，在国内同样受到各大互联网企业的重视。

按照当前的发展趋势，PWA 将会带来 Web App 的大量需求，新一轮大前端技术洗牌很可能近在眼前了。