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

標籤：safari   iter   license   入門   全屏   伺服器   net   安裝使用   work   

前言

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 應用才行動裝置 App的未來，那就讓我們用代碼證明給這個世界看吧。
讓我們的使用者，也像我們這般熱愛 web 吧”

PWA應用體驗

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

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

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

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

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

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