【Web微知識系列】 Service Workers

更新於 2023/04/23發佈於 2023/04/23閱讀時間約 15 分鐘

Service Workers

Service worker與Web workers相同，也都是一段運行在瀏覽器後台的腳本，提供一些不需要與頁面直接交互的功能(操作dom)，主要處理網路相關的問題，可以攔截網路請求進行相對應的優化動作，我們把它想像成與伺服器之間的代理服務器可能會比較容易理解，當網路環境不佳時便回應快取資源，待網路順暢後同步最新資料，因此能提高更好的離線體驗，我們可能會想說為什麼有了Web workers、AppCache這類的API還需要Service worker呢?因為這些既有的功能主要都由我們自己去handle一些細緻的操作，過程非常繁瑣，因此發展出Service worker，背後幫我們解決掉許多事情(error handler、http request listener…)

功能

資源快取
離線應用
多頁面傳遞(Post Message)
推播通知
後台自動更新

生命週期

註冊Service worker
註冊之後瀏覽器會在背景啟動Service Worker的安裝
安裝過程中會將設定的靜態資源進行緩存，待所有靜態資源緩存成功後進入Activated狀態
如果過程中任何一個資源不能成功緩存則代表安裝失敗，進入error，待重新安裝
進入Activated狀態後進行監聽，當request或post message發生時則觸發相對應動作
Terminated狀態由瀏覽器決定是否銷毀，如果長期不使用或者記憶體不足時，則可能銷毀這個worker

Worker中常使用的事件

簡單實作Service Worker

註冊Service Worker

<html>
               <body>
                  <script>
                     if ('serviceWorker' in navigator) {
                        navigator.serviceWorker.register('./sw.js')
                           .then(reg => console.log(reg))
                           .catch(err => console.log(err));
                     }
                  </script>
               </body></html>

撰寫sw.js腳本檔

const cacheUrl = [
               './index.html',
               './script.js',
               './car.svg'
            ];
            const cacheName = 'precache' + (self.registration ? self.registration.scope: '');
            self.addEventListener('install', (event) => {
               event.waitUntil(
                  caches.open(cacheName)
                     .then((cache) => {
                        console.log('open cache');
                        return cache.addAll(cacheUrl);
                     });
               );
            });
            //clean cached files
            self.addEventListener('activate', (event) => {
               event.waitUntil(
                  caches.keys().then(function(cacheNames) {
                                    var promiseArr = cacheNames.map(function(item) {
                                            if (item !== cacheName) {
                                                    return caches.delete(item);
                                            }
                                    })
                                    return Promise.all(promiseArr);
                            })
               )
            });
            self.addEventListener('fetch', (event) => {
                //cache first
                event.respondWith(caches.match(event.request).then(res => {
                  if (res) {
                     console.log('match');
                     return res;
                  }
                  return fetch(event.request);
               }));
            });

cache的策略

Cache only

這種方式下任何請求都會從Cache storage取得

self.addEventListener('fetch', function(event) {
      event.respondWith(caches.match(event.request));
    });

Network only

這種方式下任何請求都不會跟Cache storage打交道，直接向後端發送

self.addEventListener('fetch', function(event) {
      event.respondWith(fetch(event.request));
      // or simply don't call event.respondWith, which
      // will result in default browser behaviour
    });

Cache first

頁面發送request時會先從Cache storage中存取若發現該請求尚未被緩存到則會改為Network請求

self.addEventListener('fetch', function(event) {
      event.respondWith(
        caches.match(event.request).then(function(response) {
          return response || fetch(event.request);
        })
      );
    });

Network first

頁面發送request時會先由Network向後端請求，若請求失敗則改由Cache storage請求

self.addEventListener('fetch', function(event) {
      event.respondWith(
        fetch(event.request).catch(function() {
          return caches.match(event.request);
        })
      );
    });

Cache & network race

頁面發送request時同時向Cache及Network請求，哪一個請求先回來則使用該response

// Promise.race is no good to us because it rejects if// a promise rejects before fulfilling. Let's make a proper// race function:function promiseAny(promises) {
      return new Promise((resolve, reject) => {
        // make sure promises are all promises
        promises = promises.map(p => Promise.resolve(p));
        // resolve this promise as soon as one resolves
        promises.forEach(p => p.then(resolve));
        // reject if all promises reject
        promises.reduce((a, b) => a.catch(() => b))
          .catch(() => reject(Error("All failed")));
      });
    };    self.addEventListener('fetch', function(event) {
      event.respondWith(
        promiseAny([
          caches.match(event.request),
          fetch(event.request)
        ])
      );
    });

Cache then network

頁面發送request時先由Cache storage取得顯示給user，然後再由Network取得後更新資料。

Code in Page

var networkDataReceived = false;    startSpinner();    // fetch fresh data
    var networkUpdate = fetch('/data.json').then(function(response) {
      return response.json();
    }).then(function(data) {
      networkDataReceived = true;
      updatePage();
    });    // fetch cached data
    caches.match('/data.json').then(function(response) {
      if (!response) throw Error("No data");
      return response.json();
    }).then(function(data) {
      // don't overwrite newer network data
      if (!networkDataReceived) {
        updatePage(data);
      }
    }).catch(function() {
      // we didn't get cached data, the network is our last hope:
      return networkUpdate;
    }).catch(showErrorMessage).then(stopSpinner);

Code in the ServiceWorker: 當網路請求資源成功時，更新緩存內容

self.addEventListener('fetch', function(event) {
      event.respondWith(
        caches.open('mysite-dynamic').then(function(cache) {
          return fetch(event.request).then(function(response) {
            cache.put(event.request, response.clone());
            return response;
          });
        })
      );
    });

實際操作

Service worker相關的library

sw-precache主要根據配置來產生service worker腳本檔的工具，而sw-toolbox則是sw-precache的加強工具，可以針對動態請求進行細部控制

sw-precache: 主要專注在靜態檔案的cache
sw-toolbox: 針對動態請求進行細部操作

各家瀏覽器支援狀況

為什麼會看到廣告

#web

阿Han的沙龍阿Han的軟體技術棧 💡Web

阿Han的沙龍

116會員

261內容數

哈囉，我是阿Han，是一位 👩‍💻 軟體研發工程師，喜歡閱讀、學習、撰寫文章及教學，擅長以圖代文，化繁為簡，除了幫助自己釐清思路之外，也希望藉由圖解的方式幫助大家共同學習，甚至手把手帶您設計出高品質的軟體產品。

留言0

查看全部

發表第一個留言支持創作者！

阿Han的沙龍的其他內容

Cookieless時代趨勢來臨，與我們息息相關的隱私與行銷方式如何應對呢？

Cookie簡介與個人隱私議題在談Cookieless之前我們先來了解什麼是Cookie，這裡的Cookie並不是餅乾的意思，而是為了讓人們在網路上通訊時，能夠創造更無縫的體驗，想像一下，假設我們在使用網站時，每切換一頁就要進行登入一次，我想大部分的人都已經抓狂並放棄使用的吧！而Cookie的出

#web

Cookieless系列: FLoC能解決隱私議題嗎？

我們前一篇有介紹過「Cookieless時代趨勢來臨，與我們息息相關的隱私與行銷方式如何應對呢？」建議先行閱讀，裡面包含Cookie的基本觀念，以及為什麼要捨棄的原因，接下來才進入到本篇的主軸，將會針對FLoC的基本原理、是否能解決個人隱私議題為主軸進行探討。 FLoC的全名是 Federated

#web

Cookieless系列: Google Topic讓我們主宰自己的隱私權益

延續前一篇談論的主題「Cookieless系列: Floc能解決隱私議題嗎？」，我們已經瞭解到FLoC這項技術解決的隱私的什麼問題，也明白事實上還是存在著風險的，因此Google準備捨棄FLoC迎接新的技術Google Topic，我們也會針對這項技術進行簡單的介紹，共同來學習頂尖的科技公司如何針對

#web

【Web微知識系列】如何維持溝通不斷訊？關於HTTP Keep-Alive

今天來聊聊我們常常使用的網頁，背後怎麼讓我們用的更順暢的一門傳輸方式，HTTP Keep-Alive，透過一點點的小改變，讓傳輸效率提升，減少非必要的浪費。當我們溝通的過程中沒有KeepAlive的狀況下，會有多次往來的狀況，這樣對雙方來說開銷成本是非常大的，因此為了改善這個現象，加入了一個機制，

#web

【Web微知識系列】系統之間的訂閱機制，Webhook是什麼？

我們前一篇介紹了「【Web系列】訂閱技術的基石，RSS Feed是什麼？」，相信也對於訂閱的機制具備一定的認識了，雖然RSS已經能夠滿足我們訂閱的一些基本需求，但由於主要的訂閱端還是定期去檢查更新資訊，因此假設我們想要在最短時間內掌握最新資訊時，仍會有一些延遲，再者也非常浪費頻寬。我們為什麼不能改

#web #webhook #資訊

【Web微知識系列】HTTP的演進帶來了什麼改變？未來的起手式HTTP/3的QUIC又是什麼？

超文本傳輸協定（HyperText Transfer Protocol，縮寫: HTTP），主要做為數據通訊的基礎協定，舉凡我們上網的網頁、圖片…，都是由HTTP協定為基底標準，讓服務端與用戶端可以相互通訊，達到互動、傳遞資訊的作用，而從最初版的單向傳輸也隨著時代的演進，應用漸趨複雜的趨勢下慢慢優化

#web #HTTP