Why Is Web Development So Hard in 2024?

I just need this web app to work offline.

The app is finished. It's already deployed as a PWA using vite-pwa-nuxt. I enabled 'generateSW' to generate a service worker that should cache everything - assets, routes, etc. Why won't it work offline?

I'm in the docs. The example repos are old. Ah, this is a version 0.7.0 - super. Surely this is a common use case and should be easy to figure out.

Chrome shows the service worker is crashing on line 1:

if (!self.define) {

Great. What do I even do with that?

Ok, let's check out the network. When it's online, everything is fetched from the service worker cache. Except, there's an error:

Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]

So my root route is not being cached? How is that possible? I guess I need to dive into the cache.

Whelp, this is super confusing. All routes are supposed to be cached by the Nuxt module. Do I need to specify them individually, or do a fallback or something? I guess I need to read the Workbox docs.

I regret that. Workbox was made by Google, and yet I have no idea what I'm reading everytime I go to that package.

Ok. Let's go back to first principles. The service worker cannot find the file at "/". So, let's see what's there.

Ah, the assets are javascript and css files. This makes sense, since ssr was set to false initially when the goal was to deploy the app to the iOS store using Capacitor. Maybe the module cannot detect what to pre-cache in a SPA?

Well, let's try this:

nuxt.config.ts

ssr: true;

Nothing is really different, except now I'm getting hydration errors. Great. Don't get distracted.

Dive back into the Nuxt docs. SSG is the default rendering mode for static site deployments. Azure static web apps are static. Azure is a zero-config deployment preset. Therefore, surely my app is being deployed that way, right?

Well, let's try this:

nuxt.config.ts

nitro: {
  preset: "azure";
}

Nope, that doesn't work either. Maybe Github actions has a clue?

1000 error messages from Github actions. The new eslint v9 package version is incompatible with everything. Also, Azure is using Node 16, which throws warnings for no longer being compatible with Nuxt builds. Super. Ok, let's check out the build.

There're no HTML files here. This is still being built as an SPA.

Let me try it locally.

npm run build

It builds an SPA. Because, of course it does, I just told it to.

npm run generate

HTML! Ok. Just make this change:

package.json

"scripts": {
    "build": "npm run generate"
}

8 hours later. My PWA works offline.