Caching a WordPress blog's home page?

Forgive me if this isn't the right place for this, but I can't find any documentation on this anywhere. I'm trying to add PWA functionality to my WordPress theme, and running in to issues understanding how to do the Service Worker side of things. I keep getting an error in Lighthouse "Failures: Manifest start_url is not cached by a Service Worker." and I'm not sure why.

My service worker is at /wp-content/themes/framework/assets/scripts/service-worker.js. The content is as follows:

// no service worker for previews
self.addEventListener("fetch", (event) => {
    if (event.request.url.match(/preview=true/)) {
        return;
    }
});

toolbox.precache(["/", "../styles/modern.css"]);
toolbox.router.get("../media/*", toolbox.cacheFirst);
toolbox.router.get("/wp-content/uploads/**/*", toolbox.cacheFirst);
toolbox.router.get("/**/*", toolbox.networkFirst, {NetworkTimeoutSeconds: 5});

My manifest is at /wp-content/themes/framework/manifest.json. The contents:

{
  "short_name": "new-site",
  "name": "new-site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#17AAEC",
  "theme_color": "#17AAEC",
  "icons": [
    {
      "src": "assets/media/logo-pwa-small.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/media/logo-pwa-medium.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/media/logo-pwa-large.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "assets/media/logo-pwa-splash.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

As you can see, I have my start_url set to /, and I have / also included in the service worker's precache. What am I doing wrong?

GoogleChromeLabs / sw-toolbox

Caching a WordPress blog's home page? #258