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

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

在本章，將涵蓋以下內容

service worker準備工作

注冊service worker

注冊service worker細節

調試

出現錯誤時提供穩定版本

創建mock響應

處理請求超時

如果你是一個旅行愛好者，應該會經常陷入沒有網絡的情況。這是令人沮喪的。特別是你有事情的時候。

service worker是一個在==瀏覽器后臺==運行的腳本。無論網絡連接如何，能夠使用Web應用程序意味著用戶可以在飛機，地鐵或連接受限或不可用的地方不間斷地操作。 該技術將有助于提高客戶端的工作效率，并將提高應用程序的可用性。

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

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

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

掌握service worker的前提是掌握promise

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

Promise功能很強大，我們不在這里細述了。我們只需要知道調用then()方法處理成功，catch方法處理錯誤就可以了。

一個簡單的比較同步和異步操作的代碼

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能夠運行的前提是網站采用了https。這是出于安全因素的考慮。

現在主流瀏覽器都已經支持service worker，不需要去多帶帶開啟了。

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

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

先創建一個html文件

    
Registration status: 
    

在當前文件夾下面創建一個==名字叫service-worker.js==的js文件

啟動一個本地服務器，推薦使用anywhere，自帶了https

成功圖示

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

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

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

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

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

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

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

我們創建一個如下的html頁面

  
  


  
Registration status: 
  
State: 

  

創建一個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種狀態。當程序處于active狀態的時候，我們就可以刷新頁面查看處于service worker控制之下的頁面了。

在service worker中我們注冊了兩個事件，install和activate，當service worker第一次注冊的時候會被觸發。

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

當一個service worker被成功注冊，它會經歷以下狀態

Install

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

Activate

當service worker被激活時，它的狀態就是activate。service worker就可以攔截請求了。只有當我們關閉網頁重新打開，或者強制刷新當前頁面，才會被激活。一般安裝成功之后不會立即處于activate狀態。

Fetch

在當前scope作用域下面的請求會觸發fetch事件

Terminate

這個事件可能會發生在任何時候，主要后果就是需要瀏覽器做service worker的內存回收。之后根據需要重啟，但不是不會在觸發activate事件。

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

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

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

下面來展示如何調試

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

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

在DevTools中的Source下面的service worker可以看到對應的js腳本

在這里可以調試

同樣可以使用console.log。

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

Terminated：注銷service worker

Start/Stop: 開啟/停止service worker

Sync: 給worker同步Sync事件

push: 給worker同步push事件

Inspect：在檢查器中打開worker

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

創建一個html文件

  
  


  
Registration status: 
  

創建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;
                }
            });
        })
    );
});

當網絡中斷之后，頁面依然可以訪問。

我們可以模擬服務器，對客戶端進行響應。

創建index.html頁面

  
  


  
Network status: 
  

    
      
    
    

      Mock Response