Caching Images in Angular

Question

I am having around 300 designs and I am loading all at a time. I would like to cache those images instead of calling server everytime. (My desings won't change most of the time). Below is the code, of how I am loading them. What would be the best approach to cache them.

app-thumbnail is a different component where I am only loading image.

 <div *ngFor="let design of designs">
      <div (click)="showDesignDetails(design.designId)">
          <app-thumbnail [designId]="design.designId"></app-thumbnail>          
      </div>
    </div>

Solution

I can think of two ways:

1) Application Cache Manifest. According to the documentation,

Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.

2) Service Workers. Through the use of service workers, you can cache various types of resources, including images and network requests.

Though this brings me to the topic of using Progressive Web Applications (PWA). Since you are using Angular, you can easily set it up as a PWA (which is based on the usage of service workers) by following the official Angular guide for setting up service workers.

Comments

[Jacques ジャック]

Realistically, the browser should already be caching the image. Assuming that your reason for wanting to cache is your browser being slow, it's probably not caused by a lack of caching, but because of rendering the images. Have you considered lazy loading the images to solve your issue.

[Chatra]

I found your option 1 here in stackoverflow, Not sure I can go that because of people using different browsers(even IE). will try that. Second one is interesting, have to do my research. Thanks

[wentjun]

@Chatra these days, people are adopting service workers as that's where the trend is heading to

[MusicDev]

Quick note: don't bother with application caches anymore. Moving away from them isn't so much a trend as it is a necessity. They're being deprecated, so just use service workers instead.