本文涉及幾個知識點：fetch、caches、indexDB 等都不會詳細介紹，僅對于其中某些點帶過

一. 概念

serviceWorker，服務工作線程，顧名思義，只是作為工作線程存在，不摻和到JS主線程中來，介于 瀏覽器 & 服務器中間層，可攔截指定 client 所發起的所有請求

二. 用途

目前 PWA（Progress Web App） 的概念很火，大致就是讓 web 也跟 app 一樣，可以實現添加到桌面、消息推送、離線使用等功能，如 餓了么 在三月份左右就在H5上整了個 PWA 的頁面。而其中的關鍵點，其實就是離線使用的功能，也就是 sw 在其中的作用。由于 sw 可以攔截 client 的請求，也就是能夠根據請求，把請求后的 response 用瀏覽器緩存 caches 緩存下來，以實現離線的使用

三. 生命周期

說到 sw 的生命周期，就得祭奠出這張圖了

步驟分為以下部分：

register?這個是由 client 端發起，注冊一個 serviceWorker，這需要一個專門的 sw 處理文件

install?注冊成功后，此時 sw 中會觸發 install 事件， 需知 sw 中都是事件觸發的方式進行的邏輯調用

activate?安裝后要等待激活，也就是 activated 事件，只要 register 成功后就會觸發 install ，但不會立即觸發 activated，這個稍后再說

idle?在 activated 之后就可以開始對 client 的請求進行攔截處理，sw 發起請求用的是 fetch api

fetch 激活以后開始對網頁中發起的請求進行攔截處理

terminate?這一步是瀏覽器自身的判斷處理，當 sw 長時間不用之后，處于閑置狀態，瀏覽器會把該 sw 暫停，直到再次使

update 瀏覽器會自動檢測 sw 文件的更新，當有更新時會下載并 install，但頁面中還是老的 sw 在控制，只有當用戶新開窗口后新的 sw 才能激活控制頁面

四. 目前發現存在的一些坑

fetch?

發送請求時，默認不會帶上cookie，發送請求時若想帶上cookie，得顯示設定?{ credential: "include" }
對于跨域的資源，把模式設置為跨域?{ mode: "cors" }，否則 response 中拿不到對應的數據

caches

只能緩存 GET?& HEAD?的請求，當然安全起見
以上，對于 POST 等類型請求，返回數據可以保存在 indexDB 中

serviceWorker

注冊的 sw 資源文件，只能監聽該 sw 的路徑 & 之后子路徑的請求，這個怎么理解呢：也就是若資源是 /app/sw.js ，打印出來 registration.scope === /app/ 則只能監聽 /app/ 下的資源，不能監聽其他 path，就連 /app 的也不行 ！！！這意味著什么，意味著你在 /app 目錄下注冊的 /app/sw.js，訪問 /app 時不會生效 ！


sw 提供了參數可以設定 scope 去設定監聽的某一路徑，那么我們想讓 /app 生效，得怎么做呢，其實就是得把 sw.js 放在根目錄 / ，然后設置 { scope: "/app" } 就好了
在 sw 中 js 報錯，不會被 client 的監控捕獲到，因此，必須要專門對 sw 的錯誤進行處理
基于 a 可知：sw 注冊文件，不能放在 CDN 上，必須在當前意圖監聽的 client 的 domain 下
Request & Response 中的 body 只能被讀取一次，究其原因，是其中包含 bodyUsed 屬性，當使用過后，這個屬性值就會變為 true， 不能再次讀取，解決方法是，把 Request & Response clone 下來： request.clone() || response.clone()

五. 動手實踐篇

client 端新建頁面文件?index.js? & sw 注冊文件 serviceWorker.js
把幾個點都考慮好：漸進增強、出錯降級

!(function (win) {
    const sw = win.navigator.serviceWorker
     
    const killSW = win.killSW || false
 
 
    if (!sw) {
        return
    }
     
    if (!!killSW) {
        sw.getRegistration("/serviceWorker").then(registration => {
            // 手動注銷
            registration.unregister()
        })
    } else {
        // 表示該 sw 監聽的是根域名下的請求
        sw.register("/serviceWorker.js").then(registration => {
            // 注冊成功后會進入回調
            console.log(registration.scope)
        }).catch(err => {
            console.error(err)
        })
    }
})(window)

編寫 serviceWorker.js 文件，注意 sw 的所有接口都是 promise 形式回調的

第一步：監聽 install 事件，sw 基于事件驅動！

self.addEventListener("install", event => {
    console.log("installed")
    ...
})

第二步：監聽 activate 事件，sw install 之后不會立即生效，除非新打開頁面，否則當前頁面會一直是舊的 sw 掌控，因此有必要在 activate 后再對當前頁面的緩存等進行一定的處理

// 定義不同 path 下的 cahche name
const CACHE_NAME = "TEST1"
 
 
self.addEventListener("activate", event => {
    console.log("activated")
    event.waitUntil(
        // 刪除舊文件
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map((cacheName) => {
                    return caches.delete(cacheName);
                })
            );
        })
    );
})

瀏覽器緩存 caches 會一直保存存存存到存不動了，再去刪除某些資源，這個是瀏覽器的行為，因此還是建議在每次更改后去刪除一些舊的瀏覽器資源，可以自己設定

第三步：開始監聽頁面發起的請求
sw 中用的是 fetch api 去請求相應的資源，但不代表 client 中得用 fetch ，所有頁面的請求都會轉變為 fetch 事件被 sw 捕獲
event.respondWith 接收的是一個 promise 參數，把其結果返回到 client 中
fetch 分為三大模塊 Header、Request、Response ，這里并不打算詳說，可以自行去了解

self.addEventListener("fetch", event => {
    let { request } = event
 
    event.respondWith(
        // 先從 caches 中尋找是否有匹配
        caches.match(request).then(res => {
            if (res) {
                return res
            }
     
            // 對于 CDN 資源要更改 request 的 mode
            if (request.mode !== "navigate" && request.url.indexOf(request.referrer) === -1) {
                request = new Request(request, { mode: "cors" })
            }
             
            // 對于不在 caches 中的資源進行請求
            return fetch(request).then(fetchRes => {
                // 這里只緩存成功 && 請求是 GET 方式的結果，對于 POST 等請求，可把 indexDB 給用上
                if(!fetchRes || fetchRes.status !== 200 || request.method !== "GET") {
                    return fetchRes
                }
 
                let resClone = fetchRes.clone()
 
                caches.open(CACHE_NAME).then(cache => {
                    cache.put(request, fetchRes)
                })
 
                return resClone
            })
        })
    )
})

文件到這里就基本準備好了 ~ 寫個 html 文件去調用 index.js 看看效果吧

六. 如何調試

調試有幾種方法：

控制臺 Application 中查看 sw 的生命

chrome://inspect/#service-workers?可查看當前打開的所有網站的 sw 資源，可以進行調試（但是其實直接在 source 中就可以進行調試的我發現，不需要這么麻煩 ?==）

未完待續 ...
其實還沒有真正把這個用到項目中去，sw 文件的放置路徑就是個大問題，現在所有靜態文件都在 CDN 上，得多帶帶為它開個 VIP，能通過 client 的 host 直接訪問到的；
另外 餓了么 之前還很開心的宣布用上了 PWA ，但是最近不知道為啥給下線了，害怕！