2025-06-30 Web Development
How to Create a Super Minimal Progressive Web App (PWA) with Next.js 15
By O. Wolfson
Progressive Web Apps offer app-like experiences directly in the browser: installable, offline-capable, and fast. With Next.js 15 and its App Router, you can turn a basic web app into a minimal PWA in just a few steps—no push notifications, no extras, just the core requirements.
Code: Minimal PWA with Next.js 15
Deployed: Minimal PWA with Next.js 15
1. Project Setup
If you don’t have a Next.js project yet:
shnpx create-next-app@latest my-minimal-pwa
cd my-minimal-pwa
2. Add App Manifest
Create the manifest file at app/manifest.json
(not in /public
, not /src/app
):
json{
"name": "Minimal Next.js PWA",
"short_name": "MinimalPWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#317EFB",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Tip: The manifest must include at least one 192x192 and one 512x512 PNG icon (add these to
/public
).
3. Add Icons
Place your icons in /public
:
/public/icon-192x192.png
/public/icon-512x512.png
You can generate these with realfavicongenerator.net or any image editor.
4. Minimal Service Worker
Create a file /public/sw.js
:
js// public/sw.js
self.addEventListener("install", () => self.skipWaiting());
self.addEventListener("activate", () => self.clients.claim());
This is a no-op (doesn’t cache files), but registers the service worker, which is required for installability.
5. Register the Service Worker
Create a simple registration component:
components/sw-register.tsx
tsx"use client";
import { useEffect } from "react";
export default function SWRegister() {
useEffect(() => {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
}, []);
return null;
}
6. Link Everything in Your Layout
Edit app/layout.tsx
:
tsximport SWRegister from "@/components/sw-register";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#317EFB" />
</head>
<body>
<SWRegister />
{children}
</body>
</html>
);
}
7. Add a Home Page
Edit app/page.tsx
:
tsxexport default function Page() {
return (
<main>
<h1>Minimal Next.js PWA</h1>
<p>This is the simplest possible PWA using Next.js 15.</p>
</main>
);
}
8. Deploy and Test
- Deploy to Vercel or run locally with
pnpm dev
ornpm run dev
. - Visit the site in Chrome.
- You’ll see the “Install” (computer with download arrow) icon in the address bar.
- Click it to install your PWA!
DevTools Checks
- Open Chrome DevTools → Application tab → Manifest
- You should see all green checkmarks and no manifest errors.
FAQ
- Is offline support included? Not with this minimal SW, but you can add caching later.
- Where are icons stored?
In
/public/
so they’re accessible at the root. - Can I add features later? Yes—add caching, push, badges, etc., as you need them.
Conclusion
This is the absolute minimum you need for a true PWA in Next.js 15: manifest.json, two icons, a minimal service worker, and one registration component. From here, you can expand to add whatever features your users need—offline support, install prompts, push notifications, and more.