使用服務人員進行Ajax緩存

我正在開發一個漸進式網頁應用程序。我有一個頁面，我試圖添加離線效果。以下是我的服務人員代碼：使用服務人員進行Ajax緩存

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

現在從德上面的代碼中，我能夠緩存的一切。當我重新加載頁面兩次或三次，我可以看到每個請求都來自服務工作者通過控制檯中的網絡選項卡。現在，如果我嘗試關閉我的wifi後重新加載頁面，那麼我沒有看到空白屏幕。我看到了預先緩存的內容。但是我無法看到整個頁面，因爲填充頁面的ajax在網絡關閉時就會消失。任何人都可以告訴我如何緩存我的ajax響應，以便我得到一個無暇的體驗。代碼來緩存我所有的ajax響應：

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

來源

2016-06-14 Uday Khatry

當你離開時需要添加一個額外的步驟來運行。

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

來源

2016-10-27 09:16:46

使用服務人員進行Ajax緩存

回答

相關問題