[PWA] 7. First Cache when installed

时间：2016-05-16 21:50:43 阅读：870 评论：0 收藏：0 [点我收藏+]

标签：

If you want your application works offline or lie-wifi. You need to use cache.

API:

Create Caches:

caches.open(‘cache_name‘).then( (cache) => {
    // create name if not exists yet, return cache if there is a one
})

Create single cache:

cache.put(request, response);

cache.addAll([
  ‘/foo‘,
  ‘/bar‘
])

Get the cache:

cache.match(request)

caches.match(request)

When to start cache:

We can do cache in ‘installing‘ service worker, what it will do is fetch everything we need from network and create cache for each of them.

技术分享

self.addEventListener(‘install‘, function(event) {
  var urlsToCache = [
    ‘/‘,
    ‘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‘
  ];

  event.waitUntil(
    // TODO: open a cache named ‘wittr-static-v1‘
    // Add cache the urls from urlsToCache
      caches.open(‘wittr-static-v1‘)
          .then( (cache) => {
              cache.addAll(urlsToCache)
          })
          .catch( () => {
              console.error("Cannot cache anything");
          })
  );
});

Now we have create the cache, but it is not useful until we use the cache.

To use cache, we can do:

self.addEventListener(‘install‘, function(event) {
  var urlsToCache = [
    ‘/‘,
    ‘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‘
  ];

  event.waitUntil(
    // TODO: open a cache named ‘wittr-static-v1‘
    // Add cache the urls from urlsToCache
      caches.open(‘wittr-static-v4‘)
          .then( (cache) => {
              cache.addAll(urlsToCache)
          })
          .catch( () => {
              console.error("Cannot cache anything");
          })
  );
});

self.addEventListener(‘fetch‘, function(event) {
    event.respondWith(
        caches.match(event.request).then((response)=>{
            if(response){
                return response;
            }else{
                return fetch(event.request);
            }
        })
    )
});