摘要：是瀏覽器和服務(wù)器之間的腳本，主要作用是攔截請求，修改響應(yīng)，以及一些其他的作用。這是出于安全因素的考慮。這個(gè)注冊的過程是發(fā)生在之外的。在安裝完成，激活之前，它不會(huì)攔截任何請求。將會(huì)始終攔截請求，重啟頁面也是為了這個(gè)。

pwa-之service worker 基本概念
pwa-之service worker 離線文件處理

在本章，將涵蓋以下內(nèi)容

service worker準(zhǔn)備工作

注冊service worker

注冊service worker細(xì)節(jié)

調(diào)試

出現(xiàn)錯(cuò)誤時(shí)提供穩(wěn)定版本

創(chuàng)建mock響應(yīng)

處理請求超時(shí)

如果你是一個(gè)旅行愛好者，應(yīng)該會(huì)經(jīng)常陷入沒有網(wǎng)絡(luò)的情況。這是令人沮喪的。特別是你有事情的時(shí)候。

service worker是一個(gè)在==瀏覽器后臺(tái)==運(yùn)行的腳本。無論網(wǎng)絡(luò)連接如何，能夠使用Web應(yīng)用程序意味著用戶可以在飛機(jī)，地鐵或連接受限或不可用的地方不間斷地操作。 該技術(shù)將有助于提高客戶端的工作效率，并將提高應(yīng)用程序的可用性。

通過service worker，我們可以預(yù)先緩存網(wǎng)站的某些資源。 我們作為資源引用的是JavaScript文件，CSS文件，圖像和一些字體。 這將有助于我們加快加載時(shí)間，而不必每次訪問同一網(wǎng)站時(shí)都必須從服務(wù)器獲取。 當(dāng)然，最重要的是，當(dāng)我們網(wǎng)絡(luò)不暢時(shí)，這些資源將可供我們使用。

service worker是瀏覽器和服務(wù)器之間的腳本，主要作用是攔截請求，修改響應(yīng)，以及一些其他的作用。

網(wǎng)站可以正常工作的前提是能獲取到html，css，js等資源。在之前這些資源主要由瀏覽器管理，對于開發(fā)者而言是不可見的?，F(xiàn)在通過service worker我們可以掌控這些資源。當(dāng)然最終還是通過瀏覽器控制他們的。

掌握service worker的前提是掌握promise

Promise是用于處理異步操作的很好的方式，對于掌握service worker是至關(guān)重要的。

Promise功能很強(qiáng)大，我們不在這里細(xì)述了。我們只需要知道調(diào)用then()方法處理成功，catch方法處理錯(cuò)誤就可以了。

一個(gè)簡單的比較同步和異步操作的代碼

sync
    try {
        var value = Fn();
        console.log(value);
    } catch(err) {
        console.log(err);
    }
    
async
    Fn()
    .then(function(value) {
        console.log(value);
    })
    .catch(function(err) {
        console.log(err);
    });

Service workers能夠運(yùn)行的前提是網(wǎng)站采用了https。這是出于安全因素的考慮。

現(xiàn)在主流瀏覽器都已經(jīng)支持service worker，不需要去多帶帶開啟了。

雖然service worker一定要在https的域名下面運(yùn)行，但是本地的http://localhost域名卻不影響，可以正常運(yùn)行。

一個(gè)service worker如果要生效，必須要先注冊。這個(gè)注冊的過程是發(fā)生在service worker之外的。一般會(huì)在index.html中。你可以寫在js文件里面，在html文件中引入，但不能在service worker的js中注冊。

先創(chuàng)建一個(gè)html文件

    
Registration status: 
    

在當(dāng)前文件夾下面創(chuàng)建一個(gè)==名字叫service-worker.js==的js文件

啟動(dòng)一個(gè)本地服務(wù)器，推薦使用anywhere，自帶了https

成功圖示

![image](http://wx2.sinaimg.cn/mw690/0...
)

首先判斷瀏覽器支持情況，如果不支持則做出提示。

我們使用了空js文件注冊了service worker。register的第二個(gè)參數(shù)的scope表示此service worker的作用范圍是當(dāng)前域名下面的根目錄。

如圖顯示：注冊成功。說明我們的瀏覽器是支持service worker的。

通過調(diào)用unregister()方法卸載service worker

serviceWorker.unregister().then(function() {
    document.getElementById("status").innerHTML = "unregistered";
})

了解service worker注冊過程中的詳細(xì)信息和事件有助于我們更好的掌控它。

我們創(chuàng)建一個(gè)如下的html頁面

  
  


  
Registration status: 
  
State: 

  

創(chuàng)建一個(gè)service-worker.js文件

self.addEventListener("install", function(e) {
  console.log("Install Event:", e);
});

self.addEventListener("activate", function(e) {
  console.log("Activate Event:", e);
});

然后頁面如下顯示

上面的代碼描述了service worker的3種狀態(tài)。當(dāng)程序處于active狀態(tài)的時(shí)候，我們就可以刷新頁面查看處于service worker控制之下的頁面了。

在service worker中我們注冊了兩個(gè)事件，install和activate，當(dāng)service worker第一次注冊的時(shí)候會(huì)被觸發(fā)。

install事件比較適合用來預(yù)加載數(shù)據(jù)和初始化緩存，activate事件適合用來清理舊版本的數(shù)據(jù)。

當(dāng)一個(gè)service worker被成功注冊，它會(huì)經(jīng)歷以下狀態(tài)

Install

在service worker的生命周期中，如果service worker已經(jīng)注冊沒有錯(cuò)誤，但是尚未激活。那之前已經(jīng)激活的service worker就會(huì)仍然會(huì)控制著頁面。重新加載之后的service worker如果發(fā)生任何更改，就會(huì)重新安裝service worker。在安裝完成，激活之前，它不會(huì)攔截任何請求。

Activate

當(dāng)service worker被激活時(shí)，它的狀態(tài)就是activate。service worker就可以攔截請求了。只有當(dāng)我們關(guān)閉網(wǎng)頁重新打開，或者強(qiáng)制刷新當(dāng)前頁面，才會(huì)被激活。一般安裝成功之后不會(huì)立即處于activate狀態(tài)。

Fetch

在當(dāng)前scope作用域下面的請求會(huì)觸發(fā)fetch事件

Terminate

這個(gè)事件可能會(huì)發(fā)生在任何時(shí)候，主要后果就是需要瀏覽器做service worker的內(nèi)存回收。之后根據(jù)需要重啟，但不是不會(huì)在觸發(fā)activate事件。

service worker將會(huì)始終攔截請求，重啟頁面也是為了這個(gè)。雖然這么說，但我們無法保證service worker任何時(shí)候都處于生效狀態(tài)，所以在service worker中定義的全局狀態(tài)可能不會(huì)被保留。所以我們最好使用indexDB和localStorage來實(shí)現(xiàn)持久化。

service worker在瀏覽器中多帶帶線程運(yùn)行，通過多帶帶的方式和頁面通信。但是和頁面是處于不同的作用域。這就意味著service worker無法訪問網(wǎng)頁的dom等其他信息。因此我們也無法通過
DevTools里面同一個(gè)tab來調(diào)試service worker。我們需要一個(gè)多帶帶的Tab來調(diào)試service worker線程。

在service worker中，它大部分的工作是在監(jiān)聽的事件中來完成的，比如在install事件中完成資源緩存。同樣我們可以在這里打斷點(diǎn)。

下面來展示如何調(diào)試

在chrome中打開：chrome://inspect/#service-workers

或者在chrome中輸入：chrome://serviceworker-internals/ 如果列表里面沒有的話，說明沒有service worker正在運(yùn)行

在DevTools中的Source下面的service worker可以看到對應(yīng)的js腳本

在這里可以調(diào)試

同樣可以使用console.log。

在chrome://serviceworker-internals/頁面中，可以看到每個(gè)service worker下面有幾個(gè)按鈕。

Terminated：注銷service worker

Start/Stop: 開啟/停止service worker

Sync: 給worker同步Sync事件

push: 給worker同步push事件

Inspect：在檢查器中打開worker

==即使勾選了Network中的disable cache，service worker依然會(huì)生效，如果需要每次都更新，需要勾選Application->service worker->offline==

創(chuàng)建一個(gè)html文件

  
  


  
Registration status: 
  

創(chuàng)建service-worker.js文件

var version = 1;
var cacheName = "stale-" + version;

self.addEventListener("install", function(event) {
    self.skipWaiting();
});

self.addEventListener("activate", function(event) {
    if (self.clients && clients.claim) {
        clients.claim();
    }
});

self.addEventListener("fetch", function(event) {
    // Always fetch response from the network
    event.respondWith(
        fetch(event.request).then(function(response) {
            return caches.open(cacheName).then(function(cache) {
                // If we received an error response
                if(response.status >= 500) {
                    return cache.match(event.request).then(function(response) {
                        // Return stale version from cache
                        return response;
                    }).catch(function() {
                        // No stale version in cache so return network response
                        return response;
                    });
                } else {
                    // Response was healthy so update cached version
                    cache.put(event.request, response.clone());
                    return response;
                }
            });
        })
    );
});

當(dāng)網(wǎng)絡(luò)中斷之后，頁面依然可以訪問。

我們可以模擬服務(wù)器，對客戶端進(jìn)行響應(yīng)。

創(chuàng)建index.html頁面

  
  


  
Network status: 
  

    
      
    
    

      Mock Response