资产更改时更新服务人员答案

【问题标题】：Updating service worker when assets change资产更改时更新服务人员
【发布时间】：2017-08-19 05:30:00
【问题描述】：

我注意到我的 Angular 构建（使用 Angular-cli）没有更新我的翻译（使用 ngx-translate - 即使在从浏览器中删除缓存之后也是如此。

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

有什么想法可以确保我的资产在更改时得到更新？ angular-cli 是否支持在构建之前配置我们的服务工作者的任何方式？我在他们的documentation 中没有找到太多关于它的信息。

【问题讨论】：

标签： javascript angular angular-cli service-worker ngx-translate

【解决方案1】：

如果翻译被缓存，您需要将cacheName 更改为您的服务工作者激活。

即：

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',
];

当我更改资产时，我总是更改缓存名称，在名称末尾添加一个新版本（即：var cacheName = 'myAppCache-3t';）。

如果您的 Service Worker 之前已安装，但在刷新或页面加载时有新版本的 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();
    })
  );
});

【讨论】：

是的，但我使用的是angular-cli。我想知道在构建过程中是否有命令（或我可以设置的变量）来执行此操作（服务工作者在构建过程中自动生成）。
对 angular-cli 不太了解，但你的 dist 文件夹中应该有一个 worker-basic 脚本。