title: Modifying responses in service worker requests to be an image
body: <p>Hello and thank you in advance.</p>
  
  <p>My question is about responding to a network request using <strong><em>ServiceWorker</em></strong>. I am able to handle it in case of a text or html, but when I am trying to deal with an <strong><em>image</em></strong> I am failing, here is the code I have:</p>
  
  <pre><code>self.addEventListener('fetch', function(event){
  event.respondWith(
      fetch(event.request).then(function(response){
          if(response.status === 404){
              return new Response('The page wasn\'t found');
          }
          return response;  
       }).catch(function(){
              return new Response('The network is totally failed');
       })
      );
   });
  </code></pre>
  
  <p>The snippet above is working when dealing with text and html but when I am trying with an <strong><em>image</em></strong> it brings a totally black screen. Here what I used but it didn't work.</p>
  
  <pre><code>self.addEventListener('fetch', function(event){
  event.respondWith(
      fetch(event.request).then(function(response){
          if(response.status === 404){
              return new Response('/imgs/sunset.gif', {headers:{'Content-Type':'image/gif'}});
          }
          return response;  
       }).catch(function(){
              return new Response('The network is totally failed');
       })
      );
   });
  </code></pre>
  
  <p>Hopefully you can help me in knowing what I am missing. thanks.</p>