在React PWA Service Worker中缓存json文件时出现问题（使用cra创建）

Question

我使用 cra 模板创建 PWA 应用程序。 我的问题是 Service Worker 没有缓存我的语言环境文件夹（包含用于翻译的 json 文件） 运行应用程序并处于离线模式后，一切正常，除了 2 个包含语言翻译的 json 文件

如何将 json 文件添加到 Service Worker 预缓存中（默认使用 Workbox）

Answer 1

如果您的 JSON 文件位于公共文件夹或项目内，您可以使用以下代码来缓存它们：

    registerRoute(
  /\.(?:json)$/i,
  new StaleWhileRevalidate({
    cacheName: CACHE_NAME + 'static-json-assets',
  }),
  'GET'
);

此代码注册 JSON 文件的路由，并使用“Stale-While-Revalidate”缓存策略来缓存它们。

如果 JSON 文件是从 API 获取的，您应该使用 fetch 事件来缓存这些文件。

    self.addEventListener('fetch', event => {
  if (event.request.url.includes('.json')) {
    event.respondWith(
      caches.open('json-cache').then(cache => {
        return cache.match(event.request).then(response => {
          return response || fetch(event.request).then(networkResponse => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
        });
      })
    );
  }
});