工作箱服务人员在其更改时未更新答案

【问题标题】：Workbox service worker not updating when Its changed工作箱服务人员在其更改时未更新
【发布时间】：2018-05-22 07:00:54
【问题描述】：

我正在使用带有 Angular-cli-1.6.0 的 workbox-build-2.1.2 和 workbox-sw-2.1.2，一切正常，但是当我更新应用程序并为生产和 sw.js 构建它时文件被修改然后在 chrome 浏览器中服务工作者没有更新它继续使用旧版本，直到我手动取消注册它。它是否应该不安装新的 sw.js 文件，当它安装新版本时，它还会清理网站旧数据兑现并自动开始新的石板，还是我需要设置那部分？

这是我在 Angulars 主文件中注册 sw.js 的方法：

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(registerServiceWorker)
  .catch(err => console.log(err));

function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('sw.js')
      .then(reg => {
        log('Registration successful', reg);
        reg.onupdatefound = () => {
          const installingWorker = reg.installing;
          installingWorker.onstatechange = () => {
            switch (installingWorker.state) {
              case 'installed':
                if (navigator.serviceWorker.controller) {
                  log('New or updated content is available', installingWorker);
                } else {
                  log('Content is now available offline', installingWorker);
                }
                break;
              case 'redundant':
                console.error('The installing service worker became redundant', installingWorker);
                break;
              default:
                log(installingWorker.state);
                break;
            }
          };
        };
      })
      .catch(e => {
        console.error('Error during service worker registration:', e);
      });
  } else {
    console.warn('Service Worker is not supported');
  }
}

我使用 npm 运行的 generate-sw 文件

const workboxBuild = require('workbox-build');
const SRC_DIR = 'src';
const BUILD_DIR = 'public';
const SW = 'sw.js';
const globPatterns = [
  "**/*.{ico,html,css,js,woff,json}"
];

const globIgnores = [
  "sw.js"
];

const input = {
  swSrc: `${SRC_DIR}/${SW}`,
  swDest: `${BUILD_DIR}/${SW}`,
  globDirectory: BUILD_DIR,
  globPatterns: globPatterns,
  globIgnores: globIgnores,
  maximumFileSizeToCacheInBytes: 4000000
};

workboxBuild.injectManifest(input).then(() => {
  console.log(`The service worker ${BUILD_DIR}/${SW} has been injected`);
});

和基础 sw.js 文件

importScripts('workbox-sw.prod.v2.1.2.js');

const workboxSW = new self.WorkboxSW({clientsClaim: true});

workboxSW.precache([]);

workboxSW.router.registerNavigationRoute('/index.html');

*****更新*****

将 express.js 用于开发服务器，我将 Cache-Control 设置为零，现在当我重新加载页面时，服务工作者会更新到较新的版本。我在生产中感到困惑，将 Cache-Control 设置为天/年，服务工作者需要多长时间才能更新，它会清除旧的现金和 indexDB，还是我们必须手动进行

这里是快递的代码：

app.use('/', express.static(publicFolderPath, {maxAge: 0}));
app.get('*', (req, res) => {
  res.sendFile('index.html');
});

【问题讨论】：

Service worker JavaScript update frequency (every 24 hours?)的可能重复
确保 sw.js 确实发生了变化。如果它没有改变，但你更新了你导入的脚本，浏览器不知道这些文件已经更新。当我开始将逻辑抽象为单独的文件时，我发现了类似的行为。让我发疯 :) 我为您提供的最佳实践是，当您更新逻辑脚本时，您还应该修改您的服务工作者。我的 sw.js 文件中有一个版本参数，并在需要时修改它们。
Jeff 谢谢你的链接，但是我的服务器工作人员很好，它只是保护最终用户的浏览器，如果它发生了变化，它将每 24 小时更新一次，无论 Cache-Control 设置多长时间。缓存会自动清除数据吗？ .Chris 我尝试添加一个版本参数并不断更新它，但浏览器不会重新加载它，我正要修改文件名只是为了让它更新。

标签： node.js angular service-worker workbox

【解决方案1】：

服务人员在站点打开时不会更改在服务器上更新（即在后台不会改变），它会在网站打开后改变它已更新。确保浏览器没有缓存它，它的缓存 TTL/max-age 应该设置为 0
新的 service worker 不会开箱清理旧的 service 工人的缓存，你需要手动做这个家务 “激活”事件

例如：

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

参考此链接：https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

希望对你有帮助

【讨论】：