Reactjs 如何将API中的数据缓存到React PWA中的缓存存储？

我用ReactJS构建了一个渐进式Web应用程序，但遇到了一个问题。我正在使用mockApi获取数据。 脱机时，我的应用程序不工作，因为服务人员只缓存静态资产

---

如何将来自mockApi的HTTP GET调用保存到缓存存储中？

与静态资产一起，您可以定义要缓存的URL：

var CACHE_NAME = 'my-cache_name';
var targetsToCache = [
  '/styles/myStyles.scss',
  'www.stackoverflow.com/'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(targetsToCache);
      })
  );
});

然后，您必须指示服务人员拦截网络请求，并查看是否与

targetsToCache

中的地址匹配：

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {

         // This returns the previously cached response 
         // or fetch a new once if not already in the cache
            return response || fetch(event.request);
        })
    );
});

---

如果您有兴趣了解更多信息，我写了一封信。

非常感谢，我会试试。很好。如果我的回答解决了你的问题或引导你走向正确的方向，你应该接受它。在create react app project中提供的代码片段应该放在哪里？@MaroťBeťko你可以创建一个名为“service worker.js”的文件，并在那里写下与service worker相关的所有逻辑：缓存策略、安装阶段要做什么，等