Building a Progressive Web App (PWA) with Next.js: A Complete 2025 Guide

What Makes an App "Progressive"?

A Progressive Web App (PWA) is a web application that uses modern browser APIs to deliver app-like experiences. The "progressive" refers to enhancement — a PWA works for every user on every browser, but users on modern browsers get enhanced capabilities like offline access, install prompts, and push notifications.

For businesses, PWAs sit in a sweet spot: build once (web), deploy everywhere (browser + installable on iOS and Android home screens), no app store friction, instant updates. For our clients in e-commerce and healthcare, PWAs have delivered 40-60% reductions in mobile bounce rates compared to their previous mobile web experiences.

The Three Pillars of PWA

1. HTTPS: PWAs require a secure origin. All modern production web hosting (Vercel, Netlify, Railway) provides this automatically.

2. Web App Manifest: A JSON file that tells the browser how to present your app when installed — icon, name, theme color, display mode.

3. Service Worker: A JavaScript file that runs in the background, separate from your main thread. It intercepts network requests, enabling offline caching, background sync, and push notifications.

Setting Up PWA in Next.js

The cleanest approach for Next.js 14/15 uses the next-pwa package with workbox-webpack-plugin.

Install

Run: npm install next-pwa

Configure next.config.ts

Wrap your Next.js config with withPWA, setting dest to "public", disabling in development, and enabling register and skipWaiting. This generates sw.js and workbox files in your public directory during build.

Create Web App Manifest

Create public/manifest.json with your app name, short name, description, start URL set to "/", display mode as "standalone", background and theme colors, and icons at 192x192 and 512x512 pixels. Include a screenshots array for rich install prompts on Android.

Link Manifest in layout.tsx

Add manifest: "/manifest.json" and themeColor to your metadata export. Also add appleWebApp settings with capable: true for iOS home screen support.

Caching Strategies

Service workers intercept fetch requests. You choose how each resource is cached:

Cache First: Check cache, use network only if not cached. Best for static assets (images, fonts, CSS). Set long expiration (365 days).

Network First: Try network, fall back to cache if offline. Best for API responses where fresh data matters. Set short expiration (5 minutes).

Stale While Revalidate: Return cached version immediately, update cache from network in background. Best for non-critical data where speed matters more than freshness.

Configure these in next-pwa's runtimeCaching array, with separate entries for fonts (CacheFirst), API routes (NetworkFirst), and images (CacheFirst with 30-day expiration).

Install Prompt UI

Browsers show a native install prompt, but you can create a custom one for better conversion. Listen for the beforeinstallprompt event in a useEffect hook, store the event in state, and call event.prompt() when the user clicks your install button. Hide the banner once the appinstalled event fires.

Push Notifications

Push notifications require a push subscription and a backend to send messages. The Web Push API uses VAPID keys for authentication. Generate them with: npx web-push generate-vapid-keys.

Store the public key in your manifest and register a push subscription in your service worker. Your backend sends push messages using the web-push npm package, passing the subscription object and a JSON payload with title, body, and icon.

This is exactly the pattern we use for Kafe Kufe — our cafe management platform uses push notifications to alert kitchen staff of new orders in real-time, even when the browser is closed.

PWA Checklist Before Launch

Want help building a PWA for your next project? Start a conversation.