React PWA not installable

Question

I'm making an app with React and I wanted to turn it into a PWA, so I've followed this tutorial to add my own caching rules. The service worker works and the template looks like this:

function run() {
  if ('function' === typeof importScripts) {
    importScripts(
      'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js'
    );

    /* Global workbox */
    if(!workbox) return;
    workbox.setConfig({ debug: false });

    /* Injection point for manifest files. */
    workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

    /* Custom cache rules */
    workbox.routing.registerRoute(
      ({ url }) => url.origin === "https://www.instagram.com",
      workbox.strategies.cacheFirst({
        cacheName: 'instagram',
        plugins: [
          new workbox.expiration.Plugin({ maxAgeSeconds: 24 * 60 * 60 }),
        ],
      })
    );
  }
}

run();

The SW works and it caches what it's supposed to. The manifest is passing, the start_url field is the same as the subfolder I'm hosting the React App in, but I still get the error

No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest. My manifest looks like this:

{
  "short_name": "ReactApp",
  "name": "My React App",
  "description": "blah blah blah",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/reactapp",
  "display": "standalone",
  "theme_color": "#7b1fa2",
  "background_color": "#7b1fa2"
}

As I've said, the service worker does its job perfectly, but the browser just doesn't seem to deem it installable. What could it be?

Answer 1

Turns out my manifest.json was missing a single character. After running lighthouse audits, I found out the service worker's scope was https://example.net/reactapp/ while the start_url was https://example.net/reactapp without a slash at the end. So all I did was change this:

{
  ...
  "start_url": "/reactapp",
  ...
}

...to this:

{
  ...
  "start_url": "/reactapp/",
  ...
}