Open acircuit opened 8 years ago
Check your ajax urls to see if all of them are deferent? Cause the cache key is the new Request(url)
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?
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?
@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.
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'});