title: Uncaught (in promise) TypeError: Failed to fetch Nextjs PWA using next-pwa in Chrome
body: <p>Hi  I was working on a Nextjs proyect and i try to convert it to a PWA using next-pwa, first i created the next.config.js</p>
  <pre><code>const withPWA = require('next-pwa');
  
  module.exports = withPWA({
      pwa: {
          dest: 'public',
        }
  });
  </code></pre>
  <p>then created the manifest.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;PRONTO APP&quot;,
    &quot;short_name&quot;: &quot;PRONTO&quot;,
    &quot;icons&quot;: [
      {
        &quot;src&quot;: &quot;/icon.png&quot;,
        &quot;sizes&quot;: &quot;128x128&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      },
      {
        &quot;src&quot;: &quot;/icon-512x512.png&quot;,
        &quot;sizes&quot;: &quot;512x512&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      }
    ],
    &quot;theme_color&quot;: &quot;#FFFFFF&quot;,
    &quot;background_color&quot;: &quot;#FFFFFF&quot;,
    &quot;start_url&quot;: &quot;/&quot;,
    &quot;display&quot;: &quot;standalone&quot;,
    &quot;orientation&quot;: &quot;portrait&quot;
  }
  </code></pre>
  <p>And I add the meta data in de _document file in pages</p>
  <pre><code>import Document, { Html, Head, Main, NextScript } from &quot;next/document&quot;;
  
  class MyDocument extends Document {
      render() {
          return (
              &lt;Html&gt;
                  &lt;Head&gt;
                      &lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot; /&gt;
                      &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/icon.png&quot; /&gt;
                      &lt;meta name='theme-color' content=&quot;#fff&quot; /&gt;
                  &lt;/Head&gt;
                  &lt;body&gt;
                      &lt;Main /&gt;
                      &lt;NextScript /&gt;
                  &lt;/body&gt;
              &lt;/Html&gt;
          );
      };
  }
  
  export default MyDocument;
  </code></pre>
  <p>But when i run:</p>
  <pre><code>npm build dev 
  npm start 
  </code></pre>
  <p>in Google Chrome My PWA works fine but in console i get this error:
  in other browsers this error doesn't appear</p>
  <p><code>Uncaught (in promise) TypeError: Failed to fetch</code></p>
  <p>And I really dont know why, running the app in dev mod with npm run dev i get the following messages in chrome:</p>
  <pre><code>workbox Router is responding to: /
  workbox Network request for '/' threw an error. TypeError: Failed to fetch
  workbox Using NetworkOnly to respond to '/'
  Uncaught (in promise) TypeError: Failed to fetch
  </code></pre>
  <p>This is my public folder structure:</p>
  <pre><code>/public
  -/fonts
  -/images
  -favicon.ico
  -icon-512x512.png}
  -icon.png
  -manifest.json
  -sw.js
  </code></pre>
  <p>I was trying to do the same thing in this video.
  <a href="https://www.youtube.com/watch?v=8enp-acPbRE" rel="nofollow noreferrer">https://www.youtube.com/watch?v=8enp-acPbRE</a></p>
  <p>Can Anyone Help me plss</p>