国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
Service Worker

當(dāng)下PWA比較火,而Service Worker是實現(xiàn)PWA的一項關(guān)鍵技術(shù),今天我們一起了解下關(guān)于Service Worker的一些基礎(chǔ)知識和適用場景。

什么是Server Worker

我們先來看一下官方文檔中對于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)該就能夠理解了。

Service Worker與Cache的關(guān)系

正常情況下,客戶端獲取一個資源的過程有如下三步:

而關(guān)于請求資源的優(yōu)化,一般也集中在這三步完成:

  1. 不發(fā)出請求就能夠獲得資源;
  2. 提高服務(wù)器查找資源的速度;
  3. 減小返回內(nèi)容的體積;

看完上面的部分我們可以發(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使用邏輯

在了解了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)。

常見使用場景

  1. 用于瀏覽器緩存,提高加載速度;
  2. 實現(xiàn)離線應(yīng)用,最近PWA如此火爆;
  3. 實現(xiàn)消息的主動推送,為web應(yīng)用增加一種給力的交互方式;

兼容性

我們了解一些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)用變得流行,也許就在不久的將來。

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
PWA技術(shù)及其用戶體驗設(shè)計
瀏覽器緩存的力量
掘金
Service Worker Cache 和 HTTP Cache 聯(lián)合使用的場景討論
開發(fā)一個漸進式Web應(yīng)用程序(PWA)前都需要了解什么?
你必須懂的前端性能優(yōu)化
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服