PWA 的发展

从 PWA 被提出到现在,已经过去了 4 年,PWA 取得的成绩有目共睹,特别是在国外,在网络速度不够快或者相对贫困的地区,PWA 非常受欢迎,因为它不需要很高的硬件配置,也很省流量,比如在印度,就有一个很成功的案例,Flipkart。

Flipkart

Flipkart 是印度最大的电商公司,在 2015 年的时候,他们关停了 Web App,尝试将用户导流到 Native App,后来发现在产品快速迭代和好的用户体验之间很难做到两者兼得,因此他们决定将 Web App 和 Native App 整合为 PWA,通过 Service Worker,Web App Manifest 等技术的使用,PWA 不仅在体验上达到了他们的标准,同时还具有了 Web App 的产品迭代速度。

采用 PWA 后,取得的成绩斐然,关键收益如下:

  • 用户时长增加了 3 倍,传统 Web 是 70 秒,而 PWA 达到了 3.5 分钟。
  • 用户回流率提升了 40%。
  • 添加到主屏的用户转化率提高了 70%。
  • 用户数据流量的消耗降低了 3 倍。

Flipkart Lite

阿里速卖通(AliExpress)

阿里速卖通是阿里巴巴旗下的一款产品,对外销售来自中国的各种产品。AliExpress 的困境在于,用户不愿意下载安装他们的 Native App,即使在 Web App 中对 Native App 有足够的引流,导致获客成本很高。

最后,AliExpress 选择了 PWA,他们的出发点在于提升 Web App 的体验和用户黏性。带来的收益也非常的明显,如下:

  • 在 PWA 中,新用户的转化率提升了 104%。
  • 在一次会话中,用户访问的页面数量增加了 2 倍。
  • 用户时长增加了 74%。

饿了么

不仅在国外,国内同样也有 PWA 的案例,饿了么,作为国内最早一批尝试 PWA 的站点,同样也取得了不小的收益。

饿了么做 PWA 站点的出发点和 Flipkart、AliExpress 不完全一样,它几乎纯粹是从性能优化的角度接入的 PWA,当时国内的浏览器市场比较混乱,对 PWA 支持的不是很完善。饿了么 PWA 采取的是多页应用(Multi-Page Application),和 PWA 推荐的 SPA(Single Page Application)不一样,主要是考虑到多个团队合作共同开发同一个站点,不过在体验上并没有打折扣,现在是 Google 对外展示的一个成功案例。

看一下饿了么 PWA 的收益:

  • 预缓存的页面加载时间缩短了 11.6%。
  • 所有页面平均加载时间缩短了 6.35%。
  • 在 3G 网络下,第一次加载首次可交互时间缩短了 4.93 秒。

饿了么 PWA

标准的支持

PWA 采用的最新技术,当前浏览器还没有达到完全支持的程度,很多技术在 W3C 还没有定稿,不过这也意味着这些技术的还有很大的想象空间。

根据 Can I Use 的统计(包括 PC 和移动端,截至 2019 年 4 月 2 日),PWA 的关键技术在浏览器中的支持度如下:

  • Web App Manifest 的支持度达到 80.63%。
  • Service Worker 的支持度达到 89.84%。
  • Notifications API 的支持度达到 75.17%。
  • Push API 的支持度达到 78.06%。

随着标准的进一步完善,国内外各大浏览器都会逐步支持,拥抱标准。Chrome 自不必说,Apple 从 iOS 11.3 版本开始在 Safari 上支持 Service Worker,iOS 12.2 版本修复了 PWA 很多致命的体验问题,支持了 Web Share API 等。可见大家都在拥抱标准,拥抱开放。

Can I Use 的统计由于一些原因在国内不是很适用,为此百度 Web 生态团队维护了一份列表,开发者可以在上面查看国内各主流浏览器对 PWA 主要技术的支持程度,https://lavas.baidu.com/ready