@ducanh2912/next-pwa

Zero-config PWA plugin for Next.js

This plugin is powered by Workbox and other good stuff.

👋 Share your awesome PWA project 👉 here

Features

• 0️⃣ Zero-config for registering and generating service worker out of the box
• ✨ Optimized precaching and runtime caching
• 💯 Maximal Lighthouse score
• 🎈 Easy-to-understand examples
• 📴 Offline support with fallbacks (example)
• 📦 Uses Workbox and workbox-window v6
• 🍪 Works with cookies out of the box
• 🔉 Default range requests for audios and videos
• ☕ No custom server needed for Next.js 9+ (example)
• 🔧 Handle PWA lifecycle events (opt-in - example)
• 📐 Custom worker to run extra code with code splitting and Typescript support (example)
• 📜 Public environment variables are available in custom workers
• 🐞 Debug service worker in development mode without caching
• 🌏 Internationalization support (a.k.a i18n) with next-i18next (example)
• 🛠 Configurable by Workbox's options for GenerateSW and InjectManifest
• ⚡ Supports blitz.js (simply add blitz.config.js)
• 🚀 Spin up a GitPod and try out examples in rocket speed (or use create-next-app to create a brand new Next.js app with them (for example, run pnpm create next-app --example https://github.com/DuCanhGH/next-pwa/tree/master/examples/basic to create a new Next.js app using the basic example))

NOTE 1 - next-pwa version 2.0.0+ should only work with Next.js 9.1+, and static files should only be served through the public directory.

NOTE 2 - If you encounter the error TypeError: Cannot read property **'javascript' of undefined** during build, please consider upgrading to Webpack 5 in next.config.js.

NOTE 3 - @ducanh2912/next-pwa currently doesn't support Turbopack, but I will start working on it as soon as we get our hands on Turbopack. It may not use Workbox anymore depending on Workbox's maintain status, however.

---

Setup

See how to setup next-pwa

Tips

See our tips on using next-pwa

Reference

1. Google Workbox
2. ServiceWorker, MessageChannel, & postMessage by Nicolás Bevacqua
3. The service worker lifecycle
4. 6 Tips to make your iOS PWA feel like a native app
5. Make your PWA available on Google Play Store