Service Worker基礎知識整理

時間 2019-11-09

標籤 service worker 基礎知識整理简体版

原文原文鏈接

Service Worker是什麼

service worker 是獨立於當前頁面的一段運行在瀏覽器後臺進程裏的腳本。它的特性將包括推送消息,背景後臺同步， geofencing（地理圍欄定位），攔截和處理網絡請求。javascript

這個 API 會讓人興奮的緣由是，它可使你的應用先訪問本地緩存資源，因此在離線狀態時，在沒有經過網絡接收到更多的數據前，仍能夠提供基本的功能（通常稱之爲 Offline First）。css

在 service worker 以前，另外一個叫作 APP Cache 的 api 也能夠提供離線體驗。APP Cache 的的主要問題是坑比較多，並且其被設計爲只適合於單頁 web 應用程序，對於傳統的多頁網站則不適合。service worker 的設計規避了這些痛點。java

關於 service worker 的一些注意點：git

service worker 是一個JavaScript worker ,因此它不能直接訪問 DOM 。但 service worker 能夠經過postMessage 接口與跟其相關的頁面進行通訊,發送消息,從而讓這些頁面在有須要的時候去操縱 DOM 。
Service worker 是一個可編程的網絡代理，容許你去控制如何處理頁面的網絡請求，能夠處理fetch請求。
Service worker 在不使用時將被終止，並會在須要的時候從新啓動，所以你不能把onfetch 和 onmessage事件來做爲全局依賴處理程序。若是你須要持久話一些信息並在從新啓動Service worker後使用他，可使用 IndexedDBAPI ，service worker 支持。
Service Worker 的緩存機制是依賴 Cache API 實現的
Service worker 普遍使用了 promise。
Service worker依賴 HTML5 fetch API
Service Workers 要求必須在 HTTPS 下才能運行

Service Worker生命週期

註冊service worker，在網頁上生效github
安裝成功，激活或者安裝失敗（下次加載會嘗試從新安裝）web
激活後，在sw的做用域下做用全部的頁面，首次控制sw不會生效，下次加載頁面纔會生效。編程
sw做用頁面後，處理fetch（網絡請求）和message（頁面消息）事件或者被終止（節省內存）。json

須要提早掌握的API

Cache API基本使用

（1）檢測api是否存在api

if('caches' in window) {
        // Has support!
    }

（2）caches.open，建立緩存總對象。以下建立名爲 test-cache 的緩存。數組

caches.open('test-cache').then(function(cache) {
        // Cache is created and accessible
    });

（3）cache.add和cache.addAll，添加緩存內容。其中cache.add只添加一個，cache.addAll能夠添加多個。

 caches.open('test-cache').then(function(cache) { 
        cache.addAll(['/', '/images/logo.png'])
        .then(function() { 
        // Cached!
        
        // or use cache.add
        cache.add('/page/1');  // "/page/1" URL will be fetched and cached!
     });
    });

（4）cache.keys()，查看已經緩存的數據

caches.open('test-cache').then(function(cache) { 
        cache.keys().then(function(cachedRequests) { 
            console.log(cachedRequests); // [Request, Request]
        });
    });

（5）cache.match和cache.matchAll，匹配緩存文件路徑

caches.open('test-cache').then(function(cache) {
        cache.match('/page/1').then(function(matchedResponse) {
            console.log(matchedResponse);
        });
    });

（6）cache.delete，刪除緩存。

 caches.open('test-cache').then(function(cache) {
        cache.delete('/page/1');
    });

Fetch API基本使用

// url (required), options (optional)
fetch('https://davidwalsh.name/some/url', {
	method: 'get'
}).then(function(response) {
	
}).catch(function(err) {
	// Error :(
});

其中options對象包含如下屬性：

method - GET, POST, PUT, DELETE, HEAD
url - 請求的連接
headers - 請求的header對象
referrer - 請求的referrer對象
mode - cors, no-cors, same-origin
credentials - 設置請求可不能夠攜帶cookie
redirect - follow, error, manual
integrity - 子資源完整值
cache - 緩存模式 (default, reload, no-cache)

　能夠在fetch中傳入Request對象實例：

var request = new Request('https://davidwalsh.name/users.json', {
	method: 'POST', 
	mode: 'cors', 
	redirect: 'follow',
	headers: new Headers({
		'Content-Type': 'text/plain'
	})
});

// Now use it!
fetch(request).then(function() { /* handle response */ });

（3）能夠自定義返回的Response對象實例，其中的options有：

type - basic, cors
url
useFinalURL - 上面的url參數是否是最終的URL
status - 狀態碼(ex: 200, 404, etc.)
ok - 是否成功響應 (範圍在 200-299)
statusText - 狀態碼 (ex: OK)
headers - 響應的headers對象

另外Response的實例還具有如下方法：

clone() - 建立Response對象的克隆。
error() - 返回與網絡錯誤關聯的新Response對象。
redirect() - 使用不一樣的URL建立新響應。
arrayBuffer() - 返回使用ArrayBuffer解析的promise。
blob() - 返回使用Blob解析的promise。
formData() - 返回使用FormData對象解析的promise。
json() - 返回使用JSON對象解析的promise。
text() - 返回使用USVString（文本）解析的promise。

// Create your own response for service worker testing
// new Response(BODY, OPTIONS)
var response = new Response('.....', {
	ok: false,
	status: 404,
	url: '/'
});

// The fetch's `then` gets a Response instance back
fetch('https://davidwalsh.name/')
	.then(function(responseObj) {
		console.log('status: ', responseObj.status);
	});

Service Worker的使用

兼容低版本，注入Cache API的一個polyfill，Service Worker須要依賴Cache API：

self.importScripts('./serviceworker-cache-polyfill.js');

註冊service worker：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

上面的代碼檢查 service worker API 是否可用，若是可用， /sw.js 這個文件將會做爲 service worker 被註冊。

若是這個 service worker 已經被註冊過，瀏覽器會自動忽略上面的代碼。

有一個特別要注意是 service worker 文件的路徑。你必定注意到，在這個例子中，service worker 文件被放在這個域的根目錄下，這意味着 service worker是跟網站同源的。換句話說，這個 service worker 將會獲取到這個域下的全部 fetch 事件。若是 service worker文件註冊到/example/sw.js ，那麼 service worker 只能收到 /example/ 路徑下的 fetch 事件（好比： /example/page1/, /example/page2/）。

安裝service worker：

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

上面代碼聲明瞭須要緩存的內容，若是全部的文件都緩存成功，service worker 就安裝成功了。若是任何一個文件下載失敗，那麼安裝步驟就會失敗。這個方式依賴於你本身指定的資源，但這意味着，你須要很是仔細地肯定哪些文件須要被緩存。指定了太多文件的話，會增長失敗率。

緩存和返回請求

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

    // IMPORTANT: Clone the request. A request is a stream and
    // can only be consumed once. Since we are consuming this
    // once by cache and once by the browser for fetch, we need
    // to clone the response
    var fetchRequest = event.request.clone();

    return fetch(fetchRequest).then(
      function(response) {
        // Check if we received a valid response
        if(!response || response.status !== 200 || response.type !== 'basic') {
          return response;
        }

        // IMPORTANT: Clone the response. A response is a stream
        // and because we want the browser to consume the response
        // as well as the cache consuming the response, we need
        // to clone it so we have 2 stream.
        var responseToCache = response.clone();

        caches.open(CACHE_NAME)
          .then(function(cache) {
            cache.put(event.request, responseToCache);
          });

        return response;
      }
    );
  })
);

若是咱們想在緩存中添加新的請求緩存，能夠經過處理fetch請求的response，將其添加到緩存中便可。代碼裏咱們作了如下事情：

添加一個 callback 到 fetch 請求的 .then 方法中。一旦咱們得到一個 response，咱們進行以下的檢查:
- 確保 response 有效
- 檢查 response 的狀態是200
- 確保 response 的類型是 basic 類型的，這說明請求是同源的，這意味着第三方的請求不能被緩存。
若是檢查經過會clone 這個請求。這麼作的緣由是若是 response 是一個 Stream，那麼它的 body 只能被消費一次。因此爲了讓瀏覽器跟緩存都使用這個body，咱們必須克隆這個 body，一份到瀏覽器，一份到緩存中緩存。

從新激活

你的 service worker 總會有要更新的時候。在那時，你須要按照如下步驟來更新：

更新你 service worker 的 JavaScript 文件當用戶瀏覽你的網站時，瀏覽器嘗試在後臺從新下載 service worker 的腳本文件。通過對比，只要服務器上的文件和本地文件有一個字節不一樣，這個文件就認爲是新的。
以後更新後的 service worker 啓動並觸發 install 事件。

此時，當前頁面生效的依然是老版本的 service worker，新的 service worker 會進入「waiting」狀態。
當頁面關閉以後，老的 service worker 會被幹掉，新的 servicer worker 接管頁面一旦新的 service worker 生效後會觸發 activate 事件。一般來說，須要在 activate 的 callback 中進行 cache 管理，來清理老的 cache。咱們在 activate 而不是 install 的時候進行的緣由，是若是咱們在 install 的時候進行清理，那麼老的 service worker 仍然在控制頁面，他們依賴的緩存就失效了，所以就會忽然被中止。

以前咱們使用的緩存能夠叫 my-site-cache-v1 ，咱們想把這個拆封到多個緩存，一份給頁面使用，一份給博客文章使用。這意味着，install 步驟裏，咱們要建立兩個緩存： pages-cache-v1 和 blog-posts-cache-v1。在 activite 步驟裏，咱們須要刪除舊的 my-site-cache-v1。

下面的代碼會遍歷全部的緩存，並刪除掉不在 cacheWhitelist 數組（咱們定義的緩存白名單）中的緩存。

self.addEventListener('activate', function(event) {

  var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});