title: Service Worker not registering on gh-pages hosted website
body: <p>The service worker is registered and works fine on the vscode localhost but not on the gh-pages hosted site.</p>
  
  <p>Screenshot of localhost sw.</p>
  
  <p><a href="https://i.stack.imgur.com/mwBeJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mwBeJ.png" alt="screenshot of localhhost sw"></a></p>
  
  <p><a href="https://i.stack.imgur.com/nmCS4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nmCS4.png" alt="screenshot of gh-pages sw"></a></p>
  
  <p>As you can see the sw opens the cache but then fails to register with a type error in promise. While sometimes the sw not even opens the cache and fails.</p>
  
  <p>Below is my snippet to install and update the service worker.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var CACHE_NAME = 'dev';
  var urlsToCache = [
    '/',
    '/styles/style.css',
  ];
  
  
  // Installing a sevice worker and defining files to be cached. 
  self.addEventListener('install', function(event) {
    // Perform install steps
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function(cache) {
          console.log('Opened cache');
          return cache.addAll(urlsToCache);
        })
    );
  });
  
  
  // Updating the service worker.
  self.addEventListener('fetch', function(event) {
      event.respondWith(
        caches.match(event.request)
          .then(function(response) {
            // Cache hit - return response
            if (response) {
              return response;
            }
    
            // IMPORTANT: Clone the request. A request is a stream and
            // can only be consumed once. Since we are consuming this
            // once by cache and once by the browser for fetch, we need
            // to clone the response.
            var fetchRequest = event.request.clone();
    
            return fetch(fetchRequest).then(
              function(response) {
                // Check if we received a valid response
                if(!response || response.status !== 200 || response.type !== 'basic') {
                  return response;
                }
    
                // IMPORTANT: Clone the response. A response is a stream
                // and because we want the browser to consume the response
                // as well as the cache consuming the response, we need
                // to clone it so we have two streams.
                var responseToCache = response.clone();
    
                caches.open(CACHE_NAME)
                  .then(function(cache) {
                    cache.put(event.request, responseToCache);
                  });
    
                return response;
              }
            );
          })
        );
    });
  
  
  Below is my snippet to register the service worker.</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!-- Service worker --&gt;
      &lt;script&gt;
          if('serviceWorker' in navigator) {
            navigator.serviceWorker
                  .register('sw.js')
                  .then(function() { console.log("Service Worker Registered"); });
          }
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>