创建React应用程序v4生成的PWA中的API缓存

Question

使用cra-template-pwa-typescript的模板是This。如何缓存外部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 }),
    ],
  })
);