CODEWITHSUNDEEP
angularionic-frameworkprogressive-web-appsionicons
Juan Fernandez Sosa
Juan Fernandez Sosa

Reputation: 570

Cache Icons Ionic PWA Angular

I was wondering if someone can help me. Im developing a PWA using Ionic + Angular and hosting it using Firebase. The fact is when i lose internet, ionic icons desapired... I can't figuered it out how to modify my ngsw-config.json to get it works..

Here is my Service Worker Configuration file 

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/assets/fonts/*",
          "node_modules/videogular2/fonts/videogular.css",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Upvotes: 4

Views: 1678

Answers (1)

Vitikc
Vitikc

Reputation: 41

Add a new section or extend existing like this:

{
      "name": "icons",
      "installMode": "prefetch", // Download as soon as possible, may cause big net usage
      "updateMode": "prefetch", // Use cached version
      "resources": {
        "files": [
          "/svg/*.svg", // Path or template for your icons (Fetches all of it)
          "/svg/concrete.svg" // You may use concrete ones only
        ]
      }
}

If you have a large library of icons may be better to specify which should be available when the app in offline mode. More info you can find here Angular service-worker configuration guide

Upvotes: 4

Related Questions