[PWA] 17. Cache the photo

时间：2016-05-22 06:18:21 阅读：340 评论：0 收藏：0 [点我收藏+]

标签：

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.

[PWA] 17. Cache the photo

标签：

原文地址：http://www.cnblogs.com/Answer1215/p/5516088.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行