當(dāng)下PWA比較火，而Service Worker是實現(xiàn)PWA的一項關(guān)鍵技術(shù)，今天我們一起了解下關(guān)于Service Worker的一些基礎(chǔ)知識和適用場景。
我們先來看一下官方文檔中對于Server Worker的核心定義：
Service workers 本質(zhì)上充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器，也可以在網(wǎng)絡(luò)可用時作為瀏覽器和網(wǎng)絡(luò)間的代理。
這是一條很準(zhǔn)確的定義，但對于不了解Service Worker的同學(xué)來說可能并不形象，下面我們更形象的理解一下這個概念。我們以去銀行取錢為例子，其過程大概如下圖：
從上面的圖中我們可以看到，銀行的錢存在金庫中，客戶取錢時并不是直接去金庫里拿，而是需要通過銀行的工作人員，再告知銀行工作人員需要多少錢，并出示相應(yīng)憑證后，由銀行工作人員從金庫中拿出錢給客戶，并從賬戶中減去相應(yīng)金額。這么做的原因很容易理解，因為金庫是公用的，所有客戶的錢都放在里面，我們無法保證每個客戶都能只拿走屬于自己的錢，并按照實際情況更新金庫記錄。
我們的應(yīng)用在請求服務(wù)器資源時，其過程也是類似的：
從上面的圖可以看到，請求資源的過程中，HTTP協(xié)議充當(dāng)了取錢過程中的銀行工作人員，客戶端應(yīng)用需要的資源在服務(wù)器上，但應(yīng)用卻無法直接去服務(wù)器獲取資源，而是通過HTTP協(xié)議進行，請求中指定的各種Header信息，就是取錢時的憑證。
而Service Worker可以理解成，在客戶端創(chuàng)建了一個屬于自己的金庫，先看圖：
當(dāng)我們需要取錢或者獲取資源時，可以先從本地的金庫中拿，本地金庫沒有，再通過原來的流程獲取。這時我們再回頭看文章開始的定義，應(yīng)該就能夠理解了。
正常情況下，客戶端獲取一個資源的過程有如下三步：
而關(guān)于請求資源的優(yōu)化，一般也集中在這三步完成：
看完上面的部分我們可以發(fā)現(xiàn)，當(dāng)使用Service Worker中已有的資源時，客戶端應(yīng)用獲取資源并沒有進入HTTP請求的流程，也就是說，通過Service Worker，客戶端應(yīng)用可以在不發(fā)出請求的情況下獲得資源，這很容易就讓我們想到緩存，那么Service Worker和我們平時經(jīng)常提到的強緩存和協(xié)商緩存等是什么關(guān)系呢？整理了一個圖，可以先看下：
從整體上來說，應(yīng)用獲取一個資源的緩存類型分為上圖中的四種，分別是Service Worker、Memory Cache、Disk Cache和No Cache。資源查找順序為從左向右，找到資源則返回，未找到則繼續(xù)尋找，直至最終獲取資源。上面的圖中可以清楚的看出Service Worker在緩存類型中的位置，也能看到跟平時經(jīng)常提到的強緩存和協(xié)商緩存的關(guān)系。
在了解了Service Worker的概念后，我們看下Servise Worker的基本使用邏輯，使用它的基礎(chǔ)過程是首先注冊一個Woker，這時瀏覽器會在后臺啟動一個新的線程，在這個線程啟動后，會按照Service Worker中的代碼邏輯將一些資源緩存下來，緩存完畢后，啟動對頁面請求的監(jiān)聽，當(dāng)監(jiān)聽到頁面請求資源時可以做出相對應(yīng)的響應(yīng)，比如如果資源在Service Worker中緩存過了，就可以直接返回資源。
Service Worker對象保存在window.navigator內(nèi)，首先調(diào)用register方法進行注冊，導(dǎo)入一個js文件，文件中是我們的Service Worker邏輯，代碼如下：
navigator.serviceWorker.register('/sw.js').then(function(reg){ console.log("success", reg);}).catch(function(err) { console.log("error", err);});需要注意的是Service Worker是有作用域的，它的作用域為文件的當(dāng)前路徑，Service Worker文件只能管理自己作用下的資源，比如abcde.com/home/sw.js 的作用域為abcde.com/home/。
注冊后的Service Worker就能在調(diào)試工具中看到了，下面是一個chrome調(diào)試面板的截圖：
畫紅框的內(nèi)容是一些比較關(guān)鍵的信息，比如其中表明了Service Worker的文件名和路徑，以及當(dāng)前Service Worker的狀態(tài)，Service Worker的狀態(tài)分為幾種，STOPPED（已停止）、STARTING（正在啟動）、RUNNING（正在運行）和STOPPING（正在停止），比如上面的截圖就處于RUNNING狀態(tài)。
只有處于running狀態(tài)的Service Worker才能生效，這就需要對注冊后的Service Worker進行加載和激活，注冊完畢后，Service Worker會自動開始下載，下載后會觸發(fā)install事件，我們可以監(jiān)聽這個事件并進行下載資源的操作，代碼如下：
const CACHE_NAME = "demo-a";this.addEventListener("install", function(event) { console.log("install service worker success"); caches.open(CACHE_NAME); let cacheResources = ["https://abcde.com/demo.js"]; event.waitUntil( caches.open(CACHE_NAME).then(cache => { cache.addAll(cacheResources); }) );});經(jīng)過上面的代碼，demo.js文件就被我們緩存下來了，下載完后Service Worker就會執(zhí)行激活：
this.addEventListener("active", function(event) { console.log("service worker active success");});此時我們通過開發(fā)者工具就能看到一個激活的Service Worker了，整體梳理一下大概是下面的過程：
需要注意的是，圖中灰色的部分是一個獨立的特殊線程，并不是瀏覽器渲染頁面執(zhí)行js的線程，因此使用Service Worker的過程中無需擔(dān)心會影響頁面的渲染。
我們注冊了Service Worker后，還面臨著更新的問題，當(dāng)我們的業(yè)務(wù)迭代時必然要更新Service Worker，在我們理解了它的整個注冊過程后，理解更新就很簡單了，直接上圖：
當(dāng)應(yīng)用加載時，會下載Service Worker文件，這是在瀏覽器中就會有兩個文件，一個是當(dāng)前正在使用的Service Worker，一個是新下載的Service Worker，當(dāng)新下載的文件下載完畢后，瀏覽器會對兩個文件進行Diff操作，如果發(fā)現(xiàn)文件沒有更新，則會丟棄掉新下載的Service Worker文件，如果發(fā)現(xiàn)有變化，則會加載新的Service Worker，但新加載的Service Worker會處于wating狀態(tài)，并不會實際發(fā)揮作用，只有當(dāng)整個瀏覽器中對正在運行的Service Worker沒有依賴時，才會將運行中的Service Worker拋棄，將新的Servier Worker置為激活狀態(tài)。
我們了解一些Service Worker的基礎(chǔ)知識，以及一些比較常見的使用場景，那么目前Service Worker的兼容性如何呢，看下圖
目前主流的現(xiàn)代瀏覽器支持度還是不錯的，但是到目前為止全系列的IE瀏覽器均不支持Service Worker，而且有一點感受很明顯，在查資料的過程中，看了網(wǎng)上不少的博客，不同的博客上也有當(dāng)時寫博客時的Service Worker支持度，可以明顯感覺到Service Worker的支持程度在快速提升，隨著支持度的提升，相信會有越來越多的開發(fā)者在項目中使用這項技術(shù)。
借助Service Worker，真正讓PWA應(yīng)用變得流行，也許就在不久的將來。
