摘要：再次修改控制臺輸出也就是說激活過程中的任何錯誤不影響被激活腦洞下新激活過程中說明頁面已經沒有被其他控制了，所以事件回調函數的執行失敗并不會影響被激活。

ServiceWorker本身是有狀態的（installing，installed，activating，activated，redundant），這些狀態構成了ServiceWorker生命周期：

生命周期可細分為兩個過程：

安裝過程(installing，installed)

激活過程(activating, activated)

當使用方法navigator.serviceWorker.register注冊一個新的ServiceWorker時，瀏覽器會下載JS腳本，解析腳本。這時ServiceWorker處于installing狀態。如果安裝成功，則進入installed狀態，否則會進入redundant狀態。

處于installing時會觸發ServiceWorkerGlobalScope上下文的install事件。
index.html:

sw.js 文件內容：

self.addEventListener("install", function(event) {
    console.log("install callback")
})

可通過registration.installing屬性訪問處于install狀態的ServiceWorker；

在ServiceWorkerGlobalScope中可以綁定多個install事件回調函數，多個事件回調函數的參數是同一個InstallEvent對象；

如果install事件回調函數拋異常，則視為安裝失敗，ServiceWorker會進入redundant狀態；

如果回調函數里調用installEvent.waitUntil(promise1)方法，則promise1被resolved時ServiceWorker對象才被installed，如果promise1被rejected則SW安裝失敗（redundant）；

同一個事件回調函數或者多個事件回調函數可以多次調用installEvent.waitUntil(promise)方法，則表達所有的promise都被resolved時SW對象才被installed，只要存在promise被rejected則SW安裝失敗（redundant）。

修改sw.js內容，重新注冊sw：

self.addEventListener("install", function(event) {
    event._from = "callback1"
    console.log("install callback 1: " + (Date.now()/1000))
    var i = 0;
    while(i < 1000000) {
        ++i;
    }
    // 多次調用
    event.waitUntil(new Promise(function(resolve) {
        setTimeout(() => {
            console.log("resolve 2s")
            resolve()
        }, 2000)
    }))
    event.waitUntil(new Promise(function(resolve, reject) {
        setTimeout(() => {
            console.log("resolve 3s")
            resolve() // 
        }, 3000)
    }))
})

// 多次綁定Install事件
self.addEventListener("install", function(event) {
    event._from = "callback2"
    console.log("install callback 2: " + (Date.now()/1000))
    event.waitUntil(new Promise(function(resolve) {
        setTimeout(() => {
            console.log("resolve 5s")
            resolve()
        }, 5000)
    }))
})

觀察控制臺輸出

InstallEvent對象從父對象ExtendableEvent繼承了waitUntil方法。該方法延長了事件對象的生存期。當傳給waitUntil方法的Promise對象轉成終態（resolved/rejected）才認為事件對象被處理完了。在事件對象被處理完之前ServiceWorker不會進入下一個狀態（installed或者redundant）。

ServiceWorker成功安裝后便進入installed狀態。至此Service完成了安裝過程，等待進入激活過程。

可通過registration.waiting屬性訪問處于installed狀態的ServiceWorker（見上例）；

如果頁面沒有激活的ServiceWorker管理，則ServiceWorker進入activating狀態。

ServiceWoker安裝成功后進入activating狀態。

處于activating時會觸發ServiceWorkerGlobalScope上下文的activate事件。

可以綁定多個事件回調函數，多個事件回調ActivateEvent對象是同一個對象；

如果回調函數里調用activateEvent.waitUntil(promise1)方法，則表示promise1被resolved/rejected時SW對象才進入下一個狀態activated；

同一個事件回調函數或者多個事件回調函數可以多次調用activateEvent.waitUntil(promise)方法，則表達所有的promise都被resolved/rejected時SW對象才進入下一個狀態activated；
修改sw.js文件：

self.addEventListener("activate", function(event) {
    event._from = "callback1"
    console.log("activate callback 1: " + (Date.now()/1000))
    var i = 0;
    while(i < 1000000) {
        ++i;
    }
    event.waitUntil(new Promise(function(resolve, reject) {
        setTimeout(() => {
            console.log("resolve 2s")
            resolve()
        }, 2000)
    }))
    event.waitUntil(new Promise(function(resolve, reject) {
        setTimeout(() => {
            console.log("resolve 4s")
            resolve()
        }, 4000)
    }))
})

self.addEventListener("activate", (event) => {
    event.waitUntil(new Promise((resolve, reject) =>{
        setTimeout(() => {
            resolve("resolve activate")
        }, 5000)
    }))
})

控制臺輸出：

跟install事件回調函數不一樣的是在activate事件回調函數里拋異常，或者傳給activateEvent.waitUntil(promise1)方法的promise被reject都不會影響ServiceWorker進入activated狀態。
再次修改sw.js:

self.addEventListener("activate", function(event) {
    event._from = "callback1"
    console.log("activate callback 1: " + (Date.now()/1000))
    var i = 0;
    while(i < 1000000) {
        ++i;
    }
    event.waitUntil(new Promise(function(resolve, reject) {
        setTimeout(() => {
            console.log("resolve 2s")
            resolve()
        }, 2000)
    }))
    event.waitUntil(new Promise(function(resolve, reject) {
        setTimeout(() => {
            console.log("resolve 4s")
            resolve()
        }, 4000)
    }))
})

self.addEventListener("activate", (event) => {
    throw "error"
    event.waitUntil(new Promise((resolve, reject) =>{
        setTimeout(() => {
            resolve("reject activate")
        }, 1)
    }))
})

self.addEventListener("activate", (event) => {
    event.waitUntil(new Promise((resolve, reject) =>{
        setTimeout(() => {
            reject("reject activate")
        }, 5000)
    }))
})

控制臺輸出：

也就是說激活過程中的任何錯誤不影響ServiceWoker被激活（腦洞下：新SW激活過程中說明頁面已經沒有被其他SW控制了，所以activate事件回調函數的執行失敗并不會影響SW被激活。），注意這一點跟其他文檔描述的可能不太一樣。

這時ServiceWorker可以控制頁面了，可以監聽功能事件了，如fetch,push事件。默認情況下ServiceWorker只能控制在其激活成功后才加載完成的頁面。

ServiceWorker控制頁面后就可以監聽fetch事件了: 捕獲請求，構建響應。注意：保證一個請求只有一個響應

可以綁定多個fetch事件，并且多個回調函數的fetchEvent是同一個對象；

如果回調函數內成功調用了fetchEvent.respondWith方法，則后面的回調函數不會被執行；

回調函數里多次調用fetchEvent.respondWith會報錯的，即一個request只能有一個reponse；

回調函數里最好是同步的方式調用fetchEvent.respondWith，異步調用不會阻止后面的后調函數執行, 很容易會造成多個reponse，導致錯誤3；

如果所有的回調函數里都沒有調用fetchEvent.respondWith方法則會采用瀏覽器默認的fetch事件回調函數處理方式，即走網絡請求；

fetch回調函數還可以調用waitUntil方法，來延長FetchEvent事件對象的生命，如果有FetchEent對象還未處理完瀏覽器是不會自動關閉SW的。

redundant狀態是ServiceWorker的終態。 關于serviceWorker如何變成redundant狀態在Lavas Service Worker 生命周期和 the-service-worker-lifecycle參考中列舉了3種，但是測試發現激活失敗并不會導致哎，見上例。在這本書里Building Progressive Web Apps by Tal Ater的觀點貌似論證了我們代碼。這里再匯總下進入redundant的case：

register失敗，如多次調用register，后調用注冊的SW會變成redundant

安裝失敗

被新版本的ServiceWorker替換

再強調下激活過程不會導致ServiceWorker變成redundant狀態。

Google 服務工作線程生命周期

Chapter 4. Service Worker Lifecycle and Cache Management

The Service Worker Lifecycle

Lavas Service Worker 生命周期