How to cache API response using Cache and update method in Angular?

I'm new to PWA and Service Workers, in my Angular App i have a main screen where i show a list of clients get from my API.

The component shows a list with the logo of the client and data about it.

The issue is that all images are in get from the server in base64 so after every refresh it takes very long to get all of them and i would be able to cache that data so that after the user refreshes the webpage he will still see the list of client without making a new request to the server while it will get the new data in background and it will be visible only on the new user access.

I was trying to cache my API by doing adding a dataGroup like this:

  "dataGroups": [      {        "name": "API",        "urls": ["/api/*"],        "cacheConfig": {          "maxAge": "0u",          "strategy": "freshness",          "maxSize": 100        }      }    ]  

And in my component in ngInit i take the resourses like this:

  ngOnInit(): void {        combineLatest([this.negoziService.negozi(), this.negoziService.images()]).subscribe(([nagozi, images]) => {        this.arrNegozi = nagozi;        images.map((img) => {          const negozio = this.arrNegozi.find((d) => d.id === img.id);          negozio !== undefined ? negozio.logo = 'data:image/jpg;base64,' + img.img : negozio.logo = 'assets/images/no_image.svg';        })        },        error => {          this.errore = error;        }      )    }  

https://stackoverflow.com/questions/67334686/how-to-cache-api-response-using-cache-and-update-method-in-angular April 30, 2021 at 09:22PM