Avoid repeated requests from same svg icons (disk cache)

Question

I have a page with different info cards. That cards contains illustrations (one per card) and different icons (SVG) with multiple options (edit, delete, more...). Every one of that cards contains an illustration + icons. But all icons are the same for all cards.

What I'm trying to avoid is just to call again and again (one per card) the same icons when doing a fetch (I'm using a app-svg custom component to fetch the SVG from my /assets folder.)

Besides, would be also interesting what happens when browser uses disk cache (2nd time you go to same url). Can I cache only the icon once? What should be the best strategy to do that? Thanks

Answer 1

I think Angular Service Workers are a great choice for this and bringing other performance boosts. They provide robust cache info strategies for various types of requests, one of which is assets. Angular Service Workers Intro

If you don’t want to go the service worker route, I recommend looking into an Angular HttpInterceptor and how you could implement a cache at this point responding to requests without it leaving your app.