PWA的探索與應用_ZenDei技術網路在線

本文由雲+社區發表 PWA（Progressive Web App）起源背景傳統的Web網頁存在以下幾個問題：進入一個頁面必須要記住它的url或者加入書簽，入口不便捷；沒網路就沒響應，不具備離線能力；不像APP一樣能進行消息推送。 Native app：開發成本高軟體上線需要審核即使使 ...

本文由雲+社區發表

PWA（Progressive Web App）起源背景

傳統的Web網頁存在以下幾個問題：

進入一個頁面必須要記住它的url或者加入書簽，入口不便捷；
沒網路就沒響應，不具備離線能力；
不像APP一樣能進行消息推送。

Native app：

開發成本高
軟體上線需要審核
即使使用頻率不高，想使用一個app必須先下載安裝

PWA概念的提出

2016 年Google I/O 大會上提出一個 Next Web Generation 的概念。PWA是在傳統Web應用的基礎上，結合Manifest和service worker，完善Web應用的一些能力，比如：

添加至主屏幕，點擊主屏幕圖標可以實現啟動動畫以及隱藏地址欄
實現離線緩存功能，即使用戶手機沒有網路，依然可以使用一些離線功能
消息推送

PWA技術點

Web App Manifest

Web App Manifest 技術實現了將PWA網頁應用添加至桌面的功能，但該項技術目前仍處於實驗性階段，各瀏覽器支持度不高

image.png

PWA 站點部署的 manifest.json文件滿足以下條件時會自動顯示橫幅：

- short\\_name （主屏幕顯示）
- name （安裝橫幅顯示）
- icons （必須包含一個 mime 類型為 image/png 的圖標聲明）
- start\\_url （應用啟動地址）
- display （必須為 standalone 或 fullscreen）
- 站點註冊 Service Worker。
- 站點支持 HTTPS 訪問。
- 同一瀏覽器中站點至少被訪問兩次，間隔至少為 5 分鐘。

Service Worker

PWA應用的離線體驗、定期的後臺同步以及推送通知等功能的實現依賴於Service Worker技術，下圖為目前SW技術的支持度。

SW具有以下特征：

一個獨立的 worker 線程，獨立於當前網頁進程，有自己獨立的 worker context。
一旦被 install，就永遠存在，除非被手動 unregister
用到的時候可以直接喚醒，不用的時候自動睡眠
離線內容開發者可控
能向客戶端推送消息
不能直接操作 DOM
必須在 HTTPS 環境下才能工作
非同步實現，內部大都是通過 Promise 實現

Service Worker生命周期

installing：這個狀態發生在 SW 註冊之後開始安裝，install 事件回調中執行skipWaiting()方法表示強制當前處在 waiting 狀態的 Service Worker 進入 activate 狀態。
installed：SW已經完成了安裝，等待其他的 SW 線程被關閉。
activating：在這個狀態下清除其他的worker 以及關聯緩存的舊緩存資源，等待新的 SW線程被激活。在 activate 事件回調中執行self.clients.claim()方法表示取得頁面的控制權, 這樣之後打開頁面都會使用版本更新的緩存。舊的 Service Worker 腳本不再控制著頁面，之後會被停止。
activated：在這個狀態可以處理功能性的事件 fetch (請求)、sync (後臺同步)、push (推送)。
廢棄狀態 ( redundant )：這個狀態表示一個 Service Worker 的生命周期結束。

Service Worker 支持的事件

install：Service Worker 安裝成功後被觸發的事件，在事件處理函數中可以添加需要緩存的文件
activate：當 Service Worker 安裝完成後併進入激活狀態，會觸發 activate 事件。通過監聽 activate 事件你可以做一些預處理，如對舊版本的更新、對無用緩存的清理等。
message：Service Worker 運行於獨立 context 中，無法直接訪問當前頁面主線程的 DOM 等信息，但是通過 postMessage API，可以實現他們之間的消息傳遞，這樣主線程就可以接受 Service Worker 的指令操作 DOM。
fetch ：當瀏覽器在當前指定的 scope 下發起請求時，會觸發 fetch 事件，並得到傳有 response 參數的回調函數。fetch 事件特別重要，因為它能夠定義你的緩存策略。也就是說，你可以決定何時使用緩存數據，何時使用網路請求來的數據。
push：push 事件是為推送準備的。通過 PUSH API，當訂閱了推送服務後，可以使用推送方式喚醒 Service Worker 以響應來自系統消息傳遞服務的消息，即使用戶已經關閉了頁面。
sync：sync 事件由 background sync (後臺同步)發出。background sync 是 Google 配合 SW 推出的 API，用於為 Service Worker 提供一個可以實現註冊和監聽同步處理的方法。但它還不在 W3C Web API 標準中。在 Chrome 中這也只是一個實驗性功能，需要訪問 chrome://flags/#enable-experimental-web-platform-features ，開啟該功能，然後重啟生效。Sync 事件允許延遲網路任務，直到用戶連接上網路，它實現的功能通常被稱為後臺同步。這對於在離線模式下，確保用戶啟動的任何有網路依賴的任務，最終都將在網路再次可用時達到其預期目的，是非常有用的。

Service Worker 的工作原理

Service Worker是基於註冊、安裝、激活等步驟

註冊

if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
    navigator.serviceWorker.register('/jslearning/sw.js') // 預設作用域為jslearning下，也可以通過設置scope參數進行設置
        .then(function (registration) {
            // 註冊成功
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        })
        .catch(function (err) {
            // 註冊失敗:(
            console.log('ServiceWorker registration failed: ', err);
        });
});
}

安裝

this.addEventListener('install', function(event) {
  console.log('V1 installing…');
  //需要緩存的重要的高優先順序資源
  var vipUrlsToPrefetch = [
'./index.html'
  ];
  //次重要的資源
  var urlsToPrefetch = [
'./icon.png'
  ];
  event.waitUntil(
caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
  //urlsToPrefetch非重要資源，即使有資源載入失敗也不影響Service Worker安裝
  cache.addAll(urlsToPrefetch);
  //vipUrlsToPrefetch中資源全部請求成功，Service Worker安裝事件才順利完成，可以進入激活事件
  return cache.addAll(vipUrlsToPrefetch);
})
  );      
});

激活

//Service Worker激活事件
this.addEventListener('activate', function(event) {
  //在激活事件中清除非當前版本的緩存避免用戶存儲空間急劇膨脹
  event.waitUntil(caches.keys().then(function(cacheNames) {
console.log('V1 activate');
return Promise.all(cacheNames.map(function(cacheName) {
    if (cacheName !== OFFLINE_CACHE_NAME) {
      if(cacheName.indexOf(OFFLINE_CACHE_PREFIX) != -1) {
        return caches.delete(cacheName);
      }
    }
}));
  }));
});

Service Worker更新

如果線程的位元組與已有的SW線程位元組不同，瀏覽器則考慮更新SW線程。
更新的SW線程與現有SW線程一起啟動，並獲取自己的 install 事件。
如果新工作SW線程出現不正常狀態代碼（例如，404）、解析失敗，在執行中引發錯誤或在安裝期間被拒，則系統將捨棄新工作線程，但當前工作線程仍處於活動狀態。
安裝成功後，更新的工作線程將 wait，直到現有工作線程式控制制0個客戶端。
self.skipWaiting() 可跳過等待情況，這意味著sw線程在安裝完後立即激活。

Service Worker緩存策略

Service Worker緩存策略大部分在fetch與install時間中定義，對於某些固定不變的靜態資源，可以在Service Worker初次安裝的install事件中將其緩存，但資源過大或者網路不佳都會造成資源並未全部下載成功而導致Service Worker安裝被中斷安裝失敗。SW主要有以下幾類緩存策略：

不影響安裝的資源預緩存
漸進式緩存
僅使用緩存、僅使用網路
緩存優先、網路優先

// 漸進式緩存
var addToCache = function(req) {   
  return fetch(req.clone()).then(function(resp) {   
    var cacheResp = resp.clone();
    if (!resp.ok) {
      return resp;
    }
    caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
      cache.put(req.clone(), cacheResp);
    });
    return resp;
  });
};
 
this.addEventListener('fetch', function(event)  {
  event.respondWith(
     caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
          return cache.match(event.request);
      }).then(function(response) {
        if (response) {
            return response;
        } else {
            return addToCache(event.request);
        }
    })
  ); 
});

PWA應用可以通過開發者工具中的Application進行查看調試，如下圖所示：