Progressive Web App

Service workers, offline support, installability, and push notifications.

Overview

Next.js apps can be converted to PWAs for native app-like experiences.

Key Concepts

• Service Worker — Cache assets for offline use
• Web App Manifest — App metadata for installation
• Offline Support — Serve cached content
• Push Notifications — Re-engage users
• Workbox — Service worker utilities

Code Examples

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development'
});

module.exports = withPWA({
  // Next.js config
});

// public/manifest.json
{
  "name": "My Next.js PWA",
  "short_name": "MyPWA",
  "description": "A Progressive Web App built with Next.js",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0070f3",
  "icons": [
    { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

// app/layout.js
export const metadata = {
  manifest: '/manifest.json',
  themeColor: '#0070f3'
};

Practice

Convert a Next.js app to a PWA with offline support and installability.