带有服务工作者（pwa）的angular应用程序未按预期工作

Question

与服务人员一起进行脱机工作，从https://angular.io/guide/service-worker-config

应用程序脱机工作正常唯一的问题是，如果我使用“installMode”：“prefetch”应用程序脱机工作正常，但缓存中的文件在服务器上的文件更新时从不更新。如果我使用“installMode”：“lazy”`应用程序无法脱机工作。

以下是ngsw配置。我的应用程序的json。

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js",
          "/*.manifest",
           "/assets/**"
        ]
      }
    } 
  ]
}

还尝试了updateMode，但仍然缓存未在更改时更新的文件

  "installMode": "prefetch",
  "updateMode": "prefetch",

Answer 1

通常不需要为index.html和其他小文件使用懒，因为这些文件重量非常轻。我建议将资产和其他重文件拆分到一个单独的组中的Service Worker配置文件和使用懒只为他们：

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

然后在构建应用后查看dist文件夹。它将有一个基于您在ngsw-config.json中编写的规则创建的Service Worker配置文件（它将保存带有散列键的所有缓存文件的列表）。尝试从缓存中排除该文件，在开始处添加解释标记：

  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "!/some-file-not-to-cache.js"
        ]
      }
    },