1

与服务人员一起使用离线角度从https://angular.io/guide/service-worker-config获取参考

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

下面是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",
          "/*.css",
          "/*.js",
          "/*.manifest",
           "/assets/**"
        ]
      }
    } 
  ]
}

也尝试过updateMode，但仍然缓存文件不更新更改 

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

1 回答 1

0

通常不需要使用lazyforindex.html和其他小文件，因为这些文件很轻。我建议将资产和其他繁重文件拆分到服务工作者配置文件中的单独组中，并lazy仅用于它们：

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

然后在dist构建应用程序后查看该文件夹。它将根据您编写的规则创建一个服务工作者配置文件ngsw-config.json（它将包含所有带有哈希键的缓存文件的列表）。尝试通过在开头添加解释标记来排除该文件的缓存：

  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "!/some-file-not-to-cache.js"
        ]
      }
    },
于 2020-03-27T15:31:49.427 回答