title: Ignore ajax requests in service worker
body: <p>I have an app with a basic 'shell' of HTML, CSS and JS. The main content of the page is loaded via multiple ajax calls to an API that is at another URL to the one my app is running on. I have set up a service-worker to cache the main 'shell' of the application:</p>
  
  <pre><code>var urlsToCache = [
    '/',
    'styles/main.css',
    'scripts/app.js',
    'scripts/apiService.js',
    'third_party/handlebars.min.js',
    'third_party/handlebars-intl.min.js'
  ];
  </code></pre>
  
  <p>and to respond with the cached version when requested. The problem I am having is that the response of my ajax calls are also being cached. I'm pretty sure that I need to add some code to the <code>fetch</code> event of the service-worker that always get them from the network rather than looking in the cache.</p>
  
  <p>Here is my <code>fetch</code> event:</p>
  
  <pre><code>self.addEventListener('fetch', function (event) {
      // ignore anything other than GET requests
      var request = event.request;
      if (request.method !== 'GET') {
          event.respondWith(fetch(request));
          return;
      }
  
      // handle other requests
      event.respondWith(
          caches.open(CACHE_NAME).then(function (cache) {
              return cache.match(event.request).then(function (response) {
                  return response || fetch(event.request).then(function (response) {
                      cache.put(event.request, response.clone());
                      return response;
                  });
              });
          })
      );
  });
  </code></pre>
  
  <p>I'm not sure how I can ignore the requests to the API. I've tried doing this:</p>
  
  <pre><code>if (request.url.indexOf(myAPIUrl !== -1) {
    event.respondWith(fetch(request));
    return;
  }
  </code></pre>
  
  <p>but according to the network tab in Chrome Dev Tools, all of these responses are still coming from the service-worker.</p>