I’ve been trying to build a functional PWA with a service worker that serves an Offline page. The page though shouldn’t be directly accessible if I go to localhost:3000/offline. Otherwise, it should become a 404 error.

I’ve spent hours looking for an up-to-date tutorial as well as fighting with AI. There wound up being too many videos that are months to years old. ChatGPT and Claude consistently looped with the same wrong solutions. Gemini did get me far with something working, and then it went totally south.

There were also packages like serwist that could’ve helped me do this, but either they don’t work with Turbopack, are poorly maintained, or offline functionality never works.

Does anybody know of a basic up-to-date service worker setup that would allow me to use an Offline page? So far, I have:

- workbox-build as my only package
- A SW generator script that caches /, /offline, and my assets
- Another script that does the install, active, and fetch events
- A component that does the SW registration
- The Offline page itself under src/app/offline