PWA介紹

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0web

  PWA是一些技術的集合。用於消除web與其餘客戶端之間的差距,最大程序利用現代瀏覽器的技術,提供一個更像移動應用的網頁體驗,改善了性能,支持離線,以及能實現一些只有移動應用能夠的功能。chrome

PWA特性

  • 漸進式加強:是「優雅降級、漸進加強」 的,給支持的設備更好的體驗,不支持的設備也不會更差。
  • 響應式的用戶界面:能夠在其餘任意設備上運行
  • 離線:經過service worker能夠在離線或者網速較差的環境下工做
  • 類原生應用:擁有原生應用般的體驗,由於它是創建在app shell model上的
  • 持續更新:受益於service worker的更新進程,應用能始終保持更新
  • 安全:經過https來提供服務,能避免內容窺探和替換
  • 可發現:經過W3C manifestservice 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人員方便快速構建,能夠上傳到應用商店,能夠基於瀏覽器進行調試,但用戶體驗不如原生,性能慢,技術不是很成熟
相關文章
相關標籤/搜索