zoukankan      html  css  js  c++  java
  • [PWA] 17. Cache the photo

    To cache photo, You need to spreate cache db to save the photo. So in wittr example, we cache the text already, if there in the wittr there is photo, we will create cache for it, so next time we can fetch from cache.

    For the incoming photo, we also need to create cache for them.

    For the 'install' event, we only cache assets, static imgs, css and js.

    var staticCacheName = 'wittr-static-v7';
    var contentImgsCache = 'wittr-content-imgs';
    var allCaches = [
      staticCacheName,
      contentImgsCache
    ];
    
    self.addEventListener('install', function(event) {
      event.waitUntil(
        caches.open(staticCacheName).then(function(cache) {
          return cache.addAll([
            '/skeleton',
            'js/main.js',
            'css/main.css',
            'imgs/icon.png',
            'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
            'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
          ]);
        })
      );
    });

    Here we don't cache dynamic photos. But at the beginning we define the  cache name for photo .

    self.addEventListener('activate', function(event) {
      event.waitUntil(
        caches.keys().then(function(cacheNames) {
          return Promise.all(
            cacheNames.filter(function(cacheName) {
              return cacheName.startsWith('wittr-') &&
                     !allCaches.includes(cacheName);
            }).map(function(cacheName) {
              return caches.delete(cacheName);
            })
          );
        })
      );
    });

    'activate' event is the place to clean the old version cahce but keep the current version cache and photo cache.

    In 'fetch' event, this is the place we want to cache the photos.

    For each request, we want to check, 

    • whether we have the cache for the photo request?
    • if not, fetch from network and cache it.
    self.addEventListener('fetch', function(event) {
      var requestUrl = new URL(event.request.url);
    
      // make sure the same origin
      if (requestUrl.origin === location.origin) {
        // serve cache with the skeleton
        if (requestUrl.pathname === '/') {
          event.respondWith(caches.match('/skeleton'));
          return;
        }
        // cache the photo
        if (requestUrl.pathname.startsWith('/photos/')) {
          event.respondWith(servePhoto(event.request));
          return;
        }
      }
    
      // cache the assets
      event.respondWith(
        caches.match(event.request).then(function(response) {
          return response || fetch(event.request);
        })
      );
    });

    The servePhoto(): 

    we want to make sure two things:

    • we don't care the photo size, 800px,200px or 40px
    • because respond object can be only access once, so we need clone() the original one and use clone one for the cahce, return the original one to the browser.
    function servePhoto(request) {
      var storageUrl = request.url.replace(/-d+px.jpg$/, '');
    
      return caches.open(contentImgsCache).then(function(cache) {
        return cache.match(storageUrl).then(function(response) {
          if (response) return response;
    
          return fetch(request).then(function(networkResponse) {
            cache.put(storageUrl, networkResponse.clone());
            return networkResponse;
          });
        });
      });
    }

    So first, remove those px info: (/photos/awefaef-af23-fwq23f-800px.jpg) --> (/photos/awefaef-af23-fwq23f)

    var storageUrl = request.url.replace(/-d+px.jpg$/, '');

    Second, clone the network response and return origial one to browser and clone one to cache

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

    Unitl now, we are able to cache the photo, event in the offline mode, we are still able to see the photos return from the cache.

  • 相关阅读:
    可扩展性的四个维度
    系统的可伸缩性
    Spring.factories扩展机制
    Java扩展方法之SPI
    2019第16周日
    影响圈和关注圈
    看张溪梦讲座的一点想法:制造数据反馈
    何为重构
    贾扬清:我对人工智能方向的一点浅见
    python类和实例以及__call__/__del__
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5516088.html
Copyright © 2011-2022 走看看