第二次更新服务工作者不起作用 [英] Second update service worker doesn't work

问题描述

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

I hava a pwa with this sw.js:

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:

and index.html with this code inside:

 <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 与浏览器已经有了.(我们正在扩展它以包括导入的脚本/模块.)") 然后我上传，我看到新的 Service Worker 发生了变化.但是当我在 sw.js 中进行第二次更改并上传时，sw.js 没有改变，所以我只能对 sw.js 进行更新，所以对整个站点也是如此(因为 sw.js 缓存了 sw.js 的所有文件)安装过程中的站点).如何随时更新我的​​网站?

I upload the pwa in a firebase site. When I change the sw.js (e.g. changing the date of versionDate, in this site https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle I read: "Your service worker is considered updated if it's byte-different to the one the browser already has. (We're extending this to include imported scripts/modules too.)") and I upload, I see the new service worker is changed. But when I make a second change in sw.js and upload, the sw.js is not changed, so I can do only an update on sw.js and so to the whole site (because the sw.js caches all files of the site during the install process). How can I update my site any time I want?

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

UPDATE: I watched that the problem is in android phone in desktop is ok.

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

UPDATE: Now also it works on android but the update is not immadiate. I see the update after some hours.

推荐答案

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

Your service worker caches all static files on your website. Consequently, you will need to edit your sw.js file whenever you are updating your website. One common way to do this is to attach a version number to your static cache name, for example pwa-offline-v1, then bump up the version number in the sw.js file whenever you are pushing an update to the site. This creates a new cache and stores the updated static files to it. You can then add an activate event listener on the service worker to delete the former cache using a function like this.

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

这篇关于第二次更新服务工作者不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！