I was trying out the [firebase nextjs codelab](https://firebase.google.com/codelabs/firebase-nextjs?authuser=1#5), and they use service worker to intercept request and add headers. But they pass firebase config via URL query params, and use esbuild to bundle the service worker file.

Tools I came acorss with:
- workbox
- next-pwa
- serwist

All of them have some flaws, mainly related to development and maintainence.


I would rather just prefer to make my own simple solution. I want to achieve two things:
1. Have the service worker file as part of src/ , and be able to use all imports like a normal file. (specifically process.env)
2. Have it compiled, with its tree-shaken dependencies to public/.

I tried all three major LLMs, but none of them gave the correct output.

This [copy plugin](https://webpack.js.org/plugins/copy-webpack-plugin/) seems useful, but I use typescript, so unable to use it directly.

There's another [discussion](https://github.com/vercel/next.js/discussions/46158) but it's not answered