Javascript Service Worker use cache after network timeout

Question

I have a web app which should work offline too. For this im using javascript service workers to put necessary files in the cache. If the connection is up, it loads all resources from the network. If there is no connection, the resources are loaded from the cache. This is working fine.

Now the problem is, if a have an internet connection on the device but the server is down. Then it never falls back to the cache because it has an internet connection.

Here is my code for the fetch event in the service-worker.js:

self.addEventListener('fetch', function(event) {
    event.respondWith(
        fetch(event.request).catch(function() {
            return caches.match(event.request);
        })
    );
});

My idea is to implement a sort of timeout, if the application cant get the content in lets say 30 seconds then always use the cache. Does anyone have an idea how to implement this? Im not that fit with promises...

pate · Accepted Answer · 2017-12-31 13:43:25Z

2

I guess your problem is that you're not opening an instance of the cache and then matching the request against that cache. You're using the caches API incorrectly.

You need something like:

return caches.open('my-cache-name').then...

I highly suggest you to read through this: https://serviceworke.rs/strategy-network-or-cache.html

There are lots of different SW strategies over at the same site!

answered Dec 31, 2017 at 13:43

pate

5,3232 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alphacoder Over a year ago

thx for the link! this sounds promising, i will test it in the next year ;)

Collectives™ on Stack Overflow

Javascript Service Worker use cache after network timeout

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related