using cache.put in Service Worker fetch handler

cache-put.js

/**
purpose:
for all .png image requests,
- look into cache if request-response Pair is already in store
- if found, return the object in cache and refresh cache from network
- if not found, fetch from network, store in cache and return the response
*/
self.addEventListener('fetch', function (event) {
  const requestUrl = new URL(event.request.url);
  if(requestUrl.endsWith('.png'){
    event.respondWith(
      caches.open('my-png-image-cache')
    .then(
      cache => cache.match(event.request)
        .then(response => {
          return response || fetch(event.request).then(function(response) {
            cache.put(event.request, response.clone());
            return response;
          });
        })
      )
    )
  }
}