API Create React App v4 生成的 PWA 中的缓存

Question

This是使用cra-template-pwa-typescript的模板。如何缓存外部 API 和图像？

Answer 1

c-r-a v4 使用一种模型，在该模型中，您可以完全控制由 Workbox 提供支持的服务工作者文件。

Workbox 文档中有关缓存的一般指南应该有所帮助：https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests

举一个具体的例子，假设你想用一个过时的重新验证策略来缓存所有跨源图像。您可以通过将此路由添加到您的服务工作者文件来做到这一点：

registerRoute(
  ({request, url}) => url.origin !== self.location.origin &&
                      request.destination === 'image',

  new StaleWhileRevalidate({
    cacheName: 'cross-origin-images',
    plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
  })
);