PWA，你須要知道的那些事

時間 2019-11-16

標籤 pwa 須要知道那些简体版

原文原文鏈接

（ps: 有一段時間沒發文了，忙得不可開交，以前團隊分享PWA，答應你們整理出來，終於兌現了~）javascript

PWA簡介

PWA，英文全稱是 Progressive Web App，2015年由 Google 提出。PWA是提高 Web App的體驗的一種新方法，能給用戶原生應用的體驗，兼具了 Web App 和 Native App 的優勢。java

PWA 主要特性

可靠 - 即便在不穩定的網絡環境下，也能瞬間加載並展示；
體驗 - 快速響應，而且有平滑的動畫響應用戶的操做；
粘性 - 像設備上的原生應用，具備沉浸式的用戶體驗，用戶能夠添加到桌面。

特色：

漸進式 - 適用於選用任何瀏覽器的全部用戶，由於它是以漸進式加強做爲核心宗旨來開發的。
自適應 - 適合任何機型：桌面設備、移動設備、平板電腦或任何將來設備。 git

鏈接無關性 - 可以藉助於服務工做線程在離線或低質量網絡情況下工做。github

相似應用 - 因爲是在 App Shell 模型基礎上開發，所以具備應用風格的交互和導航，給用戶以應用般的熟悉感。web

持續更新 - 在服務工做線程更新進程的做用下時刻保持最新狀態。ajax

安全 - 經過 HTTPS 提供，以防止窺探和確保內容不被篡改。shell

可發現 - W3C 清單和服務工做線程註冊做用域可以讓搜索引擎找到它們，從而將其識別爲「應用」。數據庫

可再互動 - 經過推送通知之類的功能簡化了再互動。編程

可安裝 - 用戶可免去使用應用商店的麻煩，直接將對其最有用的應用「保留」在主屏幕上。json

可連接 - 可經過網址輕鬆分享，無需複雜的安裝。

PWA 自己強調漸進式，但並不要求一次性達到安全、性能和體驗上的全部要求，開發者能夠經過 PWA Checklist 查看現有的特徵。

PWA功能豐富，相比原生應用更加輕量。咱們能夠把 PWA 網站添加到桌面上，無論在PC端仍是移動端，都相似於一個原生應用，而且擁有媲美原生應用的體驗。它也擁有原生 APP 應用通常的啓動閃屏，也能夠進行消息推送——不過要知道，它源自 Web，一般只有傳統 APP 的體積的十分之一甚至更小。它不用等待下載安裝的時間，打開網頁的時候就已經「下載」而且「安裝」完畢。

APP Shell

App Shell 架構是構建 PWA 的一種方式，這種應用能可靠且即時地加載到您的用戶屏幕上，與本機應用類似。

定義

App Shell 是支持用戶界面所需的最小的 HTML、CSS 和 JavaScript，若是離線緩存，可確保在用戶重複訪問時提供即時、可靠的良好性能。這意味着並非每次用戶訪問時都要從網絡加載 App Shell。只須要從網絡中加載必要的內容。看下面這張圖來了解下：

構建單頁應用時，可使用APP Shell，它依賴漸進式緩存 Shell（使用服務工做線程）讓應用運行。App Shell 很是適合用於在沒有網絡的狀況下將一些初始 HTML 快速加載到屏幕上。

App Shell 應能完美地執行如下操做：

快速加載
儘量使用較少的數據
使用本機緩存中的靜態資產
將內容與導航分離開來
檢索和顯示特定頁面的內容（HTML、JSON 等）
可選：緩存動態內容 App Shell 可保證 UI 的本地化以及從 API 動態加載內容，但同時不影響網絡的可連接性和可檢測性。用戶下次訪問同一應用時，應用會自動顯示最新版本。無需在使用前下載新版本。

Service Worker與離線存儲

依賴

Service Worker 做爲現代瀏覽器的高級特性，依賴於 fetch 、promise 、CacheStorage、Cache API、等瀏覽器的基礎能力， Cache 提供了 Request / Response 對象對的存儲機制。CacheStorage 則提供了存儲 Cache 對象的機制。

功能和特性：

一個獨立的 worker 線程，獨立於當前網頁進程，有本身獨立的 worker context。
一旦被 install，就永遠存在，除非被手動 unregister
用到的時候能夠直接喚醒，不用的時候自動睡眠
可編程攔截代理請求和返回，緩存文件，緩存的文件能夠被網頁進程取到（包括網絡離線狀態）
離線內容開發者可控
能向客戶端推送消息
不能直接操做 DOM
必須在 HTTPS 環境下才能工做
異步實現，內部大都是經過 Promise 實現

注意：

SW經過postMessage與頁面之間通訊，讓頁面本身去操做DOM
是一個可編程的網絡代理，容許開發者控制頁面上處理的網絡請求
在不被使用的時候，它會本身終止，而當它再次被用到的時候，會被從新激活，因此你不能依賴於service worker的onfecth和onmessage的處理函數中的全局狀態
若是你想要保存一些持久化的信息，你能夠在service worker裏使用IndexedDB API
只能在 HTTPS 環境下才能使用SW，由於SW 的權利比較大，可以直接截取和返回用戶的請求
Push Notification （消息通知） Push 和 Notification 是兩個不一樣的功能，涉及到兩個 API 。 Notification 是瀏覽器發出的通知消息。Push 和 Notification 的關係，Push：服務器端將更新的信息傳遞給 SW ，Notification： SW 將更新的信息推送給用戶。

用法

使用ServiceWorker以前，須要先判斷瀏覽器是否支持，代碼以下：

若是支持，則註冊serviceWorker.js，註冊後，就能夠 install 並寫入具體的邏輯代碼了，簡單看個例子：

細心的同窗應該注意到這裏的 self 和 caches，這裏簡單提一下，SW 有一些全局變量

self: 表示 Service Worker 做用域, 也是全局變量
caches: 表示緩存
clients: 表示 Service Worker 接管的頁面
skipWaiting: 表示強制當前處在 waiting 狀態的腳本進入 activate 狀態

IndexedDB與異步存儲

Web Storage 包括 Local Storage、Session Storage。它們使用簡單的鍵值對來存儲，方便靈活，可是它們的內存較小，當遇到大量的結構化數據時，就沒法應對了。瀏覽器數據存儲方式還有IndexedDB、Web SQL 和 Cookie。接下來就來看下IndexedDB，它可以在客戶端存儲大量的結構化數據。例如，在PWA應用中，咱們能夠用它來離線存儲大量的聊天記錄。

關於IndexDB的介紹，引用這篇文章中的一段話：

indexedDB 是 HTML5 提供的一種本地存儲，通常用戶保存大量用戶數據並要求數據之間有搜索須要的場景，當網絡斷開的時候，能夠作一些離線應用，它比 SQL 方便，不用去寫一些特定的語句對數據進行操做，數據格式爲 json。

IndexDB 使用索引高效檢索的API，如打開一個IndexedDB數據庫，能夠這樣寫 window.indexedDB.open(name)。須要注意的是，IndexDB的功能之一就是它有異步的API，相似於 ajax 請求。咱們經過代碼來了解下

如代碼所示，打開數據庫後，有如下幾個回調：

onerror(err => {})
onsuccess(res => {})
onupgradeneeded(data => {})

分別處理數據庫打開失敗、成功的回調，以及請求數據庫版本變化的回調。

IndexDB 在使用時，須要注意如下幾點：

過大的數據不適合存放在IndexDB，瀏覽器初始化分配是50M
部分瀏覽器不支持IndexDB，使用前先用"indexedDB" in window判斷下
敏感數據不能存在客戶端
受到同源策略的限制

HTTPS

HTTPS，簡單來說就是 HTTP 的安全版，它是HTTP over SSL/TLS的縮寫。PWA 只能在 HTTPS 協議下使用，本地開發時支持 localhost 和 127.0.0.1。https下調試能夠用 github page。

HTTPS 會對傳輸的數據進行加密，創建一個信息安全通道，來保證傳輸過程當中的數據安全。同時，也會對網站服務器進行真實的身份認證。

關於HTTPS，你們都比較熟悉，這裏就很少贅述了。

入門與實踐

關於PWA開發與調試的，題葉老師寫了一篇文章PWA 入門: 寫個很是簡單的 PWA 頁面，介紹瞭如何開啓一塊兒簡單的PWA應用，感興趣的童鞋能夠去看看。

總結

PWA做爲下一代 Web 應用模型，在國外很是受重視，在國內一樣受到各大互聯網企業的歡迎。去年餓了麼也實現了一場PWA升級實踐。以前看過一篇文章，說PWA在印度廣受歡迎，由於當地2/3G網絡覆蓋比較多，PWA的優點就明顯了。下面借用列出了一些站點，從最開始的 Flipcart，到目前的 Instangram、Uber、Twitter、Starbucks 等，不只數量在增長，站點等級和質量也在不斷地提高。

圖片來源