title: React PWA not installable
body: <p>I'm making an app with React and I wanted to turn it into a PWA, so I've followed <a href="https://karannagupta.com/using-custom-workbox-service-workers-with-create-react-app/" rel="nofollow noreferrer">this tutorial</a> to add my own caching rules. The service worker works and the template looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>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 }) =&gt; url.origin === "https://www.instagram.com",
        workbox.strategies.cacheFirst({
          cacheName: 'instagram',
          plugins: [
            new workbox.expiration.Plugin({ maxAgeSeconds: 24 * 60 * 60 }),
          ],
        })
      );
    }
  }
  
  run();
  </code></pre>
  
  <p>The SW works and it caches what it's supposed to. The manifest is passing, the <code>start_url</code> field is the same as the subfolder I'm hosting the React App in, but I still get the error</p>
  
  <blockquote>
    <p>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:</p>
  </blockquote>
  
  <pre><code>{
    "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"
  }
  </code></pre>
  
  <p>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?</p>