我将我的React应用程序转换为PWA,它部分地运行良好。
我按照这个教程进行操作:https://medium.com/@toricpope/transform-a-react-app-into-a-progressive-web-app-pwa-dea336bd96e6
但是,这篇文章只展示了如何缓存静态数据,而我还需要存储来自服务器的数据。我可以按照这篇帖子的第一个答案的指示执行:How can I cache data from API to Cache Storage in React PWA?,并将存储数据的firebase地址插入到urlsToCache
数组中,由应该存储到缓存中的文件填充。
到目前为止,一切都很好,但是在将数据存储到缓存后,即使服务器已更新,应用程序也停止从服务器获取数据,仅使用来自缓存的数据加载页面。这就是我需要解决的问题。
简而言之,我需要从服务器获取数据,将其存储到缓存中以便在离线时使用,并在每次到达服务器时更新缓存。
我正在尝试按照此指南操作,但没有成功:https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#serving-suggestions
这是我的worker.js文件:
var CACHE_NAME = 'pwa-task-manager';
var urlsToCache = [
'/',
'/completed',
'/index.html',
'/static/js/main.chunk.js',
'/static/js/0.chunk.js',
'/static/js/1.chunk.js',
'/static/js/bundle.js',
'/calculadora',
'https://calc-marmo.firebaseio.com/clientes.json',
'https://calc-marmo.firebaseio.com/adm.json',
];
// Install a service worker
self.addEventListener('install', event => {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// Cache and return requests
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
// Update a service worker
self.addEventListener('activate', event => {
var cacheWhitelist = ['pwa-task-manager'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
非常感谢您的帮助。