title: Next-Pwa not working on production server such as Nginx
body: <p>I am working based on Next.js example app like below link</p>
  <p><a href="https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app" rel="nofollow noreferrer">https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app</a></p>
  <p>and here is my <code>next.config.js</code></p>
  <pre><code>const withPWA = require('next-pwa')
  const runtimeCaching = require('next-pwa/cache')
  
  module.exports = withPWA({
      pwa: {
          dest: 'public',
          register: true,
          runtimeCaching,
      }
  })
  </code></pre>
  <p>and here is the <code>manifest.json</code></p>
  <pre><code>{
    &quot;name&quot;: &quot;nex-pwa&quot;,
    &quot;short_name&quot;: &quot;app&quot;,
    &quot;display&quot;: &quot;fullscreen&quot;,
    &quot;orientation&quot;: &quot;portrait&quot;,
    &quot;theme_color&quot;: &quot;#3056de&quot;,
    &quot;background_color&quot;: &quot;#3056de&quot;,
    &quot;scope&quot;: &quot;/&quot;,
    &quot;start_url&quot;: &quot;/&quot;,
    &quot;icons&quot;: [
      {
        &quot;src&quot;: &quot;/icons/android-chrome-192x192.png&quot;,
        &quot;sizes&quot;: &quot;192x192&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      },
      {
        &quot;src&quot;: &quot;/icons/icon-512x512.png&quot;,
        &quot;sizes&quot;: &quot;512x512&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      },
      {
        &quot;src&quot;: &quot;/icons/homescreen48.png&quot;,
        &quot;sizes&quot;: &quot;48x48&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      }, {
        &quot;src&quot;: &quot;/icons/homescreen72.png&quot;,
        &quot;sizes&quot;: &quot;72x72&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      }, {
        &quot;src&quot;: &quot;/icons/homescreen96.png&quot;,
        &quot;sizes&quot;: &quot;96x96&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      }, {
        &quot;src&quot;: &quot;/icons/homescreen144.png&quot;,
        &quot;sizes&quot;: &quot;144x144&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      }
    ],
    &quot;splash_pages&quot;: null
  }
  </code></pre>
  <p>and there is Nginx <code>server</code> file</p>
  <pre><code>server 
  {
      root /var/www/domain.com/html/pwa;
  
      server_name domain.com www.domain.com;
  
      error_log /var/www/domain.com/html/pwa/log/error.log;
  
      location ~/images(.*$) { 
          proxy_pass http://localhost:3035/images$1; 
          proxy_redirect off; 
      }
  
      location ~/fonts(.*$) { 
          proxy_pass http://localhost:3035/fonts$1; 
          proxy_redirect off; 
      }
  
      location ~/icons(.*$) { 
          proxy_pass http://localhost:3035/icons$1; 
          proxy_redirect off; 
      }
  
      location ~/sw.js(.*$) { 
          proxy_pass http://localhost:3035/sw.js$1; 
          proxy_redirect off; 
      }
  
      location ~/workbox-c2b5e142.js(.*$) { 
          proxy_pass http://localhost:3035/workbox-c2b5e142.js$1; 
          proxy_redirect off; 
      }
  
      location ~/_next(.*)$ {
          proxy_pass http://localhost:3035/_next$1;
          proxy_redirect off;
      }
  
      location / {
          proxy_pass http://localhost:3035;
          proxy_redirect off;
      }
  
      location ~ /\.ht {
          deny all;
      }
  }
  </code></pre>
  <p>It is working on the development on local dev server but when I deploy to production like DigitalOcean with nginx it's not working anymore, I mean web app working but Installing Icon not showing on the browser.</p>
  <p>What I have done wrong here, please.</p>
  <p>Thanks</p>