[PWA] 19. Cache the avatars-优快云博客

本文介绍了一种针对网站中头像图片的缓存策略。该策略不仅利用浏览器缓存提高加载速度，还通过网络请求更新那些频繁更换的用户头像。具体实现包括使用Service Worker拦截请求，并根据不同类型的资源采取不同的缓存措施。

Cache the avatars is little different from cache photos. We need to serve the page with our cache data and also go to the network for fetch avatars in case some user like change their avatars frequently.

self.addEventListener('fetch', function(event) {
  var requestUrl = new URL(event.request.url);

  if (requestUrl.origin === location.origin) {
    if (requestUrl.pathname === '/') {
      event.respondWith(caches.match('/skeleton'));
      return;
    }
    if (requestUrl.pathname.startsWith('/photos/')) {
      event.respondWith(servePhoto(event.request));
      return;
    }
    // TODO: respond to avatar urls by responding with
    // the return value of serveAvatar(event.request)
    if(requestUrl.pathname.startsWith('/avatars/')){
      event.respondWith(serveAvatar(event.request));
      return;
    }
  }

  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

function serveAvatar(request) {
  // Avatar urls look like:
  // avatars/sam-2x.jpg
  // But storageUrl has the -2x.jpg bit missing.
  // Use this url to store & match the image in the cache.
  // This means you only store one copy of each avatar.
  var storageUrl = request.url.replace(/-\dx\.jpg$/, '');

  // TODO: return images from the "wittr-content-imgs" cache
  // if they're in there. But afterwards, go to the network
  // to update the entry in the cache.
  //
  // Note that this is slightly different to servePhoto!
  return caches.open(contentImgsCache)
      .then(function(cache){
         return cache.match(storageUrl).then(function(response){

             var netFetchResponse = fetch(request).then(function(networkResponse){
                 cache.put(storageUrl ,networkResponse.clone());
                 return networkResponse;
             });

             return response || netFetchResponse;
         })
      })
}