reactjs - React PWA Service Worker works locally, but not when hosted on Netlify

Question

I'm trying to learn more about PWA Service Workers and wanted to implement that feature on this personal project site I'm working on. When I run Google's Lighthouse on Localhost the start_url passes and responds with a 200 offline and registers a service worker.

However, when I push the changes to Github which I'm hosting on Netlify and run the same Lighthouse test, I get: start_url does not respond with a 200 when offline. Timed out waiting for start_url to respond. Does not register a service worker that controls page.

This is the script I have in the index.html:

 <!-- PWA SERVICE WORKER SCRIPT -->
  <script>
    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.');
    }
  </script>

Here is my manifest.json:

{
  "short_name": "Arc-teryx",
  "name": "Arc-teryx using Contentful/Graphql",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Here is my worker.js file in public folder:

let CACHE_NAME = "Arc-teryx";
let urlsToCache = ["/", "/completed"];

// Install a service worker
self.addEventListener("install", (event) => {
  // 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) => {
  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) => {
  let cacheWhitelist = ["Arc-teryx"];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Can anyone see what I may be doing incorrectly and point me in the right direction for a fix?

Link to the Repo

Netlify link: Project

Thank you!

Answer 1

Amazing how I've been trying to figure this out for awhile and as soon as I post it, I figured it out 30min later.

Anyways, if this helps anyone else out there who might be having a similar issue, this was my fix.

I changed the let urlsToCache = ["/", "/completed"]; to let urlsToCache = ["/"] in the worker.js file and the "start_url": "." to "start_url": "/" in the manifest.json