Angular 7 PWA - иконки Font Awesome отсутствуют в автономном режиме

Проблема в том, что в автономном режиме значки шрифтов Awesome не отображаются. В автономном режиме я вижу, что файлы, которые имеют статус сбой на вкладке «Сеть», являются

  1. Сгенерировано в папке dist &
  2. В кеше на вкладке «Приложение» - например, /fa-solid-900.fb493903265cad425ccd.woff2

Очень признателен за любую помощь в этом. Подробности ниже - заранее спасибо.

Амит Коли

Соответствующие записи в файле пакета:

"@angular/animations": "7.1.3",
"@angular/common": "7.1.3",
"@angular/compiler": "7.1.3",
"@angular/core": "7.1.3",
"@angular/forms": "7.1.3",
"@angular/http": "7.1.3",
"@angular/platform-browser": "7.1.3",
"@angular/platform-browser-dynamic": "7.1.3",
"@angular/pwa": "^0.10.6",
"@angular/router": "7.1.3",
"@angular/service-worker": "7.1.3",
"@fortawesome/fontawesome-free": "^5.5.0",

В ngsw-config.json - ...

"/favicon.ico",
      "/index.html",
      "/*.css",
      "/*.js",
      "/*.woff",
      "/*.woff2",
      "/*.ttf",
      "/fontawesome-webfont*"
    ]

Manifest.json -

  "short_name": "TALSWeb",
  "theme_color": "#00A160",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",

Сгенерированный файл ngsw.json извлечен -

"assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/fa-brands-400.659c4d58b00226541ef9.woff2",
        "/fa-brands-400.8b7a9afd7b95f62e6ee8.woff",
        "/fa-brands-400.b69de69a4ff8ca0abe96.ttf",
        "/fa-regular-400.0b5e3a5451fc62d9023c.woff",
        "/fa-regular-400.b48c48ea8457846a5695.ttf",
        "/fa-regular-400.bdadb6ce95c5a2e7b673.woff2",
        "/fa-solid-900.48f54f63d7711d0912a9.ttf",
        "/fa-solid-900.bcb927a742a8370b7664.woff",
        "/fa-solid-900.fb493903265cad425ccd.woff2",
        "/favicon.ico",
        "/index.html",
        "/main.cbcf9854dbe01b31ca0f.js",
        "/polyfills.fab331e3b568bcb25c34.js",
        "/runtime.a66f828dca56eeb90e02.js",
        "/scripts.8d6556ad089996471ba5.js",
        "/styles.e844927534017e9a8be0.css"
      ],

в автономном режиме отсутствующие файлы находятся в кеше.PNG


angular progressive-web-apps font-awesome offline-caching angular-service-worker
person user2054683    schedule 13.12.2018    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вот мой конфиг:

"name": "assets",
  "installMode": "lazy",
  "updateMode": "prefetch",
  "resources": {
    "files": [
      "/assets/**",
      "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)",
      "/*-es5*.js"
    ],
    "urls": [
      "https://fonts.googleapis.com/**"
    ]
  }
person Nodarii    schedule 23.07.2019

arrow_upward
0
arrow_downward

В файле ngsw-config.json вы должны ввести весь URL-адрес cdn / путь к каталогу файла fontawesome css внутри assetGroup.

Чтобы его можно было кэшировать при первой загрузке.

person Deepak swain    schedule 18.12.2018

arrow_upward
0
arrow_downward

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

Поэтому необходимо установить параметр ignoreURLParametersMatching, дополнительная информация в документах: https://developers.google.com/web/tools/workbox/modules/workbox-precaching#ignore_url_parameters

person kudlohlavec    schedule 15.05.2019