サービスワーカーを使用したAjaxキャッシング

Question

プログレッシブウェブアプリケーションを開発しています。 オフライン効果を追加しようとしているページがあります。続き は私のサービスワーカーのコードである：上記のコードTEHから今

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); 
    }) 
); 
}); 

、私はすべてをキャッシュすることができています。 ページを2回または3回リロードすると、すべての要求がサービスワーカーからコンソールのネットワークタブを経由していることがわかります。 私は無線LANをオフにした後にページをリロードしようとすると、空白の画面が表示されません。私はプリキャッシュされているもので私のページを参照してください。しかし、ネットワークがオフになっているときにページを埋めるAJAXが消えてしまうので、私はフルページを見ることができません。 誰かが私の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()); 
});