Ajax caching using service worker

[acircuit]

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

[echopi]

Check your ajax urls to see if all of them are deferent? Cause the cache key is the new Request(url)

[addyosmani]

When you open up DevTools (look at the Resources or Application panel) > Cache Storage do you see any sw-toolbox entries for the origin you've specified in toolbox.router above?

[Ferdev]

I'm experiencing a similar issue. In an ember app, I'm trying to cache the only ajax request being made using a service worker. This is the code in the service worker:

toolbox.router.any("http://localhost:3000/parents/48",toolbox.cacheFirst);
self.addEventListener('install', function(event) {
console.log('Handling install event. Resources to pre-fetch:', urlsToPrefetch);
  if (self.skipWaiting) { self.skipWaiting(); }
});

The request is not stored in Cache Storage using neither networkFirst nor cacheFirst strategies. As soon as I enable offline mode, the app stops working. Tested in Chromium Version 52.0.2743.116 (64-bit)

This is the response headers of the ajax request:

HTTP/1.1 200 OK
X-Frame-Options: SAMEORIGIN
X-Xss-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Content-Type: application/json; charset=utf-8
Etag: W/"4fd8d33716d93dd29b5b43f79230ebe6"
Cache-Control: max-age=0, private, must-revalidate
X-Request-Id: 916f4cb2-ecb5-4d2e-8500-7766e9073bc3
X-Runtime: 1.215135
Access-Control-Allow-Origin: http://localhost:7800
Access-Control-Allow-Methods: GET, PUT
Access-Control-Expose-Headers: 
Access-Control-Max-Age: 1728000
Access-Control-Allow-Credentials: true
Vary: Origin
Server: WEBrick/1.3.1 (Ruby/2.3.0/2015-12-25)
Date: Wed, 24 Aug 2016 09:43:13 GMT
Content-Length: 113472
Connection: Keep-Alive

Any ideas what could be wrong?

[zeorin]

@acircuit @Ferdev I just ran into this same issue. In my case the problem was that I was trying to cache non-GET requests. sw-toolbox silently fails when trying to persist those requests to the cache.

I've submitted #209 to at least show an error if that is the case.

Keep in mind that your issue might have a different cause, but I hope this'll help.