title: Fetch() request immediately failing in service worker running through Android Webview
body: <p>I have a service worker that I use to enable an offline version of my website. This works great. I also have an Android app that is basically just a wrapper around a webview that loads my website. </p>
  
  <p>All was fine and dandy until about 2-3 weeks ago when the Fetch() request started immediately failing. It is only failing when running through the Android webview. Running through a browser works fine. If the resource is cached already (i.e. via the install event) then it works great, it's only when I get a page that is not cached.</p>
  
  <p>The code in my service worker:</p>
  
  <pre><code>self.addEventListener("fetch", function (event) {
  
  if (event.request.method !== 'GET'
      || event.request.url.toLowerCase().indexOf('//ws') &gt; -1
      || event.request.url.toLowerCase().indexOf('localws') &gt; -1) {
      // Don't intercept requests made to the web service
      // If we don't block the event as shown below, then the request will go to
      // the network as usual.
  
      return;
  }
  
  
  event.respondWith(async function () {
      // override the default behavior
  
      var oCache = await caches.open('cp_' + version);
      var cached = await oCache.match(event.request.url);
  
      if (cached &amp;&amp; cached.status &lt; 300) {
          return cached;
      }
  
      // Need to make a call to the network
      try {
          var oResp = await fetch(event.request); // THIS LINE CAUSES THE PROBLEM!!!
          return oResp;
      } catch (oError) {
          console.log('SW WORKER: fetch request to network failed.', event.request);
  
  
          return new Response('&lt;h1&gt;Offline_sw.js: An error has occured. Please try again.&lt;/h1&gt;&lt;br&gt;&lt;h2&gt;Could not load URL: ' + event.request.url + '&lt;/h2&gt;', {
              status: 503,
              statusText: 'Service Unavailable',
              headers: new Headers({
                  'Content-Type': 'text/html'
              })
          });
      }  
  }()); // event.respondwith
  }); // fetch
  </code></pre>
  
  <p>The line:  </p>
  
  <blockquote>
    <p>var oResp = await fetch(event.request);</p>
  </blockquote>
  
  <p>is called once I've determined it is not cached and seems to be the culprit. When it errors out I get the following error in my catch(): 'Failed to fetch'</p>
  
  <p><a href="https://i.stack.imgur.com/bcZzR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bcZzR.png" alt="Fetch Error Message"></a></p>
  
  <p>This seems pretty generic and not helpful. Again, this works when going through a browser and so I know it's not a CORS issue, service worker in the wrong directory, etc. Again, it worked until about 3 weeks ago and now I'm getting reports from customers that it's not working. </p>
  
  <p>Here's a screen shot of the actual event.request that I'm sending off:</p>
  
  <p><a href="https://i.stack.imgur.com/5zLOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5zLOC.png" alt="event.request object"></a></p>
  
  <p>In the chrome developer tools (used to debug the webview) I see the following:</p>
  
  <p><a href="https://i.stack.imgur.com/U7pSh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U7pSh.png" alt="Dev Tools Screen SHot"></a></p>
  
  <p>Am I doing something wrong or is this a bug in the webview / chrome that was released recently? (I say that as chrome powers the webview)</p>