在 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)应用程序缓存清单。根据文档，

开发人员可以使用应用程序缓存 (AppCache) 接口来指定浏览器应缓存并提供给离线用户的资源。即使用户在离线时单击刷新按钮，缓存的应用程序也会加载并正常工作。

2）服务人员。通过使用 Service Worker，您可以缓存各种类型的资源，包括图像和网络请求。

不过这让我想到了使用渐进式 Web 应用程序(PWA)的主题。由于您使用的是 Angular，因此您可以按照 Angular 官方设置 Service Worker指南轻松将其设置为 PWA（基于 Service Worker 的使用情况）。