[PWA] 19. Cache the Avatars

The cache the avatars is little different from the 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 t Heir avatars frequently.

Self.addeventlistener (' Fetch ',function(event) {varRequesturl =NewURL (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) {returnResponse | |fetch (event.request); })  );});

functionServeavatar (Request) {//Avatar URLs look like:  //avatars/sam-2x.jpg  //But Storageurl had the-2x.jpg bit missing.  //Use this URL to store & match the image in the cache.  //This means is the store one copy of each avatar.  varStorageurl = 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!  returnCaches.open (Contentimgscache). Then (function(cache) {returnCache.match (Storageurl). Then (function(response) {varNetfetchresponse = Fetch (Request). Then (function(networkresponse) {cache.put (Storageurl, Networkresponse.clone ()); returnNetworkresponse;             }); returnResponse | |Netfetchresponse; })      })}

[PWA] 19. Cache the Avatars