带有service-worker (pwa)的angular应用程序未按预期工作

Question

与服务工作者一起处理离线角度可从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",

Answer 1

对于index.html和其他小文件，通常不需要使用lazy，因为这些文件非常轻量级。我建议在服务工作者配置文件中将资产和其他繁重文件拆分到单独的组中，并仅对它们使用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"
        ]
      }
    },