title: Handling fetch requests in Progressive Web App when offline
body: <p>I have been following <a href="https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/" rel="nofollow noreferrer">this tutorial</a> on Progressive Web Apps and I am trying to find a way to present the user with some sort of message when the app is offline. My code so far is pretty much the same as the tutorial:</p>
  
  <pre>
  var cacheName = 'demoPWA-v1';
  var filesToCache = [
      '/',
      '/index.html',
      '/js/app.js',
      '/icons/pwa-256x256.png'
  ];
  
  self.addEventListener('install', function(e) {
      console.log('[demoPWA - ServiceWorker] Install event fired.');
      e.waitUntil(
          caches.open(cacheName).then(function(cache) {
              console.log('[demoPWA - ServiceWorker] Caching app shell...');
              return cache.addAll(filesToCache);
          })
      );
  });
  
  self.addEventListener('activate', function(e) {
      console.log('[demoPWA - ServiceWorker] Activate event fired.');
      e.waitUntil(
          caches.keys().then(function(keyList) {
              return Promise.all(keyList.map(function(key) {
                  if (key !== cacheName) {
                      console.log('[demoPWA - ServiceWorker] Removing old cache...', key);
                      return caches.delete(key);
                  }
              }));
          })
      );
      return self.clients.claim();
  });
  
  self.addEventListener('fetch', function(e) {
      console.log('[demoPWA - ServiceWorker] Fetch event fired.', e.request.url);
      e.respondWith(
          caches.match(e.request).then(function(response) {
              if (response) {
                  console.log('[demoPWA - ServiceWorker] Retrieving from cache...');
                  return response;
              }
              console.log('[demoPWA - ServiceWorker] Retrieving from URL...');
              return fetch(e.request);
          })
      );
  });
  </pre>
  
  <p>When I check the <em>Offline</em> checkbox in Chrome under <code>Application &gt; Service Workers</code>, I get a couple of errors, like you can see below:</p>
  
  <p><a href="https://i.stack.imgur.com/lyMMp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lyMMp.png" alt="enter image description here"></a></p>
  
  <p>I wonder if there is some way to deal with this errors and, while doing so, show a message of some sort to the user, informing them of the fact that they are offline.</p>