# Introduction

Progressive Web Apps (PWAs) offer the best of both worlds: the reach of the web and the experience of native apps. With the release of Next.js 15, it’s easier than ever to create performant, installable web apps using the new App Router architecture.

In this guide, we’ll walk through setting up a basic PWA using Next.js 15, complete with offline support, a manifest file, and service worker integration.

# Prerequisites

Before proceeding, ensure you have the following:

• A working Next.js application.

# Step 1: Add a manifest file

First, create a manifest.ts file in the root of your Next.js project. This file is essential for PWA installability.

{
  "name": "My PWA App",
  "short_name": "PWA App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

# Step 2: Add PWA icons

Create a folder in your public directory called icons and add your icon images there:

/public/icons/icon-192x192.png
/public/icons/icon-512x512.png

# Bonus: Download this app as a PWA

# Android

In Chrome, tap the three-dot menu and choose “Add to Home Screen”.

# iOS

In Safari, tap the Share icon. Scroll down and select “Add to Home Screen”.