title: ServiceWorker blocks any external resource
body: <p>I've implemented <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" rel="nofollow noreferrer">ServiceWorker</a> on some of my webapps to leverage offline capabilities and some other goodies related to the ServiceWorkers. Now, everything is working fine until I have added some external embedded scripts. There are about 3 external scripts that I've added on my webapp. Some of which fetch ads and display it on my app and some of which are used to gather analytics.</p>
  
  <p>But, to my surprise, every external scripts are failing when the ServiceWorkers are enabled and throws below error in the console </p>
  
  <p><a href="https://i.stack.imgur.com/UF62R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UF62R.png" alt="enter image description here"></a></p>
  
  <p>I'm not sure why is this happening? Do I have to cache these scripts some way in ServiceWorker? Any help would be appreciated.</p>
  
  <p>Here is my ServiceWorker code that I've added on my app.</p>
  
  <pre><code>importScripts('js/cache-polyfill.js');
  
  var CACHE_VERSION = 'app-v18';
  var CACHE_FILES = [
      '/',
      'index.html',
      'js/app.js',
      'js/jquery.min.js',
      'js/bootstrap.min.js',
      'css/bootstrap.min.css',
      'css/style.css',
      'favicon.ico',
      'manifest.json',
      'img/icon-48.png',
      'img/icon-96.png',
      'img/icon-144.png',
      'img/icon-196.png'
  ];
  
  self.addEventListener('install', function (event) {
      event.waitUntil(
          caches.open(CACHE_VERSION)
              .then(function (cache) {
                  console.log('Opened cache');
                  return cache.addAll(CACHE_FILES);
              })
      );
  });
  
  self.addEventListener('fetch', function (event) {
      event.respondWith(
          caches.match(event.request).then(function(res){
              if(res){
                  return res;
              }
              requestBackend(event);
          })
      )
  });
  
  function requestBackend(event){
      var url = event.request.clone();
      return fetch(url).then(function(res){
          //if not a valid response send the error
          if(!res || res.status !== 200 || res.type !== 'basic'){
              return res;
          }
  
          var response = res.clone();
  
          caches.open(CACHE_VERSION).then(function(cache){
              cache.put(event.request, response);
          });
  
          return res;
      })
  }
  
  self.addEventListener('activate', function (event) {
      event.waitUntil(
          caches.keys().then(function(keys){
              return Promise.all(keys.map(function(key, i){
                  if(key !== CACHE_VERSION){
                      return caches.delete(keys[i]);
                  }
              }))
          })
      )
  });
  </code></pre>