Progressive Web Apps with Next.js: Offline, Install, Push Notifications

What Makes a Progressive Web App?

A Progressive Web App (PWA) is a web application that uses modern browser APIs to deliver app-like experiences: it can be installed to the home screen, works offline, receives push notifications, and loads instantly. PWAs bridge the gap between web and native apps without requiring app store distribution. Next.js is an excellent foundation for PWAs because of its built-in performance optimizations and service worker support.

Adding a Web App Manifest

The Web App Manifest is a JSON file that tells the browser how to display your app when installed. Create public/manifest.json with name, short_name, description, start_url, display (standalone), icons in multiple sizes, and theme_color. Reference it in your HTML head with a link tag. Next.js 14+ supports exporting the manifest from app/manifest.ts as a TypeScript object.

Service Workers with next-pwa

The next-pwa package (or the newer @ducanh2912/next-pwa) automates service worker generation for Next.js. Install and configure it in next.config.js with a dest of public and your caching strategies. It uses Workbox under the hood to handle pre-caching of your static assets and runtime caching for API calls. Set disable: process.env.NODE_ENV === 'development' to avoid service worker conflicts during local development.

Offline Support and Caching Strategies

Workbox provides several caching strategies: Cache First (serve from cache, fall back to network — best for static assets), Network First (try network, fall back to cache — best for API data), and Stale While Revalidate (serve cached version immediately, update cache in background — best for frequently updated content). Configure different strategies for different URL patterns in your Workbox runtime caching config.

Push Notifications

Implement push notifications using the Push API and Notification API. Request notification permission from the user with a clear value proposition (never ask immediately on page load). Subscribe to push notifications using the PushManager API and store the subscription endpoint on your server. Use a push notification service like web-push (Node.js package) to send notifications from your backend.

Testing and Auditing Your PWA

Use Chrome DevTools Application panel to inspect your manifest, service worker, and cache storage. Run a Lighthouse audit (the PWA section specifically) to check installability, offline behavior, and manifest validity. Test installation on both Android (Chrome) and iOS (Safari). iOS has limited PWA support — it does not support push notifications, and service workers were only added in Safari 11.1.