angular - 在 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 Manifest 。根据文档，

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 。通过使用 Service Worker，您可以缓存各种类型的资源，包括图像和网络请求。

尽管这让我谈到了使用 Progressive Web Applications 的主题(PWA)。由于您使用的是 Angular，因此您可以按照官方 Angular guide 轻松将其设置为 PWA(基于 Service Worker 的使用情况)。用于设置 Service Worker。