I'd like to share with you this snip:

const dynamic_cache_key = "my-dynamic-cache";

self.addEventListener('fetch', (event) => {
    const destination = event.request.destination;
    switch (destination) {
        case 'style':
        case 'script':
        case 'font':
        case 'image': {
            event.respondWith(
                caches.open('hp-dynamic-cache').then(function(cache) {
                    return cache.match(event.request).then(function (response) {
                        return response || fetch(event.request).then(function(response) {
                            cache.put(event.request, response.clone());
                            return response;
                        });
                    });
                })
            );
            return;
        }
        default: {
        }
    }
});