PWA小記

前言

• 中國有不同的MobileFirst戰略，重原生應用，輕移動網頁；
• 移動網頁的弱勢：頁面設計優化有限，用戶體驗受網絡環境影響，網頁開啓不方便；
• web優點是產品分發
• app優點是產品使用和交互

一. PWA帶來的特性

• 可以顯著提升應用加載速度，快速響應，而且有平滑的動畫響應用戶的操做
• 甚至讓 web 應用能夠在離線環境使用 （Service Worker & Cache API），即便在不穩定的網絡環境下，也能瞬間加載並展示
• web 應用可以像原生應用同樣被添加到主屏、全屏執行 （Web App Manifest），具備沉浸式的用戶體驗
• 進一步提升 web 應用與操做系統集成能力，讓 web 應用能在未被激活時發起推送通知 （Push API 與 Notification API） 

二. 相關技術

• Service Worker
• App Manifest（將APP安裝至主屏幕）
• Push API（服務端消息推送，ios目前不支持）
• Notifications API（容許App向用戶顯示系統通知，目前201808移動端不支持）
• Background Sync（延遲發動用戶行爲，直至網絡穩定）
• IndexedDB（本地nosql數據庫）

三. Service Worker生命週期（下圖來自https://bitsofco.de/the-service-worker-lifecycle/）

• install 事件中通常會將 cacheList（註冊成功後要當即緩存的資源列表） 中要緩存的內容經過 addAll 方法，請求一遍放入 caches 中
• active 事件中一般作一些過時資源釋放的工做，匹配到就從 caches 中刪除
• fetch事件中編寫緩存策略

四. 註銷全部Service Worker，能夠用getRegistrations

let sw = navigator.serviceWorker;
sw.getRegistrations ? sw.getRegistrations().then(function(sws) {
  sws.forEach(function(s) {
    s.unregister();
  });
}) : sw.getRegistration && sw.getRegistration().then(function(s) {
  s && s.unregister();
});

五. 一些關於Service Worker的特色

• 要求https或本地localhost；
• 運行在它本身的全局腳本上下文中（self）；不綁定到具體的網頁，沒法訪問dom等對象；
• 一旦被 install，就永遠存在，除非被手動 unregister；
• 異步實現基於 Promise和fetch；
• Service Worker 的緩存機制是依賴 Cache API實現的；
• 註銷了Service Worker，cache仍是要手動delete的；
• event.waitUntil() 傳入一個 Promise 爲參數，等到該 Promise 爲 resolve 狀態爲止；
• self.skipWaiting() 執行該方法表示強制當前處在 waiting 狀態的 Service Worker 進入 activate 狀態；
• self.clients.claim() 在 activate 事件回調中執行該方法表示取得頁面的控制權, 這樣以後打開頁面都會使用版本更新的緩存。舊的 Service Worker 腳本再也不控制着頁面，以後會被中止；
• 爲保證首屏渲染性能，能夠把Service Worker放在頁面onload回調函數裏註冊；

六. Manifest

• 支持 HTTPS 訪問
• 註冊 Service Worker
• 部署 manifest.json （<link rel='manifest' href='./manifest.json'>）

七. Workbox

      GoogleChrome 團隊推出的一套 Web App 靜態資源和請求結果的本地存儲的解決方案，該解決方案包含一些 Js 庫和構建工具