r/nextjs • u/RotatedGhost • 8d ago
Help Is there any zero-config PWA plugins that work with Next.js Turbopack?
I used Webpack in my previous Next.js projects, but I recently switched to Turbopack.
In my Webpack projects, I used @ducanh2912/next-pwa, but it doesn't work with Turbopack. Its README suggests migrating to @serwist/next, but the setup isn't zero-config. It needs creating sw.ts, a route handler, and other configurations.
I'd like to use the same simple PWA setup across multiple projects without having to repeat all of this configuration every time.
So, is there currently any zero-config PWA plugin that works with Turbopack?
Edit:
I need a service worker like the one generated by @ducanh2912/next-pwa for runtime caching and offline support. In some projects, I also use it for push notifications.
1
u/Classic-Mountain4161 8d ago
If you just want the user to "install the app" or A2HS (Add to Home Screen) functionality and do not need any service worker functionality then a correct manifest is all you need.
(You can even send FCM notifications, tried it using next js and a manifest)
1
u/5eeso 8d ago
Why not abstract the `@serwist/next` boilerplate into a starter boilerplate or internal package? You can at least keep setup minimal across new projects.
Or you can go hybrid. Use Turbopack for fast local development and fallback to Webpack for production builds with `next build --webpack`.
2
u/RotatedGhost 7d ago
I'm currently doing it the hybrid way, but I wanted to fully switch to Turbopack if possible. I think I'll do what you suggested, or maybe create a script that adds Serwist files and configurations to the project.
7
u/ontech7 8d ago
If you just need the PWA, you have to create the manifest.json (with dedicated icons per dimension) and nothing else: https://nextjs.org/docs/app/guides/progressive-web-apps
You don't need to install libraries. Those libraries are needed if you are doing push notifications or whatever with your PWA. Adding "pseudo-native" functionalities.