title: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script
body: <p>I am creating a progressive web application (pwa) and try to register service worker to test offline feature. The folder structure is like below:</p>
  
  <pre><code>-- views 
     -- index.pug
  -- sw.js
  -- public
     -- js
        -- main.js
  -- index.js
  </code></pre>
  
  <p>index.js file is server file, main.js is the file that being link in each .pug file. I embedded the service worker register code in, the code is like following </p>
  
  <pre><code>if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
          navigator.serviceWorker.register('./sw.js').then(function(registration) {
              // Registration was successful
              console.log('Service Worker registration successful with scope: ', registration.scope);
  
              // console.log('Service Worker registration successful with scope: ', registration.scope);
          }, function(err) {
              // registration failed :(
              console.log('ServiceWorker registration failed: ', err);
          });
      });
  }
  </code></pre>
  
  <p>The 404 error keeps pop up in localhost also the deployed URL which I have no clue why, how to solve this?</p>
  
  <pre><code>ServiceWorker registration failed:  TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
  </code></pre>
  
  <p>Thanks</p>
  
  <p>Solutions (UPDATE) - </p>
  
  <p>Include <code>app.use('/', routes)</code> ,or wherever the service-worker file at into index.js file. </p>