Service Worker 也被缓存在 Chrome 中？

Question

我构建了一个渐进式 Web 应用程序，https://www.tavest.com。 我不明白为什么我的服务人员也被缓存在 Chrome 中？ https://www.tavest.com/service-worker-tavest.js 因此，当我更改服务人员时，chrome 不会检测到更改，因此服务人员没有更新。

即使我多次刷新页面，它仍然是一样的。但是，在 Mozilla 中它工作得很好。 这是我安装 service worker 的代码

if ('serviceWorker' in navigator && (window.location.protocol === 'https:')) {
      navigator.serviceWorker.register('/service-worker-tavest.js')
      .then(function(registration) {
        // updatefound is fired if service-worker.js changes.
        registration.onupdatefound = function() {
          // updatefound is also fired the very first time the SW is installed,
          // and there's no need to prompt for a reload at that point.
          // So check here to see if the page is already controlled,
          // i.e. whether there's an existing service worker.
          if (navigator.serviceWorker.controller) {
            // The updatefound event implies that registration.installing is set:
            // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
            var installingWorker = registration.installing;

            installingWorker.onstatechange = function() {
              switch (installingWorker.state) {
                case 'installed':
                  // At this point, the old content will have been purged and the
                  // fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is
                  // available; please refresh." message in the page's interface.
                  console.warn('New content is available, please refresh the page');
                  
                  break;

                case 'redundant':
                  throw new Error('The installing ' +
                                  'service worker became redundant.');

                default:
                  // Ignore
              }
            };
          }
        };
      }).catch(function(e) {
        console.error('Error during service worker registration:', e);
      });
    }

感谢您的帮助

热烈的问候，

Answer 1

这是因为 service worker 只是一个普通的 JS 文件，它会被浏览器缓存。

您可以将no-cache 标头设置为/service-worker-tavest.js，以便浏览器停止缓存您的服务工作者文件。这样，您可以在上传新文件时立即更新您的 Service Worker。

这里是如何在 Nginx 中做到这一点：

location /service-worker-tavest.js {
  # Don't use browser cache for service worker file
  add_header cache-control "no-store, no-cache, must-revalidate";
}

Answer 2

我想我知道有关此缓存的答案。 这是因为 Chrome 中的“服务工作者生命周期”。

https://www.youtube.com/watch?v=TF4AB75PyIc

结论：chrome浏览器中的缓存是可以的，因为chrome会自己更新service worker。