高磊 OpenWeb開發(fā)者 1周前

在 GMTC 2018 全球大前端會議舉辦期間，高磊擔(dān)任主題演講嘉賓，并擔(dān)任 PWA 專場出品人。作為有近 10 年 Web 前端技術(shù)開發(fā)、管理經(jīng)驗的開發(fā)者，高磊一直關(guān)注著 PWA 技術(shù)的發(fā)展。

2017年 6月10日，GMTC 2017 開幕，僅來自 Google 的工程師 Michael 分享了題目為《PWA：移動 Web 的現(xiàn)在與未來》的主題演講，國內(nèi)尚沒有講師分享PWA 相關(guān)技術(shù)。

時隔一年，2018 年 6 月21日 GMTC 2018 專門設(shè)立 PWA 專場，阿里、美團點評、百度的各位講師們分別分享了主題為《從 UC 內(nèi)核角度談?wù)?PWA 技術(shù)在阿里體系的實踐及影響》、《跨容器高性能的離線化方案在美團的實踐和探索》、《在 PWA 中使用 App Shell 模型提升性能和用戶感知體驗》的演講。

相比于 GMTC 2017 ，從今年的分享內(nèi)容以及現(xiàn)場聽眾的反饋可以看出，PWA 在國內(nèi)已經(jīng)進入到了技術(shù)應(yīng)用階段。

PWA國內(nèi)外發(fā)展

從 GMTC 2017 到 GMTC 2018 的一年多時間里，PWA 在國內(nèi)外都有很大的發(fā)展。

國外發(fā)展

在今年 5 月份舉辦的 Google I/O 大會上，Google 基本上每個和 Web 相關(guān)的演講中都提到了 PWA。在 Google 的強力推動下，海外已經(jīng)有相當(dāng)多的站點擁有了 PWA 獨立形態(tài)。其中星巴克就是 Google 強推的一個典型的獨立 PWA 站點案例，海外的星巴克官網(wǎng)經(jīng)過 PWA 改造，日活和月活增張了兩倍之多！

Google 在 2017 年的 Chrome Dev Summit 上，就提出了 PWA 作為獨立形態(tài)外的另外一層意義：Progressive Web Apps are just a higher bar for user experience. 從 Google 統(tǒng)計來看，改造 PWA 之后的網(wǎng)站轉(zhuǎn)化率平均提升 20% 以上！這種轉(zhuǎn)化率的提升說明了 PWA 具有提升 Web 體驗的能力。

國內(nèi)發(fā)展

PWA在國內(nèi)的發(fā)展相對緩慢，目前國內(nèi)還沒有類似國外“ PWA 站點”獨立形態(tài)的成熟站點，但是“技術(shù)無國界”，PWA 相關(guān)技術(shù)已經(jīng)應(yīng)用于國內(nèi)的一些前沿互聯(lián)網(wǎng)公司。
PWA在性能優(yōu)化上帶來了新的解決方案，美團點評的于秋同學(xué)在 GMTC 的演講中提到，在應(yīng)用 Service Worker 對支付業(yè)務(wù)進行迭代后，性能提升了 22%，同時支付轉(zhuǎn)化率提升了 1%～2%。講師還提到，Service Worker 是一種標(biāo)準(zhǔn)化的技術(shù)方案，并不是什么“黑魔法”，不用過于擔(dān)心跨平臺的問題。通過現(xiàn)場問答、線下交流環(huán)節(jié)的火爆程度，我們可以看出 Service Worker 對性能優(yōu)化的有效性已經(jīng)得到了國內(nèi)前端技術(shù)人員的認可。

PWA不單帶來了性能上的體驗提升，在用戶感知層面的東西同樣值得大家關(guān)注，App Shell 解決了 Web 頁面跳轉(zhuǎn)白屏、等待等體驗不佳的問題，給用戶帶來了完整的站點體驗。百度講師潘宇琪帶來了 App Shell 相關(guān)的分享。在演講中，宇琪提到使用 APP Shell 的兩點好處：

性能方面：使用 App Shell 模型可以將通用資源和動態(tài)內(nèi)容分離，實現(xiàn)用戶訪問的快速響應(yīng)；

體驗方面：App Shell 使得Web App 也可以擁有 Native App 每次點擊反饋之后的順暢交互體驗。

Service Worker、App Shell 在國內(nèi)都已經(jīng)有了應(yīng)用實例，Web 的性能以及瀏覽、交互體驗也已經(jīng)有了很多樣典型站點。那么 PWA 的獨立形態(tài)為什么遲遲沒有出現(xiàn)？具備“將 Web 站點添加到桌面”、“Web Push”消息推送的獨立應(yīng)用何時到來？這個可能是留給各大內(nèi)容、服務(wù)分發(fā)平臺以及廠商的思考題。作為前端開發(fā)者和互聯(lián)網(wǎng)從業(yè)者期待更早的出現(xiàn)答案。

PWA兼容性

Safari 在今年 3 月份發(fā)布的 iOS 11.3 版本中支持了 PWA 相關(guān)特性。 到目前為止，幾乎所有的主流瀏覽器都支持了 PWA 的相關(guān)特性。

目前支持 PWA 相關(guān)特性的瀏覽器

總結(jié)

目前，我們正在經(jīng)歷著 PWA 給移動 Web 帶來的新變化，這種變化將會大大提升用戶瀏覽和交互的體驗。有體驗做基礎(chǔ)，有全球最頂尖的技術(shù)開發(fā)者做技術(shù)迭代，我們有理由相信有著大量流量與用戶群體的 Web 生態(tài)將會有更大的發(fā)展空間。

總結(jié)

以上是生活随笔為你收集整理的2017 到 2018，PWA 技术到底经历了什么的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。