How to serve your ionic icons offline in a PWA

As a developer, you want to ensure that your Progressive Web App (PWA) provides a seamless user experience, even when the user is offline. One crucial aspect of achieving this is caching your app's assets, including icons. In this post, we'll explore how to optimize your PWA for offline use by caching icons using the `ngsw-config.json` file.

Configuring the ngsw-config.json File

When registering your PWA, the `ngsw-config.json` file is the most important configuration file. To ensure your Ionic icons are visible offline as well, add the following configuration:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/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)"
      ]
    }
  },
  {
    "name": "icons",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/svg/*.svg"
      ]
    }
  }
]
}

This configuration will cache all the icons offline. The "prefetch" mode means that the icons will be downloaded as soon as possible, or the cached version will be used if available.

Caching Specific Icons

If you want to cache only specific icons, you can modify the configuration to include only those icons. For example:

"/svg/cloud-offline-outline.svg"

This will cache only the `cloud-offline-outline.svg` icon offline.

Updating Your PWA

To make these changes take effect, make sure to unregister your previous service worker or build an update of your PWA. This will ensure that the new configuration is applied and your icons are cached offline.