单页应用Service Worker配置：Fetch事件失效排查及离线页面实现

你提供的代码参考（优化后） #

Service Worker注册代码

<script>
  // ServiceWorker is a progressive technology. Ignore unsupported browsers
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("./src/sw.js", { scope: "/" }) // 新增作用域配置
      .then(function (registration) {
        console.log("Yay, service worker registered", registration);
      })
      .catch(function (err) {
        console.log("Noooo, sevice worker didnt register", err);
      });
  }
</script>

Service Worker文件代码

var precacheVersion = 22;
var precacheName = "precache-v" + precacheVersion;
// 补充离线页面依赖资源
var precacheFiles = ["/assets/offline.html", "/assets/offline.css"];

self.addEventListener("install", function (e) {
  console.log("[ServiceWorker] Installed");
  self.skipWaiting();

  e.waitUntil(
    caches.open(precacheName).then(function (cache) {
      console.log("[ServiceWorker] Precaching files");
      return cache.addAll(precacheFiles);
    })
  ); // end e.waitUntil
});

self.addEventListener("activate", function (e) {
  console.log("[ServiceWorker] Activated");

  e.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (thisCacheName) {
          if (
            thisCacheName.indexOf("precache") !== -1 &&
            thisCacheName !== precacheName
          ) {
            console.log(
              "[ServiceWorker] Removing cached files from old cache - ",
              thisCacheName
            );
            return caches.delete(thisCacheName);
          }
        })
      );
    })
  ); // end e.waitUntil
});

self.addEventListener("fetch", function (e) {
  console.log("[ServiceWorker] Fetch event for ", e.request.url); // 补充打印请求URL，方便调试
  e.respondWith(
    caches.match(e.request).then(function (cacheResponse) {
      if (cacheResponse) {
        console.log("Found in cache!");
        return cacheResponse;
      }
      return fetch(e.request)
        .then(function (fetchResponse) {
          return fetchResponse;
        })
        .catch(function (err) {
          var isHTMLPage =
            e.request.method == "GET" &&
            e.request.headers.get("accept").includes("text/html");
          if (isHTMLPage) {
            return caches.match("/assets/offline.html");
          }
        });
    })
  );
});

内容的提问来源于stack exchange，提问作者stickmanjones