資訊專欄INFORMATION COLUMN
摘要：當下比較火，而是實現(xiàn)的一項關鍵技術，今天我們一起了解下關于的一些基礎知識和適用場景。資源查找順序為從左向右，找到資源則返回，未找到則繼續(xù)尋找，直至最終獲取資源。借助，真正讓應用變得流行，也許就在不久的將來。
當下PWA比較火，而Service Worker是實現(xiàn)PWA的一項關鍵技術，今天我們一起了解下關于Service Worker的一些基礎知識和適用場景。
什么是Server Worker我們先來看一下官方文檔中對于Server Worker的核心定義：
Service workers 本質(zhì)上充當Web應用程序與瀏覽器之間的代理服務器，也可以在網(wǎng)絡可用時作為瀏覽器和網(wǎng)絡間的代理。
這是一條很準確的定義，但對于不了解Service Worker的同學來說可能并不形象，下面我們更形象的理解一下這個概念。我們以去銀行取錢為例子，其過程大概如下圖：
從上面的圖中我們可以看到，銀行的錢存在金庫中，客戶取錢時并不是直接去金庫里拿，而是需要通過銀行的工作人員，再告知銀行工作人員需要多少錢，并出示相應憑證后，由銀行工作人員從金庫中拿出錢給客戶，并從賬戶中減去相應金額。這么做的原因很容易理解，因為金庫是公用的，所有客戶的錢都放在里面，我們無法保證每個客戶都能只拿走屬于自己的錢，并按照實際情況更新金庫記錄。
我們的應用在請求服務器資源時，其過程也是類似的：
從上面的圖可以看到，請求資源的過程中，HTTP協(xié)議充當了取錢過程中的銀行工作人員，客戶端應用需要的資源在服務器上，但應用卻無法直接去服務器獲取資源，而是通過HTTP協(xié)議進行，請求中指定的各種Header信息，就是取錢時的憑證。
而Service Worker可以理解成，在客戶端創(chuàng)建了一個屬于自己的金庫，先看圖：
當我們需要取錢或者獲取資源時，可以先從本地的金庫中拿，本地金庫沒有，再通過原來的流程獲取。這時我們再回頭看文章開始的定義，應該就能夠理解了。
Service Worker與Cache的關系正常情況下，客戶端獲取一個資源的過程有如下三步：
而關于請求資源的優(yōu)化，一般也集中在這三步完成：
不發(fā)出請求就能夠獲得資源；
提高服務器查找資源的速度；
減小返回內(nèi)容的體積；
看完上面的部分我們可以發(fā)現(xiàn)，當使用Service Worker中已有的資源時，客戶端應用獲取資源并沒有進入HTTP請求的流程，也就是說，通過Service Worker，客戶端應用可以在不發(fā)出請求的情況下獲得資源，這很容易就讓我們想到緩存，那么Service Worker和我們平時經(jīng)常提到的強緩存和協(xié)商緩存等是什么關系呢？整理了一個圖，可以先看下：
從整體上來說，應用獲取一個資源的緩存類型分為上圖中的四種，分別是Service Worker、Memory Cache、Disk Cache和No Cache。資源查找順序為從左向右，找到資源則返回，未找到則繼續(xù)尋找，直至最終獲取資源。上面的圖中可以清楚的看出Service Worker在緩存類型中的位置，也能看到跟平時經(jīng)常提到的強緩存和協(xié)商緩存的關系。
Service Worker使用邏輯在了解了Service Worker的概念后，我們看下Servise Worker的基本使用邏輯，使用它的基礎過程是首先注冊一個Woker，這時瀏覽器會在后臺啟動一個新的線程，在這個線程啟動后，會按照Service Worker中的代碼邏輯將一些資源緩存下來，緩存完畢后，啟動對頁面請求的監(jiān)聽，當監(jiān)聽到頁面請求資源時可以做出相對應的響應，比如如果資源在Service Worker中緩存過了，就可以直接返回資源。
注冊Service Worker對象保存在window.navigator內(nèi)，首先調(diào)用register方法進行注冊，導入一個js文件，文件中是我們的Service Worker邏輯，代碼如下：
navigator.serviceWorker.register("/sw.js")
.then(function(reg){
console.log("success", reg);
}).catch(function(err) {
console.log("error", err);
});
需要注意的是Service Worker是有作用域的，它的作用域為文件的當前路徑，Service Worker文件只能管理自己作用下的資源，比如abcde.com/home/sw.js 的作用域為abcde.com/home/。
激活注冊后的Service Worker就能在調(diào)試工具中看到了，下面是一個chrome調(diào)試面板的截圖：
畫紅框的內(nèi)容是一些比較關鍵的信息，比如其中表明了Service Worker的文件名和路徑，以及當前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的過程中無需擔心會影響頁面的渲染。
更新我們注冊了Service Worker后，還面臨著更新的問題，當我們的業(yè)務迭代時必然要更新Service Worker，在我們理解了它的整個注冊過程后，理解更新就很簡單了，直接上圖：
當應用加載時，會下載Service Worker文件，這是在瀏覽器中就會有兩個文件，一個是當前正在使用的Service Worker，一個是新下載的Service Worker，當新下載的文件下載完畢后，瀏覽器會對兩個文件進行Diff操作，如果發(fā)現(xiàn)文件沒有更新，則會丟棄掉新下載的Service Worker文件，如果發(fā)現(xiàn)有變化，則會加載新的Service Worker，但新加載的Service Worker會處于wating狀態(tài)，并不會實際發(fā)揮作用，只有當整個瀏覽器中對正在運行的Service Worker沒有依賴時，才會將運行中的Service Worker拋棄，將新的Servier Worker置為激活狀態(tài)。
常見使用場景用于瀏覽器緩存，提高加載速度；
實現(xiàn)離線應用，最近PWA如此火爆；
實現(xiàn)消息的主動推送，為web應用增加一種給力的交互方式；
兼容性我們了解一些Service Worker的基礎知識，以及一些比較常見的使用場景，那么目前Service Worker的兼容性如何呢，看下圖
目前主流的現(xiàn)代瀏覽器支持度還是不錯的，但是到目前為止全系列的IE瀏覽器均不支持Service Worker，而且有一點感受很明顯，在查資料的過程中，看了網(wǎng)上不少的博客，不同的博客上也有當時寫博客時的Service Worker支持度，可以明顯感覺到Service Worker的支持程度在快速提升，隨著支持度的提升，相信會有越來越多的開發(fā)者在項目中使用這項技術。
借助Service Worker，真正讓PWA應用變得流行，也許就在不久的將來。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102265.html
摘要：是瀏覽器和服務器之間的腳本，主要作用是攔截請求，修改響應，以及一些其他的作用。這是出于安全因素的考慮。這個注冊的過程是發(fā)生在之外的。在安裝完成，激活之前，它不會攔截任何請求。將會始終攔截請求，重啟頁面也是為了這個。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 學習service worker 基本概念 在本章，將涵蓋以下內(nèi)容 ...
摘要：是瀏覽器和服務器之間的腳本，主要作用是攔截請求，修改響應，以及一些其他的作用。這是出于安全因素的考慮。這個注冊的過程是發(fā)生在之外的。在安裝完成，激活之前，它不會攔截任何請求。將會始終攔截請求，重啟頁面也是為了這個。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 學習service worker 基本概念 在本章，將涵蓋以下內(nèi)容 ...
摘要：的生命周期的生命周期與頁面完全分離。換句話說，這個將為這個域中的所有內(nèi)容接收事件。這不是必要的，但絕對是推薦的。新的將啟動并且安裝事件將被移除。使用，可以很容易被劫持連接并偽造響應。后臺同步允許延遲操作，直到用戶具有穩(wěn)定的連接。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第8篇。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 如果你錯過了前...
摘要：目標是探索是否能夠加快頁面首屏速度。實驗組瀏覽器支持，本次時，進行初始化。從上面的直觀對比可以看出，個指標，組的分位值都略微大于組的分位值，差距在幾十毫秒左右。最終，我也沒有采用來優(yōu)化首屏速度。 寫在前面 本文首發(fā)于公眾號：符合預期的CoyPan 不久之前，我簡單探索了service worker在一個活動運營頁面中的應用，可以參考我之前的這篇文章： service worker輕度探...
摘要：的本質(zhì)是一個，它獨立于主線程，因此它不能直接訪問，也不能直接訪問對象，但是，可以訪問對象，也可以通過消息傳遞的方式與主線程進行通信。的最佳用法其實就是配合做離線緩存。 什么是Service Worker Service Worker本質(zhì)上充當Web應用程序與瀏覽器之間的代理服務器，也可以在網(wǎng)絡可用時作為瀏覽器和網(wǎng)絡間的代理。它們旨在（除其他之外）使得能夠創(chuàng)建有效的離線體驗，攔截網(wǎng)絡請...
閱讀 642·2021-11-25 09:43
閱讀 1655·2021-11-18 10:02
閱讀 1033·2021-10-15 09:39
閱讀 1877·2021-10-12 10:18
閱讀 2115·2021-09-22 15:43
閱讀 756·2021-09-22 15:10
閱讀 2084·2019-08-30 15:53
閱讀 978·2019-08-30 13:00
