Making Service Worker always load files from server, unless Offline

Question

As I understand, Service Workers have their own cache. And HTTP traffic has a separate cache.

When you are offline, a browser refuses to show you a website from a HTTP cache, but it gladly shows you a website from a Service Worker cache.

I update my website many times a day (only the content of files, URLs remain the same). My HTTP caching is set to one hour.

I want to offer an offline mode. But when online, a website should always be loaded from a server (or from 1-hour HTTP cache).

What code should I use for such Service Worker? I believe it is not described here: https://web.dev/offline-cookbook

Answer 1

Based on your use case I would say you can go with "Network first" approach.

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

In your fetch event handler we are doing following things:-

• Use the fetch method to get data from the server.
• Add a catch handler in case of network failure and get data from the cache storage.(which will in case of offline state).

Note:- We are assuming you are caching data in your install event of service worker. if you are not then we can do that in fetch event also.