4

The issue is that in offline mode the font awesome icons are not being displayed. When in offline mode I can see that the files that have a status of failed in the Network tab are

  1. Generated in the dist folder &
  2. In the cache in the Application tab - e.g. /fa-solid-900.fb493903265cad425ccd.woff2

Much appreciate any help with this. Details below - thanks in advance.

Amit Kohli

The pertinent entries in the package file are - 

"@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",

In the 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": "/",

The generated ngsw.json file excerpted - 

"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"
      ],

in offline mode missing files are in the cache.PNG

user2054683
  • 41
  • 1
  • 3

3 Answers3

2

Here is my config:

"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/**"
    ]
  }
Nodarii
  • 934
  • 7
  • 21
0

In ngsw-config.json file, you have to enter the whole cdn url / directory path of fontawesome css file inside assetGroup.

So that it can be cached on first load.

Deepak swain
  • 3,380
  • 1
  • 30
  • 26
0

For me, problem was that there are version numbers in FA queries and thus it resulted in workbox not caching it because it considered it to be another resource.

Therefore it is needed to set ignoreURLParametersMatching parameter, more information in docs: https://developers.google.com/web/tools/workbox/modules/workbox-precaching#ignore_url_parameters

kudlohlavec
  • 464
  • 4
  • 18