Angular CLI PWA - ngsw-config仅缓存CSS中引用的图像

Question

所以这是一个有点奇怪的问题，我似乎在网上找不到任何参考资料。希望这里的人能阐明以下问题，以及潜在的解决方案-

我有和角度CLI应用程序，这是符合谷歌的PWA的要求。一切都像预期的那样工作，但是一些图像并没有被服务工作者缓存。

下面是我的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",
          "../assets/signalR/appHub.js",
          "../admin/images/**",
          "../manifest/manifest.json"
        ],
        "urls": [
          "/api/WhoAmI",
          "/api/GetApps"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)",
          "../admin/images/**"
        ]
      }
    }
  ]
}

在admin/images文件夹中，有一些背景图像、徽标、微调器、图标等。但是，当我运行'ng-build --prod‘时，唯一缓存的图像是那些在CSS (背景图像)中引用的图像。放置在页面本身上的任何内容都将被忽略。

这会产生一个没有徽标或图标的脱机页面。

查看生成的“dist”文件夹，“工作”图像文件被复制并被赋予一个随机的后缀。

​

在生成的ngsw.json文件中，这些是唯一引用的图像，没有提到丢失的徽标等。

{
  "configVersion": 1,
  "timestamp": 1568879436433,
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/favicon.ico",
        "/index.html",
        "/main-es2015.b125878abf05e7d82b63.js",
        "/main-es5.6e9e620d3fbd96496f98.js",
        "/polyfills-es2015.4d31cca2afc45cfd85b5.js",
        "/polyfills-es5.2219c87348e60efc0076.js",
        "/runtime-es2015.703a23e48ad83c851e49.js",
        "/runtime-es5.465c2333d355155ec5f3.js",
        "/scripts.f616c8c0191ed4649bce.js",
        "/styles.a4be089a70c69f63e366.css"
      ],
      "patterns": [
        "\\/api\\/WhoAmI",
        "\\/api\\/GetApps"
      ]
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [
        "/assets/signalR/appHub.js",
        "/bgrounds-geometric-black.8d983f6875c006eda992.png",
        "/bgrounds-geometric-red.1484266e3058319624bd.png",
        "/block-spinner-dark.20f05a2ddef506c61f4d.gif",
        ...
    }
    ...
}

有没有人能够揭开这一切的神秘面纱？

很抱歉问了这么长的问题，但如果你已经说到这里，谢谢你:)

如有任何帮助，我们不胜感激！

Answer 1

通过摆弄一些不同的东西，我找到了一个解决这个问题的方法--这并不能解释为什么它一开始不能工作。

似乎将我的文件夹从admin/images重命名为assets/images并更新相关的resource > files paths使其正常工作。

如果任何人偶然发现了更多关于原因的见解，请让我知道。

谢谢，Rob

Answer 2

我将以下行添加到ngsw-config.json

"/runtime*",
"/main*",
"/style*",
"/polyfill*"

之后看起来是这样的

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/runtime*",
          "/main*",
          "/style*",
          "/polyfill*",
          "/favicon.ico",
          "/index.html",
          "/css",
          "/js"
        ]
      }
    }, {

然后它就成功了。