摘要：在服務(wù)工作線程中，延長事件的壽命從而阻止瀏覽器在事件中的異步操作完成之前終止服務(wù)工作線程。在事件中，它延遲將視為已激活的，直到傳遞的被成功地。這主要用于確保任何功能事件不會(huì)被分派到對象，直到它升級(jí)數(shù)據(jù)庫模式并刪除過期的緩存條目。

看了很多介紹Service Worker的，看得都挺模糊的，所以決定自己寫一篇文件整理一下思路。

1、ServiceWorkerContainer：navigator.serviceWorker返回的就是Service WorkerContainer對象，主要是用戶在頁面注冊serviceWorker，調(diào)用方法：

navigator.serviceWorker.register(scriptURL, options)
    .then(function(ServiceWorkerRegistration) { ... })

2、ServiceWokrerGlobalScope：主要是用戶在sw.js文件的全局變量，即this的指向
3、ServiceWorkerRegistration：在頁面調(diào)用serviceWorker.register注冊返回一個(gè)Promise對象，當(dāng)resolve時(shí)傳遞給then的函數(shù)參數(shù)就是ServiceWorkerRegistration.
4、ServiceWorker：表示ServiceWorkerRegistration.installing || ServiceWorkerRegistration.waiting || ServiceWorkerRegistration.active

1、index.html

2、sw.js

var CACHE_NAME = "sw-test-v1";
this.addEventListener("install",function(event){
    console.log("installing...");
    event.waitUntil(caches.open(CACHE_NAME).then(function(cache){
        cache.addAll([
            "images/resource01.jpg",
            "images/resource02.jpg",
            ....
        ]);
    }));
});
this.addEventListener("fetch", function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                if (response) { // 緩存命中，返回緩存
                    return response;
                }
                // 請求是stream數(shù)據(jù)，只能使用一次，所以需要拷貝，一次用于緩存，一次用于瀏覽器請求
                var fetchRequest = event.request.clone();
                return fetch(fetchRequest)
                    .then(function(response) {
                        if(!response || response.status !== 200) {
                            return response;
                        }
                        // 響應(yīng)也是stream，只能使用一次，一次用于緩存，一次用于瀏覽器響應(yīng)
                        var responseToCache = response.clone();
                        caches.open(CACHE_NAME)
                            .then(function(cache) {
                                cache.put(event.request, responseToCache);
                            });
                        return response;
                    });
            })
  );
});

sw.js工作內(nèi)容：首先監(jiān)聽install事件，調(diào)用cache.addAll()方法將靜態(tài)資源加入緩存中。然后監(jiān)聽fetch事件，判斷當(dāng)前請求的url是否在緩存中，如果在則返回內(nèi)容，如果不在，則向服務(wù)端發(fā)起請求數(shù)據(jù)，將返回的數(shù)據(jù)放入緩存中并且返回給瀏覽器。
代碼中的方法解析：
1、caches.match()：檢查給定的Request對象或url字符串是否是一個(gè)已存儲(chǔ)的 Response對象的key. 該方法針對 Response 返回一個(gè) Promise ，如果沒有匹配則返回 undefined 。cache對象按創(chuàng)建順序查詢，等同于在每個(gè)緩存上調(diào)用 cache.match() 方法 （按照caches.keys()返回的順序) 直到返回Response 對象。語法如下：

caches.match(request, options).then(function(response) {
  // Do something with the response
});

參數(shù)解析：

options: 可選，配置對象中的屬性控制在匹配操作中如何進(jìn)行匹配選擇，具體屬性如下：

ignoreSearch: Boolean值， 指定匹配過程是否應(yīng)該忽略u(píng)rl中查詢參數(shù)，默認(rèn) false。

ignoreMethod: Boolean 值，當(dāng)被設(shè)置為 true 時(shí)，將會(huì)阻止在匹配操作中對 Request請求的 http 方式的驗(yàn)證 (通常只允許 GET 和 HEAD 兩種請求方式)。該參數(shù)默認(rèn)為 false.

ignoreVary: Boolean 值，當(dāng)該字段被設(shè)置為 true, 告知在匹配操作中忽略對VARY頭信息的匹配。換句話說，當(dāng)請求 URL 匹配上，你將獲取匹配的 Response 對象，無論請求的 VARY 頭存在或者沒有。該參數(shù)默認(rèn)為 false.

cacheName: DOMString 值， 表示所要搜索的緩存名稱。

2、caches.open()：返回一個(gè)resolve為匹配 cacheName 的 cache 對象的 Promise .如果指定的 cache 不存在，則使用該 cacheName 創(chuàng)建一個(gè)新的cache并返回。

caches.open(cacheName).then(function(cache) {});

3、cache.addAll()：將靜態(tài)資源加入緩存中

cache.addAll(requests[]).then(function() {
  // 已加入緩存
});

該方法會(huì)覆蓋掉以前存儲(chǔ)在緩存中的匹配的健值對，但是后面監(jiān)聽對fetch事件中調(diào)用cache.put()方法又會(huì)覆蓋掉之前在cache.addAll()中添加到緩存中所匹配的健值對。
4、cache.put()：允許將鍵/值對添加到當(dāng)前的 Cache 對象中.它將覆蓋先前存儲(chǔ)在匹配請求的cache中的任何鍵/值對。
注意: Cache.add/Cache.addAll 不會(huì)緩存 Response.status 值不在200范圍內(nèi)的響應(yīng)，而 Cache.put 允許你存儲(chǔ)任何請求/響應(yīng)對。因此，Cache.add/Cache.addAll 不能用于不透明的響應(yīng)，而 Cache.put 可以。

cache.put(request, response).then(function() {
  // request/response pair has been added to the cache
});

5、event.waitUntil()：擴(kuò)展了事件的生命周期。在服務(wù)工作線程中，延長事件的壽命從而阻止瀏覽器在事件中的異步操作完成之前終止服務(wù)工作線程。
在install事件中，它延遲將被安裝的worker視為 installing ，直到傳遞的 Promise 被成功地resolve。主要用于確保：服務(wù)工作線程在所有依賴的核心cache被緩存之前都不會(huì)被安裝。
在activate事件中，它延遲將 active worker視為已激活的，直到傳遞的 Promise 被成功地resolve。這主要用于確保：任何功能事件不會(huì)被分派到 ServiceWorkerGlobalScope 對象，直到它升級(jí)數(shù)據(jù)庫模式并刪除過期的緩存條目。
當(dāng)該方法運(yùn)行時(shí)，如果 Promise 是resolved，任何事情都不會(huì)發(fā)生；如果 Promise 是rejected，installing 或者 active worker的 state 會(huì)被設(shè)置為redundant。
語法：event.waitUntil(promise)
6、event.respondWith()：阻止瀏覽器默認(rèn)的fetch處理方法，允許用戶自己提供一個(gè)promise對象作為response返回。

fetchEvent.respondWith(
  // Promise that resolves to a Response.
?)

Parameters：A Promise for a Response.

上面的sw.js只是一個(gè)最基本的serviceWorker，在日常工作中，我們還需要考慮更新。

this.addEventListener("install",function(event){
    this.skipWaiting();
});
this.addEventListener("activate", function (event) {
    this.clients.claim();
});

skipWaiting(): 強(qiáng)制等待中的service worker跳過等待成為激活的service worker。雖然該方法在任何時(shí)候都是可以調(diào)用的，但是只有在新安裝的service worker仍然處于等待狀態(tài)時(shí)才會(huì)起作用；所以在install事件里面調(diào)用是非常常見的。與clients.claim()一起調(diào)用以確保更新當(dāng)前的client和其他激活的clients。
clients.claim(): 允許一個(gè)激活的service worker將其設(shè)置為其他同scope下的clients的controller。該方法會(huì)觸發(fā)要被該service worker控制的其他任何clients的navigator.serviceWorker上的"controllerchange"事件。
當(dāng)一個(gè)service worker初始注冊時(shí)并不會(huì)使用該service worker，直到下次加載頁面時(shí)。該方法會(huì)讓這些頁面直接被控制，注意，這將導(dǎo)致你的service worker將控制定期加載的頁面，也有可能控制其他service worker加載的頁面。

手動(dòng)更新主要是調(diào)用在index.html注冊serviceWorker時(shí)的registration的update()方法：ServiceWorkerRegistration.update();
它會(huì)獲取worker的腳本URL，如果新的worker與當(dāng)前的worker并不是完全相同的（byte-by-byte identical）則安裝新的worker；如果前一次worker獲取發(fā)生在24小時(shí)之前，則worker的獲取將繞過任何瀏覽器緩存。

navigator.serviceWorker.register("./sw.js").then(function(registration){
   registration.update();
});

參考學(xué)習(xí)鏈接：
https://developer.mozilla.org...
https://developers.google.cn/...
https://lavas.baidu.com/pwa/o...
https://segmentfault.com/a/11...