使用服务人员进行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缓存

回答

相关问题