Ajax кеширование с использованием сервисного работника

Question

Я разрабатываю прогрессивное веб-приложение. У меня есть страница, к которой я пытаюсь добавить офлайн-эффект. Ниже моя служба код работника:

toolbox.precache(['/mobileweb/', 
        '/mobileweb/index.html', 
        '/mobileweb/header.html', 
        '/mobileweb/index.html', 
        '/mobileweb/location-search.html', 
        '/mobileweb/voucher-details.html' 


]); 
toolbox.router.any('/mobileweb/js/(.*)', toolbox.cacheFirst); 
toolbox.router.any('/mobileweb/images/(.*)', toolbox.cacheFirst); 
toolbox.router.any('/mobileweb/css/(.*)', toolbox.cacheFirst); 
toolbox.router.any('/mobileweb/fonts/(.*)', toolbox.cacheFirst); 
//toolbox.router.get('/(.*)', toolbox.fastest, {origin: 'https://example.in/mp_webapp/webwallt'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mobileweb/css'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mobileweb/images'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mobileweb/js'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://s3-ap-southeast-1.amazonaws.com'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://d15xs3htl97jic.cloudfront.net'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://bit.ly'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://maps.googleapis.com'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mp_webapp/webwallet/ajax'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://maps.google.com'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://csi.gstatic.com/'}); 
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://maps.gstatic.com/'}); 
this.addEventListener('fetch', function(event) { 
// console.log(event.request.url); 
    event.respondWith(
    caches.match(event.request).then(function(response) { 
     console.log(event.request.url); 
     return response || fetch(event.request); 
    }) 
); 
}); 

Теперь из ТОЙ выше коды, я могу кэшировать все. Когда я перезагружаю страницу дважды или трижды, я вижу, что каждый запрос выполняется из рабочего рабочего через вкладку сети в консоли. Теперь, если я попытаюсь перезагрузить страницу после отключения моего Wi-Fi, тогда я не вижу пустой экран. Я вижу свою страницу с вещами, которые были предварительно кэшированы. Но я не могу видеть полную страницу, поскольку аякс, который заполняет страницу, отмирает, когда сеть выключена. Может ли кто-нибудь сказать мне, как я могу кэшировать свой ответ ajax, чтобы у меня возникли безвкусные ощущения. Код для кэширования всего моего ответа на ajax:

toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mp_webapp/webwallet/ajax'}); 

Answer 1

Необходимо добавить дополнительный шаг, который необходимо запустить, когда вы находитесь в автономном режиме.

self.toolbox.router.default = self.toolbox.networkFirst; 
self.toolbox.options.networkTimeoutSeconds = 86400; 

self.addEventListener('install', function(event) { 
    return event.waitUntil(self.skipWaiting()); 
}); 
self.addEventListener('activate', function(event) { 
    return event.waitUntil(self.clients.claim()); 
});