CODEWITHSUNDEEP
ajaxservice-worker
Uday Khatry
Uday Khatry

Reputation: 469

Ajax caching using service worker

I am developing a progressive web app. I have a page to which i am trying to add offline effect. Following is my service worker code : 

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

Now from teh above code, i am able to cache everything. When i reload the page twice or thrice i can see that every request is from Service worker through the network tab in the console. Now if i try to reload the page after switching off my wifi, then i do not see blank screen. I see my page with the things which have been pre cached. But i am not able to see the full page as the ajax which is populating the page dies off when the network is off. Can anyone tell me how can i cache my ajax response so that i get a seemless experience . Code to cache all my ajax response : 

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

Upvotes: 2

Views: 2049

Answers (1)

Devendra Madheshiya
Devendra Madheshiya

Reputation: 131

There is a need to add an additional step at last to run when you are offine.

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

Upvotes: 2

Related Questions