zoukankan      html  css  js  c++  java
  • [PWA] 19. Cache the avatars

    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;
             })
          })
    }
  • 相关阅读:
    virtual pc 2007 安装ubuntuLinux出现 end trace 4eaa2a86a8e2da22 的解决办法
    关于SQLSERVER 2005的负载均衡
    华硕主板前置音频设置
    Action和Func的区别
    简单二分法 简单
    13.4 抽像类做界面(Abstract Class As Interface) 简单
    Strings_append_学习 简单
    Strings at_学习 简单
    13.6.2 新添加一种技术(Adding One Technologry) 简单
    13.3.3 应用程序界面(Application Interface) 简单
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5522116.html
Copyright © 2011-2022 走看看