作用：

可以使你的應(yīng)用先訪問本地緩存資源，所以在離線狀態(tài)時，在沒有通過網(wǎng)絡(luò)接收到更多的數(shù)據(jù)前，仍可以提供基本的功能。

使用前的設(shè)置：

Chrome中需要開啟相關(guān)配置: 訪問 chrome://flags 并開啟 experimental-web-platform-features; 重啟瀏覽器 (注意：有些特性在Chrome中沒有默認開放支持)；另外，你需要通過 HTTPS 來訪問你的頁面 — 出于安全原因，Service Workers 要求要在必須在 HTTPS 下才能運行，localhost 也被瀏覽器認為是安全源。

簡單的例子

這是把express和sw-test簡單結(jié)合的一個小demo, 項目運行起來訪問
http://localhost:3000/sw-test/index.html , 然后終止此服務(wù)依然能訪問相應(yīng)資源。Github

相關(guān)代碼

• /public/sw-test/app.js

1. 首先判斷了瀏覽器是否支持
2. 調(diào)用 register 方法注冊 service worker, 第一個參數(shù)是運行 service worker 的
   js 文件, 第二個 scope 參數(shù)是選填的，可以被用來指定你想讓 service worker 控制的內(nèi)容的子目錄。 在這個例子，我們指定了 '/sw-test/'，即 http://localhost:3000/sw-test/ 下的請求會被捕獲, 被指定的資源會被緩存。
3. register 方法返回一個 Promise , 進行正確錯誤處理。

  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

• /public/sw-test/sw.js
  核心文件,監(jiān)聽安裝事件, 打開緩存 v1 增加需要緩存資源 request url list, 截取被控文件下請求, 如果不存在該緩存則進行緩存處理

1. 監(jiān)聽了 install 事件, event.waitUntil 主要用在 Install, activate 事件中, 在服務(wù)工作線程中，延長事件的壽命從而阻止瀏覽器在事件中的異步操作完成之前終止服務(wù)工作線程。
2. Cache 接口提供緩存的 Request,
   Response 對象對的存儲機制，例如作為ServiceWorker生命周期的一部分。 Cache 接口像 workers 一樣, 是暴露在 window 作用域下的。盡管它被定義在 service worker 的標準中, 但是它不必一定要配合 service worker 使用.Cache詳細API
3. event.respondWith 方法旨在包裹代碼，這些代碼為來自受控頁面的request生成自定義的response，查看更多。response.clone() 創(chuàng)建了一個響應(yīng)對象的克隆，這個對象在所有方面都是相同的，但是存儲在一個不同的變量中。防止多次使用篡改了對象。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() always resolves
    // but in case of success response will have value
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // response may be used only once
        // we need to save clone to put one copy in cache
        // and serve second one
        let responseClone = response.clone();
        
        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function () {
        return caches.match('/sw-test/gallery/myLittleVader.jpg');
      });
    }
  }));
});

版本更新刪除舊緩存

1. 監(jiān)聽 activate 事件, 如當前版本 v2，刪除與當前不匹配緩存數(shù)據(jù)。

this.addEventListener('activate', function(event) {
  var cacheWhitelist = ['v2'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

參照 MDN

Service Worker 詳細文檔