serve content from cache if available. otherwise serve from network but store for future usage

cache-first.js

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .catch(_ => {
      //data not found in cache, goto network
        fetch(event.request)
          .then(res => {
            if(res){
              caches.open('cache first category data', cache => cache.put(event.request, res))
              return res
            }
          })
      })
  );
});

I don't think this will work.

On line 4, the catch will never fire, even if the resource can't be found in the cache (I know, it's very unexpected behaviour).

On line 9, you need to clone the response to put it in the cache (because the response is a stream, it can only be used once):

caches.open('cache first category data', cache => cache.put(event.request, res.clone()))