title: Service Worker: cache.match(request) returns undefined
body: <p>I have a simple service worker, that adds two resources (index.html, app.js) to the cache (on install), deletes old caches (on activate) and serves the resources from cache if present, else from the network (on fetch). To get the new service worker registered and to delete old caches I increase the version number in CACHE_NAME with each version of new resources:</p>
  
  <pre><code>var CACHE_NAME = 'test-cache-v4';
  var urlsToCache = ['./','./app.js'];
  
  self.addEventListener('install', function (event) {
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function (cache) {
          console.log('Opened cache');
          return cache.addAll(urlsToCache);
        })
    );
    return self.skipWaiting();
  });
  
  self.addEventListener('activate', function(event) {
    event.waitUntil(
      caches.keys().then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (key !== CACHE_NAME) {
            return caches.delete(key);
          }
        }));
      }) 
    );
  });
  
  self.addEventListener('fetch', function(event) {
    event.respondWith(
      caches.open(CACHE_NAME).then(function(cache){
        return cache.match(event.request)
          .then(function(response) {
            if (response) {
            console.log('SERVED FROM CACHE');
              return response;
            }
            return fetch(event.request).then(function(response){
                console.log('Response from network is:', response);
                return response;
            });
          }
        )
      })
    );
  });
  </code></pre>
  
  <p>On my localhost the service worker works perfectly fine.</p>
  
  <p>But on the server the response/promise returned by</p>
  
  <pre><code>return cache.match(event.request)
  </code></pre>
  
  <p>is always <strong>undefined</strong>. As a result the resources are never served from cache but always from network.</p>
  
  <p>This happens even though in Chrome's dev tools "Application" tab I can see that registration of the new service worker works fine and "Cache Storage" gets filled with my new cache resources (request URLs to index.html and app.js). I also think that I have handled the web server config tweaks correctly with Cache-Control no-cache. </p>
  
  <p>If I change</p>
  
  <pre><code>return cache.match(event.request)
  </code></pre>
  
  <p>to</p>
  
  <pre><code>return cache.match(event.request.url)
  </code></pre>
  
  <p>the service worker also works on the server.</p>
  
  <p>However, I would like to understand why the syntax that seems right to me and is used in all the examples I can find does not work on the server.</p>
  
  <p>One difference is that I access localhost directly and the server over https. </p>
  
  <p>EDIT: Another difference is that resources from the server are compressed (Header => content-encoding:gzip).</p>
  
  <p>Could it be linked to one of these differences?</p>
  
  <p>Any ideas are greatly appreciated!</p>