@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