在我們 今天 和以往的新聞中都有提到一個名詞:PWA。那麼可能就有很多讀者朋友會好奇了,這三個英文字母是什麼意思?這篇有問有答就來簡單講解一下PWA是什麼,並向各位推薦一些國內可用的PWA。

TL;DR: PWA就是一種網頁應用,它可以離線使用,可以變成獨立應用安裝到系統中。它非常的輕量化,在多平台上面擁有一致的界面。
漸進式網頁應用
PWA,全稱直譯過來就是漸進式網頁應用( P rogressive W eb A pp)。PWA的概念由Chrome項目組在2015年的時候提出,很明顯,它是一種基於網頁的應用,但它又與傳統的Web App又有一些不同。特性有很多,想要了解具體的直接看 Progressive Web App ,這裏只舉我最看重的幾點:
· 輕量 & 離線可用
跟普通的網頁沒啥區別,加載飛快,啟動飛快,比如微博的PWA版能比它的App快上一個檔次。而且不像Hybrid App那樣還是依賴於一個本地的App殼子,需要你去App Store耗費不少流量來安裝。PWA在被添加到瀏覽器之後實際上就成為了一個本地應用,可以直接離線使用(當然它得是那種不依賴在線內容的),不會再額外消耗流量,它的更新也是靜默的,會按照開發者寫定的週期訪問原網頁拉取程序更新。
· 本地通知支持
在添加在本地之後,PWA就擁有了本地通知能力,因為在Android上是通過GCM實現的,所以國內這點並不好用,微博PWA就乾脆沒有寫通知的功能,而在iOS端蘋果也直接限制掉了PWA接收通知的能力,不過在桌面平台上面倒是沒有殘廢。
· 全平台統一體驗
PWA因為是一種網頁應用,所以它可以在所有平台上都有同樣的用户體驗,雖然目前的PWA界面多是為移動設備而設計,但是至少我在PC上能一樣很方便的用到它,而不是通過虛擬機或者其他手段。
· 拿不到權限
是的,PWA應用雖然可以留在系統應用列表中,但它仍然還是一個依賴於瀏覽器的應用,瀏覽器拿不到的權限它都別想拿到,也就是説使用PWA的時候你的隱私是很有保障的,而且在特定平台(iOS)上面它沒有後台。
我記得在早期iPhone剛發佈的時候,蘋果想推廣的就是Web App,讓用户可以用一個網頁瀏覽器幹所有的活,所以就連安裝第三方應用的渠道都沒有開放,可惜當時的前端界遠遠沒有今天那麼多好用、新穎的技術,那時的移動設備性能也滿足不了使用非原生代碼的開銷,所以最後蘋果妥協了,推出了App Store直到今天。而現在PWA這種“漸進式”的網頁應用又逐漸流行起來,它沒有很久之前那種強推Web App的那種勢頭,更為務實的風格更能被人們接受。
系統支持已經很完善了
目前幾大系統都已經添加了對於PWA的支持。
·Android
作為主導者的Google在前幾代的Android中就已經加入了對它的原生支持,在Android上面選擇將PWA保留到系統時會自動將該網頁應用相關的文件進行編譯生成一個APK文件安裝進系統,隨後就完全不用再打開瀏覽器去訪問它了。
·iOS
蘋果對於此標準顯得不是太積極,不過他們也在iOS 11.3的時候就給Safari加入了相關的支持,現在iOS的PWA體驗完全不差於Android,但是需要開發者針對iOS平台進行一些修改,不然會有“水土不服”的情況發生。
·Windows 10
微軟也在之前的更新中給Edge瀏覽器加入了PWA的支持,不過在Windows 10上面還是用Chrome/Firefox比較方便一些……
那麼,怎麼用呢?
在桌面端,最簡單的就是使用Chrome瀏覽器。當Chrome檢測到當前訪問的網頁支持PWA的時候,在地址欄的右端就會出現一個安裝按鈕,點擊即可將這個PWA變成一個應用安裝到瀏覽器中。



而在Android上,使用Chrome瀏覽PWA站點時也會有相應的提示,添加到應用之後就會自動進行編譯安裝。另外跟據網上看到的情況,MIUI自帶的瀏覽器對這塊支持也做的不錯,就不知道其他幾家做的怎麼樣了。
iOS上面使用Safari打開網站然後在菜單中選擇添加到Home Screen就可以了,之後點開應用圖標就會以獨立應用形式出現,而不是通過Safari加載網頁。
國內可用的PWA
雖然説在國內幾大廠想盡一切辦法要讓用户用上他們的App,而不是通過網頁訪問自己的內容,但還是有幾個比較有良心的團隊都試水了PWA,比如:
· 微博PWA
我經常看到很多人會抱怨微博的官方客户端中廣告內容太多了,但我從來就沒有看到過廣告,因為我用微博PWA。
不會亂的時間線,沒有廣告,基本功能全齊,對於普通微博用户來説已經完全夠用了。(我還因為PWA的界面調整跟他們的開發團隊吵過架)
· 飛豬
阿里的前端團隊其實與國外前端接軌的很牢,雖然淘寶沒有PWA,但是飛豬做了。
· 餓了麼
· 騰訊新聞
· Bilibili
不好用,但是有。
寫在最後
PWA是前端界發展到一定高度之後出現的一種新的應用形態,在國外幾大網頁應用巨頭都有在推廣它,比如前端標準大佬Mozilla已經把PWA寫成一種標準了,而作為主推力量的Google就更不用多説,已經把PWA引進Play Store了。微軟則也在加大力度開發PWA,可能未來網頁版Office就是一個PWA。
但是反觀國內,幾大巨頭自成一派,每個平台有自己的標準,小程序只能基於自己的App中的瀏覽器來用,標準之間差距不大但就是不能互通,給開發者帶來適配難題。PWA這股清流在國內的應用生態面前完全推廣不開,沒有一家願意在這個可以提高用户體驗的玩意兒上花功夫。
一聲歎息。