在Angular Service worker中缓存index.html

Question

每次我使用angular项目对index.html进行任何更改时，Serviceworker都不会更新，并始终在index.html上提供旧的缓存版本。我该如何解决这个问题（另外，服务器端和浏览器都没有缓存）

这是我的ngsw-config文件

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.json"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

我对请求的回复标题：

知道如何解决此问题吗？

由于

Answer 1

我认为问题出在ngsw-config中。 versionedFiles下的 .css 和 .js 条目可能与 .css 和 .js 不匹配dist文件夹中的文件，如果他们的名字中没有 .bundle 或 .chunk 。在Angular的最新版本中，这些条目已替换为"/*.js"和"/*.css"， dist 文件夹中的文件没有 .bundle 或 .chunk 。

所以，问题实际上是 .js 和 .css 文件没有被缓存，每当服务器上的文件更新时，应用程序就不再找到他们和浏览器在服务工作者加载＆＃34;缓存＆＃34;之前抛出错误（因为它返回index.html）文件，检测更改并更新文件。

在Angular 6中，versionedFiles的行为与files相同，不推荐使用。所以，你的ngsw-config.json应该是这样的：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.json",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Answer 2

您可以在服务人员中使用如下代码强制服务人员删除所有以前的SW缓存（也包括index.html）：

const DIRTY_CACHE = 'application-version-number-or-whatever';

self.addEventListener('install', () => { 
  // Skip over the "waiting" lifecycle state, to ensure that our 
  // new service worker is activated immediately, even if there's 
  // another tab open controlled by our older service worker code. 
  self.skipWaiting(); 
});

self.addEventListener('activate', event => {
  self.registration.unregister();
  event.waitUntil(
    caches
      .keys()
      .then(cacheNames =>
        cacheNames.filter(cacheName => cacheName.indexOf(DIRTY_CACHE) !== -1),
      )
      .then(cachesToDelete =>
        Promise.all(
          cachesToDelete.map(cacheToDelete => caches.delete(cacheToDelete)),
        ),
      )
      .then(() => self.clients.claim()),
  );
});

可以找到更详细的说明in this article

也许不是最好的策略，但可以解决此问题，可能是由于标头过期错误造成的。

Answer 3

我遇到了同样的问题。我通过从 index.hmtl 文件中删除 ngsw-config.json 解决了这个问题。这样，Service Worker 仍然会缓存所有资产、css、js 和其他指定的东西。

所以，我之前的 ngsw-config.json 配置是这样的：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
      }
    }
  ]
}

现在是这样的：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/manifest.webmanifest", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
      }
    }
  ]
}

请注意，我只从 index.html 中删除了 assettGroups[0].files。