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

標籤：internet   國內   生活   保留   啟動   blank   代碼   管理   icon   

前言

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 應用。

• 再次訪問 - 通過訊息推送等特性讓使用者再次訪問變得easy。
• 可安裝 - 同意使用者保留對他們實用的應用在主畫面上，不須要通過市集。
• 可串連性 - 通過 URL 能夠輕鬆分享應用，不用複雜的安裝就可以執行。

PWA優、缺點長處：

• 上面提到的，全部這些現代 Web 特性。

• Web最重要的意義在於開放和去中心化，這才是全球資訊網的初衷

缺點：

• 門檻不低。部署的server要求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"  }]}

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVjZXBpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=" " title="">

Service Workers

Service Worker是瀏覽器在後台獨立於網頁執行的指令碼，它開啟了通向不須要網頁或使用者互動的功能的大門。

這個 API 之所以令人興奮，是由於它能夠支援離線體驗，讓開發人員能夠全面控制這一體驗。

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

它被設計為一個相對底層、高度可程式化、子概念眾多，也因此異常靈活且強大的 API，它就像一個位於client和網路之間的代理。能夠攔截、處理、響應流經的網路請求，配合Cache API，你能夠自由管理網路請求檔案的緩衝，這使得 Service Worker 能夠從緩衝中向 web 應用提供資源，即使是在離線的環境下。

這樣。在離線和網速低的情況下也能秒開。說白了，之前的Hybrid架構的出現不就是為了這個功能麼。

之前儘管有AppCache。但它具有相當多的缺陷，這裡就不說了。

來張官網的形象圖：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVjZXBpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=" " title="">

Push Notification（推播通知）

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

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

Push & Notification關係：

• Push : server端將更新的資訊傳遞給 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簡單介紹