Angular Service Worker 中 index.html 的缓存答案

【问题标题】：Caching of index.html in Angular Service workerAngular Service Worker 中 index.html 的缓存
【发布时间】：2021-07-01 22:18:56
【问题描述】：

每次我使用 Angular 项目对 index.html 进行任何更改时，Service Worker 都不会更新，并且始终在 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/**"
          ]
        }
      }]
    }

我的请求响应标头：

知道如何解决这个问题吗？

谢谢

【问题讨论】：

你找到解决这个问题的方法了吗？我在运行 Angular 7 和 service worker 的项目中遇到了类似的问题。不知何故，即使在我更新缓存后，再次浏览时，工作人员有时仍会加载旧页面（即使它之前显示过新页面）

标签： angular angular5 angular-service-worker

【解决方案1】：

我认为问题出在 ngsw-config 中。 versionedFiles 下的 .css 和 .js 条目可能与中的 .css 和 .js 文件不匹配如果他们的名称中没有 .bundle 或 .chunk，则为 dist 文件夹。在更新的 Angular 版本中，这些条目被替换为 "/*.js" 和 "/*.css"，并且 dist 文件夹中的文件没有 .bundle 或 .chunk 在为生产构建时。

所以，问题实际上是 .js 和 .css 文件没有被缓存，并且每当服务器上的文件更新时，应用程序就不再找到它们和浏览器在服务工作者加载“缓存”文件、检测更改和更新文件之前抛出错误（因为它返回 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/**"
      ]
    }
  }]
}

【讨论】：

这是对我有用的解决方案，一个旧的 Angular 应用程序带有一个服务工作者，用于升级到更高版本的 Angular 的渐进式 Web 应用程序 (PWA)。如果您收到类似Refused to execute script from 'https://example.com/main.XXXXXXXXXXXXXXX.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 的错误，您可能会受到此错误的影响

【解决方案2】：

你可以强制 service worker 删除所有以前的 SW 缓存（也包括 index.html），在 service worker 中使用如下代码：

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

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

【讨论】：