第二个更新服务工作者不起作用

问题描述

我对这个 sw.js 有一个 pwa：

const info = "versione: 1.0.0 data: 07-01-2020 12:46";
const CACHE = "pwa-offline";
const pages = [
  // some files
];

self.addEventListener("install",function (event) {
  //console.log("Install Event processing");
  self.skipwaiting();

  event.waitUntil(
    caches.open(CACHE).then(function (cache) {
      //console.log("Cached offline page during install");
      return cache.addAll(pages);
    })
  );
});

self.addEventListener("activate",(event) => {
  
});

self.addEventListener("fetch",function (event) {
  if (event.request.method !== "GET") return;
  event.respondWith(
    fetch(event.request)
    .then(function (response) {
      return fromCache(event.request);
    })
    
    .catch(function (error) {
      //console.log("Network request Failed. Serving content from cache: " + error);
      return fromCache(event.request);
    })
  );
});

async function fromCache(request) {
  // Check to see if you have it in the cache
  // Return response
  // If not in the cache,then return error page
  const cache = await caches.open(CACHE);
  const matching = await cache.match(request);
  if (!matching || matching.status === 404) {
    return Promise.reject("no-match");
  }
  return matching;
}

async function updateCache(request,response) {
  const cache = await caches.open(CACHE);
  return cache.put(request,response);
}

和包含此代码的 index.html：

 <script>
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("./sw.js")//,{updateViaCache: 'none'})
        .then(reg => {
          //console.log("Registration successful",reg);
        })
        .catch(e =>
          console.error("Error during service worker registration:",e)
        );
    } else {
      console.warn("Service Worker is not supported");
    }
  </script>

我将 pwa 上传到了 Firebase 站点。当我更改 sw.js （例如，更改 versionDate 的日期，在此站点 https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle 中，我读到：“如果您的服务工作者与浏览器已有的服务工作者字节不同，则认为它已更新。（我们正在扩展它以包括导入的脚本/模块。)") 然后我上传，我看到新的 Service Worker 发生了变化。但是当我在 sw.js 中进行第二次更改并上传时，sw.js 没有改变，所以我只能对 sw.js 进行更新，所以对整个站点也是如此（因为 sw.js 缓存了 sw.js 的所有文件）安装过程中的站点）。如何随时更新我的网站？

更新：我看到问题出在桌面上的安卓手机上没问题。

更新：现在它也适用于 android，但更新不是即时的。我在几个小时后看到更新。

解决方法

您的 Service Worker 缓存您网站上的所有静态文件。因此，无论何时更新您的网站，您都需要编辑您的 sw.js 文件。执行此操作的一种常见方法是将版本号附加到您的静态缓存名称，例如 pwa-offline-v1，然后在您向站点推送更新时在 sw.js 文件中增加版本号。这会创建一个新缓存并将更新的静态文件存储到其中。然后，您可以在 Service Worker 上添加一个 activate 事件侦听器，以使用这样的函数删除以前的缓存。

const info = "versione: 1.0.0 data: 07-01-2020 12:46";
const CACHE = "pwa-offline-v1";
const pages = [
  // some files
];

self.addEventListener("install",function (event) {
  //console.log("Install Event processing");
  self.skipWaiting();

  event.waitUntil(
    caches.open(CACHE).then(function (cache) {
      //console.log("Cached offline page during install");
      return cache.addAll(pages);
    })
  );
});

self.addEventListener("activate",(event) => {
  event.waitUntil(
    Promise.all(
      caches.keys().then((cacheNames) => {
        cacheNames
          .filter(cacheName => cacheName.startsWith('pwa-offline-') && cacheName !== CACHE)
          .map(cacheName => caches.delete(cacheName))
      })
    )
  );
});

service-worker