18-quiz-cache-response.md

03.18: QUIZ: CACHE RESPONSE

First get the project into the sample state by using the following commands:

$ git reset --hard
$ git checkout task-cache-response

Once the task is complete, enter the Task ID: cache-served

CODING TASK

Take a look at the code located in public/js/sw/index.js. Your task is to respond to a fetch event with an entry from the cache if there is one and if there isn't, fetch it from the network.

SOLUTION

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('wittr-static-v1')
      .then(function(cache) {
        return cache.addAll([
          '/',
          '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'
        ]);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request);
      })
  );
});

---

Next: Updating the Static Cache