我用 ReactJS 构建了一个渐进式 Web 应用程序，但遇到了一个问题。我正在使用 mockApi 来获取数据。离线时，我的应用程序不起作用，因为 Service Worker 仅缓存静态资产。
如何将来自 mockApi 的 HTTP GET 调用保存到缓存存储中？
如何在 React PWA 中将数据从 API 缓存到缓存存储？
IT技术
reactjs
service-worker
progressive-web-apps
2021-05-24 23:19:44
1个回答
除了静态资产，您还可以定义要缓存的 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);
})
);
});
如果您有兴趣了解更多信息，我写了一系列关于 Progressive Web Apps 的文章。