https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0web
PWA是一些技術的集合。用於消除web與其餘客戶端之間的差距,最大程序利用現代瀏覽器的技術,提供一個更像移動應用的網頁體驗,改善了性能,支持離線,以及能實現一些只有移動應用能夠的功能。chrome
PWA特性
- 漸進式加強:是「優雅降級、漸進加強」 的,給支持的設備更好的體驗,不支持的設備也不會更差。
- 響應式的用戶界面:能夠在其餘任意設備上運行
- 離線:經過service worker能夠在離線或者網速較差的環境下工做
- 類原生應用:擁有原生應用般的體驗,由於它是創建在app shell model上的
- 持續更新:受益於service worker的更新進程,應用能始終保持更新
- 安全:經過https來提供服務,能避免內容窺探和替換
- 可發現:經過W3C manifest和service worker registration標識應用,讓搜索引擎可以找到web應用
- 再次訪問:消息推送等特性讓用戶再次訪問變得容易
- 可安裝:容許用戶把應用保留在主屏幕,不須要經過應用商店
- 可鏈接:經過URL能夠輕鬆分享應用,不須要複雜的安裝便可運行
缺點
- 門檻高:要求服務器部署https,service worker 涉及api衆多,須要單獨學習
- 瀏覽器支持不夠全面:但最近(2017-12)Safari也支持了
- 用戶不習慣:網頁代替原生應用,如讓用戶習慣網頁能夠離線工做。用戶短時間內不適應。
關鍵技術
- Manifest
- Service Worker
- Push Notification
PWA與其餘App的對比
- Native App:須要下載安裝,用戶體驗好,可離線,速度快,性能高。但維護成本高,對於其餘平臺須要從新開發,應用商店審覈效率低,流程複雜
- Web App:運行在瀏覽器中,不須要安裝,跨平臺,支持的設備普遍,發佈靈活(不須要應用商店審覈),即時上線,用戶可直接使用最新版本。須要處理瀏覽器兼容問題
- Hybrid App:以上兩種的混合App,須要下載安裝,跨平臺,Web人員方便快速構建,能夠上傳到應用商店,能夠基於瀏覽器進行調試,但用戶體驗不如原生,性能慢,技術不是很成熟