摘要：而且，在接下來(lái)頁(yè)面的異步請(qǐng)求中，還能進(jìn)行緩存嘗試這里配置的文件清單在安裝激活階段不會(huì)進(jìn)行緩存，只有在監(jiān)聽(tīng)到網(wǎng)絡(luò)請(qǐng)求的時(shí)候才進(jìn)行緩存。

基本知識(shí)普及請(qǐng)參考
https://www.jianshu.com/p/623...
https://zhuanlan.zhihu.com/p/...

下面簡(jiǎn)單介紹一下插件的使用
以下是我在項(xiàng)目中使用的配置
webpack.prod.conf.js中

{
   ...
    plugins: [
        new OfflinePlugin({
          responseStrategy: "cache-first", // 緩存優(yōu)先
          AppCache: false,                 // 不啟用appCache
          safeToUseOptionalCaches: true,   // Removes warning for about `additional` section usage
          autoUpdate: true,                // 自動(dòng)更新
          caches: {                        // webpack打包后需要換的文件正則匹配
            main: [
              "**/*.js",
              "**/*.css",
              /.(png|jpe?g|gif|svg)(?.*)?$/,
              /.(woff2?|eot|ttf|otf)(?.*)?$/
              ],
            additional: [
              ":externals:"
            ]
          },
          externals: [],                    // 設(shè)置外部鏈接，例如配置http://hello.com/getuser，那么在請(qǐng)求這個(gè)接口的時(shí)候就會(huì)進(jìn)行接口緩存
          excludes: ["**/.*", "**/*.map", "**/*.gz", "**/manifest-last.json"], // 需要過(guò)濾的文件
          ServiceWorker: {
            output: "./static/sw.js",       // 輸出目錄
            publicPath: "/static/sw.js",    // sw.js 加載路徑
            scope: "/",                     // 作用域（此處有坑）
            minify: true,                   // 開(kāi)啟壓縮
            events: true                    // 當(dāng)sw狀態(tài)改變時(shí)候發(fā)射對(duì)應(yīng)事件
          }
        })
    ]
}

在入口js文件中

OfflinePluginRuntime.install({
    // 監(jiān)聽(tīng)sw事件，當(dāng)更新ready的時(shí)候，調(diào)用applyUpdate以跳過(guò)等待，新的sw立即接替老的sw
  onUpdateReady: () => {
    console.log("SW Event:", "onUpdateReady")
    OfflinePluginRuntime.applyUpdate()
  },
  onUpdated: () => {
    console.log("SW Event:", "onUpdated")
    window.swUpdate = true
  }
})

首先介紹一下assets里面的三個(gè)屬性:
main: [] 這里配置的是serviceWorker在install階段需要緩存的文件清單，如果其中有一個(gè)失敗了，那么整個(gè)serviceWorder就會(huì)安裝失敗，所以必須謹(jǐn)慎配置

additional: [] 這里配置的文件清單會(huì)在serviceWorker activate的時(shí)候進(jìn)行緩存，與main不一樣，如果這里的文件緩存失敗，不會(huì)影響serviceWorker的正常安裝。而且，在接下來(lái)頁(yè)面的ajax異步請(qǐng)求中，還能進(jìn)行緩存嘗試

optional: [] 這里配置的文件清單在serviceWorker安裝激活階段不會(huì)進(jìn)行緩存，只有在監(jiān)聽(tīng)到網(wǎng)絡(luò)請(qǐng)求的時(shí)候才進(jìn)行緩存。

剛才說(shuō)到作用域的時(shí)候有坑，如果按照上面的文件配置，最后在網(wǎng)頁(yè)中會(huì)提示，sw最大的作用域權(quán)限在/static下面，言外之意這么寫(xiě)是無(wú)法將sw的作用域設(shè)置在/根路徑下面。
所以這邊需要服務(wù)端在返回sw.js的時(shí)候手動(dòng)設(shè)置Service-Worker-Allowed頭字段，并且值設(shè)置為/，同時(shí)這個(gè)文件的緩存時(shí)間設(shè)為0，否則，當(dāng)更新serviceWorker的時(shí)候，由于瀏覽器緩存了sw.js用戶(hù)端這邊的serviceWorker無(wú)法第一時(shí)間更新。

最后來(lái)一張線(xiàn)上項(xiàng)目，在網(wǎng)速極慢的情況下也能實(shí)現(xiàn)秒開(kāi)

-------------------追加--------------------擴(kuò)展fetch事件
首先在配置文件里添加入口

sw-entry.js

self.addEventListener("fetch", function (event) {
  function cachesMatch (request, cacheName) {
    return caches.match(request, {
      cacheName: cacheName
    }).then(function (response) {
      return response
    })
    // Return void if error happened (cache not found)
    ["catch"](function () {})
  }
  function cacheFirst(cacheUrl, CACHE_NAME) {
    var resource = cachesMatch(cacheUrl, CACHE_NAME).then(function (response) {
      if (response) {
        return response;
      }
      // Load and cache known assets
      var fetching = fetch(urlString).then(function (response) {
        if (!response.ok) {
          return response;
        }
        (function () {
          var responseClone = response.clone();
          var storing = caches.open(CACHE_NAME).then(function (cache) {
            return cache.put(urlString, responseClone);
          }).then(function () {
            console.log("[SW]:", "Cache asset: " + urlString);
          });
          event.waitUntil(storing);
        })();

        return response;
      });

      return fetching;
    })
    return resource
  }
  function netWorkFirst(cacheUrl, CACHE_NAME) {
    var resource = fetch(cacheUrl).then(response => {
      if (response.ok) {
        var responseClone = response.clone()
        var storing = caches.open(CACHE_NAME).then(function (cache) {
          cache.put(cacheUrl, responseClone);
        }).then(function () {
          console.log("[SW]:", "Cache asset: " + cacheUrl);
        });
        event.waitUntil(storing);
        return response;
      }
      // Throw to reach the code in the catch below
      throw new Error("Response is not ok");
    })
    ["catch"](function () {
      return cachesMatch(cacheUrl, CACHE_NAME);
    });
    return resource
  }

  var url = new URL(event.request.url)
  url.hash = ""
  var pathname = url.pathname
  var urlString = url.toString()
  var cacheUrl = urlString
  var IS_KANO = /kano.guahao.cn/
  var IS_STATIC = //static//
  var IS_HOME = /^/(e|u|n)/(d+)$/
  var IS_EDITOR = /^/editor(?!.)/
  var IS_PREVIEW = /^/preview(?!.)/
  var CACHE_PREFIX = __wpo.name
  var CACHE_TAG = __wpo.version
  var CACHE_NAME = CACHE_PREFIX + ":" + CACHE_TAG
  var resource = undefined
  var isGET = event.request.method === "GET"
  // 以緩存優(yōu)先的形式緩存 kano 以及 static/* 靜態(tài)資源
  if ((cacheUrl.match(IS_KANO) || pathname.match(IS_STATIC)) && isGET) {
    resource = cacheFirst(cacheUrl, CACHE_NAME)
    event.respondWith(resource)
  }
  // 以網(wǎng)絡(luò)優(yōu)先的形式緩存 editor頁(yè)面 preview頁(yè)面和 production頁(yè)面
  if ((pathname.match(IS_HOME) || pathname.match(IS_EDITOR) || pathname.match(IS_PREVIEW)) && isGET) {
    resource = netWorkFirst(cacheUrl, CACHE_NAME)
    event.respondWith(resource)
  }
})