PWA(Progressive Web App)入門系列：（一）PWA簡介

阿新 • • 發佈：2018-12-30

前言

PWA做為一門Google推出的WEB端的新技術，好處不言而喻，但目前對於相關方面的知識不是很豐富，這裡我推出一下這方面的入門教程系列，提供PWA方面學習。

什麼是PWA

PWA全稱Progressive Web App，直譯是漸進式WEB應用，是 Google 在 2015 年提出，2016年6月才推廣的專案。是結合了一系列現代Web技術的組合，在網頁應用中實現和原生應用相近的使用者體驗。

所謂的P（Progressive）這裡有兩層含義，一方面是漸進增強，讓WEB APP的體驗和功能能夠用漸進增強的方式來更接近原生APP的體驗及功能；另一方面是指下一代WEB技術，PWA並不是描述一個技術，而是一些技術的合集。

PWA特性

漸進增強 - 能夠讓每一位使用者使用，無論使用者使用什麼瀏覽器，因為它是始終以漸進增強為原則。
響應式使用者介面 - 適應任何環境：桌面電腦，智慧手機，膝上型電腦，或者其他裝置。
不依賴網路連線 - 通過 service workers 可以在離線或者網速極差的環境下工作。
類原生應用 - 有像原生應用般的互動和導航給使用者原生應用般的體驗，因為它是建立在 app shell model 上的。
持續更新 - 受益於 service worker 的更新程序，應用能夠始終保持更新。
安全 - 通過 HTTPS 來提供服務來防止網路窺探，保證內容不被篡改。

可發現 - 得益於 W3C manifests 元資料和 service worker 的登記，讓搜尋引擎能夠找到 web 應用。
再次訪問 - 通過訊息推送等特性讓使用者再次訪問變得容易。
可安裝 - 允許使用者保留對他們有用的應用在主螢幕上，不需要通過應用商店。
可連線性 - 通過 URL 可以輕鬆分享應用，不用複雜的安裝即可執行。

PWA優、缺點

優點：

上面提到的，所有這些現代 Web 特性。
Web最重要的意義在於開放和去中心化，這才是全球資訊網的初衷

缺點：

門檻不低。部署的伺服器要求HTTPS，ServiceWorker涉及API眾多，需要單獨學習

瀏覽器支援不夠全面。蘋果Safari 短時間內不會支援，5 年計劃裡可能實施
使用者體驗習慣。網頁應用替代原生應用的方式，使用者短時間內不適應

PWA關鍵技術

Manifest（應用清單）

Web App Manifest是一個W3C規範，定義了一個基於JSON的清單，為開發人員提供一個放置與Web應用程式關聯的元資料的集中地點。manifest 就是 PWA 概念的一環，它給你了控制你的應用如何出現在使用者期待出現的地方（比如使用者手機主螢幕），這直接影響到使用者能啟動什麼，以及更重要的，使用者如何啟動它。

使用 web 應用程式清單，你的應用可以：

能夠真實存在於使用者主螢幕上
在 Android 上能夠全屏啟動，不顯示位址列
控制螢幕方向已獲得最佳效果
定義啟動畫面，為你的站點定義主題
追蹤你的應用是從主螢幕還是 URL 啟動的

例如：

{
  "lang": "en",
  "dir": "ltr",
  "name": "Donate App",
  "description": "This app helps you donate to worthy causes.",
  "short_name": "Donate",
  "icons": [{
    "src": "icon/lowres.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red",
  "serviceworker": {
    "src": "sw.js",
    "scope": "/racer/",
    "use_cache": false
  },
  "screenshots": [{
    "src": "screenshots/in-game-1x.jpg",
    "sizes": "640x480",
    "type": "image/jpeg"
  },{
    "src": "screenshots/in-game-2x.jpg",
    "sizes": "1280x920",
    "type": "image/jpeg"
  }]
}

Service Workers

Service Worker是瀏覽器在後臺獨立於網頁執行的指令碼，它打開了通向不需要網頁或使用者互動的功能的大門。這個 API 之所以令人興奮，是因為它可以支援離線體驗，讓開發者能夠全面控制這一體驗。

ServiceWorker是由兩部分構成，一部分是 cache，還有一部分則是 Worker。

它被設計為一個相對底層、高度可程式設計、子概念眾多，也因此異常靈活且強大的 API，它就像一個位於客戶端和網路之間的代理，可以攔截、處理、響應流經的網路請求，配合Cache API，你可以自由管理網路請求檔案的快取，這使得 Service Worker 可以從快取中向 web 應用提供資源，即使是在離線的環境下。這樣，在離線和網速低的情況下也能秒開，說白了，之前的Hybrid架構的出現不就是為了這個功能麼。之前雖然有AppCache，但它具有相當多的缺陷，這裡就不說了。

來張官網的形象圖：

Push Notification（推送通知）

Push 和 Notification是兩個不同的功能，涉及到兩個API，但是它們之前有依賴關係。

Notification這塊應該大家多少了解一些，屬於瀏覽器發出的通知訊息，之前需要瀏覽器一直開著才能實現這種通知，但是現在有了上面提到的Service Worker，就可以駐留在程序裡面操作了。

Push & Notification關係：

Push : 伺服器端將更新的資訊傳遞給 Service Worker
Notification: Service Worker 將更新的資訊推送給使用者

PWA與其它App的對比

目前的移動端APP：

Native APP
Web App
Hybrid App

Native APP

Native APP，指原生App，是一個完整的App，可拓展性強，需要使用者下載安裝使用。

優點：

可使用移動裝置所有功能
速度快、效能高、使用者體驗好
離線使用

缺點：

開發成本高、維護成本高
每個不通的平臺都要重新開發
應用商店稽核複雜，效率低

Web APP

Web App 指採用Html5語言寫出的App，生活在瀏覽器裡的應用，不需要下載安裝。

優點：

跨平臺開發、無需下載、無需安裝,開發速度快
釋出靈活，因為根本不需要應用商店的稽核
較低的開發成本
可即時上線
使用者可以直接使用最新版本
支援裝置廣泛

缺點：

只能使用有限的移動裝置API
瀏覽器相容問題
無法上傳到應用商店
使用者暫時不適用

Hybrid App

Hybrid APP指的是半原生半Web的混合類App，需要下載安裝。

優點：

相容多平臺
Web前端工作人員就可快速構建
可以上傳到應用商店
可以基於瀏覽器的方式進行頁面除錯
可使用的移動裝置的API多

缺點：

使用者體驗不如原生應用
為模擬原生樣式，需要大量的html和css
效能稍慢
技術不是很成熟

PWA相容性

Blink核心（Chrome、Oprea、Samsung Internet 等）和 Gecko核心（Firefox）和Microsoft Edge都已經實現了 PWA 所需的所有關鍵技術的支援，但IOS的Safari（Webkit），目前不支援PWA的API。

不過在2015年Webkit的5年計劃裡面，已經提及了Service Worker，相信很快就能實現。

PWA在中國

國在IPhone不在少數，而IOS目前是不支援PWA的
國內Android系統，大部分早已把Google框架移除了，所以相容性會出問題
推送依賴於GCM，而國內Google是無法訪問的

Google的技術在國內推進是很痛苦的，Android雖然近年來在國內不錯，但PWA在國內的發展有很多困難。

PWA的未來

總的來說，PWA還是很不錯的，雖然PWA在國內的體驗目前有一些限制，但相信PWA在國內的春天肯定會來的。

這裡引用一下黃玄說過的一句話：

請不要讓 web 再繼續離我們遠去，瀏覽器廠商們已經重新走到了一起，而下一棒將是交到我們 web 應用開發者的手上。喬布斯曾相信 web 應用才移動應用的未來，那就讓我們用程式碼證明給這個世界看吧。
讓我們的使用者，也像我們這般熱愛 web 吧”

PWA應用體驗

Progressive Web Apps：網站內含有需要PWA應用，大家可以體驗一下。

這一章做了一下PWA的相關介紹，後面章節會詳細對PWA API進行詳細說明。

部落格名稱：王樂平部落格

CSDN部落格地址：http://blog.csdn.net/lecepin

本作品採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

PWA(Progressive Web App)入門系列：（一）PWA簡介

前言

什麼是PWA

PWA特性

PWA優、缺點

優點：

缺點：