title: I am unable to register service worker for PWA
body: <ul>
  <li>I am trying to register PWA for my react app. I am unable to do so.</li>
  <li>Framework I have used is react framework to develop the app.</li>
  <li>I followed the step mentioned in a blog but it is not responding when I perform lighthouse from the dev tools.</li>
  <li>Here is my "index.js" file, I have enabled the service worker to register().</li>
  </ul>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  
  // If you want your app to work offline and load faster, you can change
  // unregister() to register() below. Note this comes with some pitfalls.
  // Currently the app will not work  in offline we need to setup service workers for that
  serviceWorker.register();
  
  </code></pre>
  
  <ul>
  <li>I have also added the service worker in index.html, here is the code.</li>
  </ul>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json"&gt;
      &lt;!-- Compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;title&gt;SS-RPA&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
        body {
          margin: 0;
          padding: 0;
          font-family: sans-serif;
        }
        .navbar {
          background-color: #4169e1;
        }
        .navbar h3 {
          display: inline-block;
          text-align: left;
          padding: 10px;
          color: black;
          text-decoration: none;
        }
        .navbar a {
          display: inline-block;
          padding: 10px;
          color: #fff;
          text-decoration: none;
        }
        .page-info {
          padding: 10px;
        }
        .Current {
          color: #2e8b57;
        }
        .Completed {
          color: #ff6347;
          text-decoration: line-through;
        }
      &lt;/style&gt;
  
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;
        You need to enable JavaScript to run this app.
      &lt;/noscript&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
  
      &lt;script&gt;
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', function() {
            navigator.serviceWorker.register('/worker.js').then(function(registration) {
              console.log('Worker registration successful', registration.scope);
            }, function(err) {
              console.log('Worker registration failed', err);
            }).catch(function(err) {
              console.log(err);
            });
          });
        } else {
          console.log('Service Worker is not supported by browser.');
        }
      &lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <ul>
  <li>And I have also added the worker.js file in my public directory where index.html and manifest.json resides.</li>
  </ul>
  
  <pre><code>worker.js 
  
  var CACHE_NAME = 'ss-rpa';
  var urlsToCache = [
    '/',
    '/completed'
  ];
  
  // Install a service worker
  self.addEventListener('install', event =&gt; {
    // Perform install steps
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function(cache) {
          console.log('Opened cache');
          return cache.addAll(urlsToCache);
        })
    );
  });
  
  // Cache and return requests
  self.addEventListener('fetch', event =&gt; {
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          // Cache hit - return response
          if (response) {
            return response;
          }
          return fetch(event.request);
        }
      )
    );
  });
  
  // Update a service worker
  self.addEventListener('activate', event =&gt; {
    var cacheWhitelist = ['pwa-task-manager'];
    event.waitUntil(
      caches.keys().then(cacheNames =&gt; {
        return Promise.all(
          cacheNames.map(cacheName =&gt; {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });
  
  </code></pre>
  
  <ul>
  <li>I don't know whether I have not imported everything well or I am missing out anything.</li>
  <li><p>Here is the output of the dev tools Lighthouse
  <a href="https://i.stack.imgur.com/yYCMZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yYCMZ.png" alt="enter image description here"></a></p></li>
  <li><p>Thanks !!!</p></li>
  </ul>