The Easiest Way to Build a Next.js PWA

@swavoti/next-pwa

A zero-configuration library that brings the power of Progressive Web Apps to your Next.js project. Offline support, advanced caching, and more, made simple.

Why Use @swavoti/next-pwa?

Everything you need for a production-ready PWA.

Zero-Configuration PWA

Simply wrap your Next.js config and get a fully functional PWA.

Offline First

Your application will load from the cache first, making it available even when the user is offline.

Advanced Caching Strategies

Network-First for pages and Cache-First for assets ensures a fast and reliable experience.

Automatic Service Worker

The service worker is automatically generated and registered, with no extra setup required.

Seamless Integration

Works with your existing Next.js project without requiring any changes to your application code.

Installation

Install the library using your favorite package manager.

npm install @swavoti/next-pwa

Usage

To enable PWA capabilities in your Next.js project, simply wrap your next.config.js with the withPWA function.

// next.config.js
const { withPWA } = require('@swavoti/next-pwa');

const nextConfig = {
  // Your existing Next.js configuration
};

module.exports = withPWA(nextConfig);

How It Works

This library extends your Next.js build process to do two things:

  • Copies the Service Worker: It copies a pre-configured service worker (sw.js) into your project's public directory.
  • Injects the Registration Script: It injects a script into your application's client-side bundle to register the service worker in the browser.

The result is a seamless PWA experience with no manual configuration needed.