高磊 OpenWeb开发者 1周前

在 GMTC 2018 全球大前端会议举办期间，高磊担任主题演讲嘉宾，并担任 PWA 专场出品人。作为有近 10 年 Web 前端技术开发、管理经验的开发者，高磊一直关注着 PWA 技术的发展。

2017年 6月10日，GMTC 2017 开幕，仅来自 Google 的工程师 Michael 分享了题目为《PWA：移动 Web 的现在与未来》的主题演讲，国内尚没有讲师分享PWA 相关技术。

时隔一年，2018 年 6 月21日 GMTC 2018 专门设立 PWA 专场，阿里、美团点评、百度的各位讲师们分别分享了主题为《从 UC 内核角度谈谈 PWA 技术在阿里体系的实践及影响》、《跨容器高性能的离线化方案在美团的实践和探索》、《在 PWA 中使用 App Shell 模型提升性能和用户感知体验》的演讲。

相比于 GMTC 2017 ，从今年的分享内容以及现场听众的反馈可以看出，PWA 在国内已经进入到了技术应用阶段。

PWA国内外发展

从 GMTC 2017 到 GMTC 2018 的一年多时间里，PWA 在国内外都有很大的发展。

国外发展

在今年 5 月份举办的 Google I/O 大会上，Google 基本上每个和 Web 相关的演讲中都提到了 PWA。在 Google 的强力推动下，海外已经有相当多的站点拥有了 PWA 独立形态。其中星巴克就是 Google 强推的一个典型的独立 PWA 站点案例，海外的星巴克官网经过 PWA 改造，日活和月活增张了两倍之多！

Google 在 2017 年的 Chrome Dev Summit 上，就提出了 PWA 作为独立形态外的另外一层意义：Progressive Web Apps are just a higher bar for user experience. 从 Google 统计来看，改造 PWA 之后的网站转化率平均提升 20% 以上！这种转化率的提升说明了 PWA 具有提升 Web 体验的能力。

国内发展

PWA在国内的发展相对缓慢，目前国内还没有类似国外“ PWA 站点”独立形态的成熟站点，但是“技术无国界”，PWA 相关技术已经应用于国内的一些前沿互联网公司。
PWA在性能优化上带来了新的解决方案，美团点评的于秋同学在 GMTC 的演讲中提到，在应用 Service Worker 对支付业务进行迭代后，性能提升了 22%，同时支付转化率提升了 1%～2%。讲师还提到，Service Worker 是一种标准化的技术方案，并不是什么“黑魔法”，不用过于担心跨平台的问题。通过现场问答、线下交流环节的火爆程度，我们可以看出 Service Worker 对性能优化的有效性已经得到了国内前端技术人员的认可。

PWA不单带来了性能上的体验提升，在用户感知层面的东西同样值得大家关注，App Shell 解决了 Web 页面跳转白屏、等待等体验不佳的问题，给用户带来了完整的站点体验。百度讲师潘宇琪带来了 App Shell 相关的分享。在演讲中，宇琪提到使用 APP Shell 的两点好处：

1. 性能方面：使用 App Shell 模型可以将通用资源和动态内容分离，实现用户访问的快速响应；

2. 体验方面：App Shell 使得Web App 也可以拥有 Native App 每次点击反馈之后的顺畅交互体验。

   Service Worker、App Shell 在国内都已经有了应用实例，Web 的性能以及浏览、交互体验也已经有了很多样典型站点。那么 PWA 的独立形态为什么迟迟没有出现？具备“将 Web 站点添加到桌面”、“Web Push”消息推送的独立应用何时到来？这个可能是留给各大内容、服务分发平台以及厂商的思考题。作为前端开发者和互联网从业者期待更早的出现答案。

PWA兼容性

Safari 在今年 3 月份发布的 iOS 11.3 版本中支持了 PWA 相关特性。 到目前为止，几乎所有的主流浏览器都支持了 PWA 的相关特性。

目前支持 PWA 相关特性的浏览器

总结

目前，我们正在经历着 PWA 给移动 Web 带来的新变化，这种变化将会大大提升用户浏览和交互的体验。有体验做基础，有全球最顶尖的技术开发者做技术迭代，我们有理由相信有着大量流量与用户群体的 Web 生态将会有更大的发展空间。