javascript - 当 Assets 发生变化时更新 service worker

Question

我注意到我的 Angular 构建(使用 Angular-cli)没有更新我的翻译(使用 ngx-translate - 即使从浏览器中删除缓存后也没有。

在我的 angular-cli.json 上，我已将 serviceWorker 设置为 true。我尝试将其切换为 false 并正确显示更新的翻译文件。所以，我猜 service worker 在生成新版本时没有更新我的翻译文件。

有什么想法可以确保我的 Assets 在发生变化时得到更新吗？ angular-cli 是否支持在构建之前配置我们的 service worker 的任何方式？我在他们的 documentation 中没有找到太多关于它的信息。 .

Answer 1

如果翻译被缓存，您需要将 cacheName 更改为您的 service worker 激活。

即:

var cacheName = 'myAppCache-3s';
var filesToCache = [
 '/'
  'index.html',
  'scripts/hammer.min.js',
  'images/play_white.svg', 
  'images/stop_white.svg',
  'images/back_white.svg',
  'images/forward_white.svg',
  'images/sfondo.jpg',
  'images/ic_refresh_white_24px.svg',
  'scripts/meteo-zoom.js',
  'scripts/meteosurf_200.js',
  'scripts/jquery3-2-1.min.js',
  'scripts/jqueryui1-12-1.min.js',
  'styles/inline_01.css',
  'styles/meteosurf_200.css',
  'styles/jqueryui-smoothness.css',
  'styles/images/ui-bg_glass_65_ffffff_1x400.png',
  'styles/images/ui-icons_454545_256x240.png',
  'images/icons/icon-64x64.png',
];

当我更改 Assets 时，我总是更改缓存名称，在名称末尾添加一个新版本(即:var cacheName = 'myAppCache-3t';)。

如果您的 service worker 之前已安装，但在刷新或页面加载时有新版本的 worker 可用，则新版本会在后台安装，但尚未激活。只有当不再有任何页面加载时仍在使用旧的 service worker 时，它才会被激活。一旦不再有此类页面仍在加载，新的 service worker 就会激活。

但是您可以使用 skipWaiting() 函数强制执行此行为:

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    }).then(function() {
        return self.skipWaiting();
    })
  );
});