Кэширование изображений в Angular

Question

У меня около 300 дизайнов, и я загружаю все одновременно. Я хотел бы кэшировать эти изображения вместо вызова сервера каждый раз. (Мои желания не изменятся большую часть времени). Ниже приведен код того, как я их загружаю. Что было бы лучшим подходом для их кэширования.

app-thumbnail - это другой компонент, в который я загружаю только изображение.

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

Answer 1

Я могу придумать два пути:

1) Манифест кэша приложений .Согласно документации,

Разработчики могут использовать интерфейс Application Cache (AppCache), чтобы указать ресурсы, которые браузер должен кэшировать и сделать доступными для офлайн-пользователей.Кэшированные приложения загружаются и работают правильно, даже если пользователи нажимают кнопку обновления, когда они находятся в автономном режиме.

2) Сервисные работники .Благодаря использованию сервисных работников вы можете кэшировать различные типы ресурсов, включая изображения и сетевые запросы.

Хотя это подводит меня к теме использования Прогрессивных веб-приложений (PWA).Поскольку вы используете Angular, вы можете легко настроить его как PWA (который основан на использовании сервисных работников), следуя официальному руководству Angular для настройки сервисных работников.