Angular CLI PWA - только ngsw-config кеширует изображения, на которые есть ссылки в CSS - PullRequest
0 голосов
/ 19 сентября 2019

Так что это немного странная проблема, которую я не могу найти где-либо в Интернете.Я надеялся, что кто-то здесь сможет пролить некоторый свет на следующее, а также на возможное исправление -

У меня есть и приложение Angular CLI, которое соответствует требованиям Google 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 (background-image).Все, что размещено на самой странице, игнорируется.

В результате получается автономная страница без логотипов или значков.

Просмотр сгенерированной папки dist, «рабочих» файлов изображенийкопируются и получают случайный суффикс.Generated image files

Внутри сгенерированного файла 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",
        ...
    }
    ...
}

Кто-нибудь можетчтобы вообще демистифицировать это?

Извиняюсь за длинный вопрос, но если вы зашли так далеко, спасибо:)

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 19 сентября 2019

Путем возни с несколькими разными вещами я нашел обходной путь для этого - хотя не объясняет, почему он изначально не работал.

Кажется, что переименование моей папки с admin/images на assets/images и обновление соответствующей resource > files paths заставило его работать.

Если кто-нибудь наткнулся на более глубокое понимание причины этого, пожалуйста, дайте мне знать.

Спасибо, Роб

...