How to Build a PWA with React 19 or Next.js 15 – Full Guide

Progressive Web Apps (PWAs) bridge the gap between web and native apps — offering offline access, home screen installation, push notifications, and faster load times. With React 19 and Next.js 15 leading the modern frontend wave, now’s the perfect time to upgrade your app into a PWA.

In this blog, we’ll walk through two methods:

• React 19 + Vite setup with vite-plugin-pwa

• Next.js 15 setup with next-pwa and App Router

Let’s turn your modern frontend into an installable, offline-ready PWA.

What Makes a PWA?

A PWA is just a regular web app enhanced with:

• manifest.json: Metadata like name, icon, theme color, etc.

• Service Worker: Runs in background, caches assets for offline use.

• HTTPS: Required for service workers.

• Responsive UI: Mobile-first design.

1. Creating a PWA in React 19 (Vite)

Step 1: Initialize the Project

>_ Bash
1npm create vite@latest my-pwa-app --template react
2cd my-pwa-app
3npm install

Step 2: Install the PWA plugin

>_ Bash
1npm install vite-plugin-pwa -D

Step 3: Configure Vite

Edit vite.config.js:

>_ Js
1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3import { VitePWA } from 'vite-plugin-pwa';
4
5export default defineConfig({
6  plugins: [
7    react(),
8    VitePWA({
9      registerType: 'autoUpdate',
10      includeAssets: ['favicon.svg', 'pwa-192.png', 'pwa-512.png'],
11      manifest: {
12        name: 'My PWA App',
13        short_name: 'PWA',
14        start_url: '/',
15        display: 'standalone',
16        background_color: '#ffffff',
17        theme_color: '#0070f3',
18        icons: [
19          {
20            src: 'pwa-192.png',
21            sizes: '192x192',
22            type: 'image/png',
23          },
24          {
25            src: 'pwa-512.png',
26            sizes: '512x512',
27            type: 'image/png',
28          },
29        ],
30      },
31    }),
32  ],
33});

Step 4: Add Icons

Place pwa-192.png and pwa-512.png inside public/.

Step 5: Run & Test

>_ Bash
1npm run dev

Visit localhost, open DevTools → Application → check for:

• Manifest loaded

• Service Worker registered

• Add to Home Screen visible

2. Creating a PWA in Next.js 15 (App Router)

Step 1: Set up the Project

>_ Bash
1npx create-next-app@latest my-next-pwa
2cd my-next-pwa

Pick:

• App Router: Yes

• TypeScript: Yes

• Tailwind CSS: Optional

Step 2: Install next-pwa

>_ Bash
1npm install next-pwa

Step 3: Add Manifest & Icons

Create public/manifest.json:

>_ Json
1{
2  "name": "My Next.js PWA",
3  "short_name": "NextPWA",
4  "start_url": "/",
5  "display": "standalone",
6  "theme_color": "#0070f3",
7  "background_color": "#ffffff",
8  "icons": [
9    {
10      "src": "/icon-192x192.png",
11      "sizes": "192x192",
12      "type": "image/png"
13    },
14    {
15      "src": "/icon-512x512.png",
16      "sizes": "512x512",
17      "type": "image/png"
18    }
19  ]
20}

Place icon-192x192.png and icon-512x512.png in public/.

Step 4: Configure next.config.js

>_ Js
1/** @type {import('next').NextConfig} */
2const withPWA = require('next-pwa')({
3  dest: 'public',
4  register: true,
5  skipWaiting: true,
6  disable: process.env.NODE_ENV === 'development',
7});
8
9const nextConfig = {
10  experimental: {
11    serverActions: true,
12  },
13};
14
15module.exports = withPWA(nextConfig);

Step 5: Test PWA

>_ Bash
1npm run build
2npm run start

Open DevTools → Lighthouse → Run audit → See your PWA score.

Real-World Use Case: CodeFramer as a PWA?

CodeFramer could benefit massively from a PWA:

• Offline access for previously saved code

• Fast launch from the home screen

• Seamless mobile experience for live coding

PWAs can boost engagement, trust, and retention — especially for tools and dashboards.

Final Thoughts

Whether you're using React 19 with Vite or Next.js 15, turning your app into a PWA is easier than ever — and the payoff is huge. Better UX, offline support, and native-like feel without app stores.