Service Worker

While service workers and PWAs are becoming standards of modern web applications, resource caching has become more complex than ever. This article covers the big picture of browser caching, including:

The use cases of and differences between service worker caching and HTTP caching.

The pros and cons of different service worker caching expiry strategies compared to regular HTTP caching strategies.

Service worker caching and HTTP caching (web.dev)

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.

Making Service Worker always load files from server, unless Offline - STACKOOM

This is the correct approach for things that can't be performed offline, such as analytics pings and non-GET requests. Again, you don't often need to handle this case specifically and the cache falling back to network approach will often be more appropriate.

self.addEventListener('fetch', function(event) {
 event.respondWith(fetch(event.request));
});

Alternatively, simply don't call event.respondWith, which will result in default browser behaviour.

https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker#network_only