高磊 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 生態將會有更大的發展空間。