add-pwa

Integrate PWA capabilities into Next.js projects using Serwist and Turbopack.

3|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/mattwoodco/skills --skill add-pwa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-pwa
Source: https://github.com/mattwoodco/skills/tree/main/skills/add-pwa
Command: npx skills add https://github.com/mattwoodco/skills --skill add-pwa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @serwist/turbopack, esbuild, serwist, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables your Next.js application to function as a Progressive Web App (PWA), allowing users to install it on their devices and use it even when offline.

Core Features & Use Cases

  • Offline Support: Users can access your app's content without an internet connection.
  • Installability: Users can add your app to their home screen like a native application.
  • Improved User Experience: Provides a seamless experience across devices with features like precaching and runtime caching.
  • Use Case: You want to ensure your e-commerce site is accessible and usable even with spotty internet connections, and allow users to "install" it for quick access from their phone's home screen.

Quick Start

Add PWA support to your Next.js project using Serwist.

Frequently Asked Questions about add-pwa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a Next.js app installable and offline-ready?

To make a Next.js app installable and offline-ready, integrate Progressive Web App (PWA) capabilities using Serwist and Turbopack. This enables offline support, device installability, precaching, and runtime caching strategies for your application.

Can I use Serwist with Turbopack in a Next.js App Router project?

Yes, you can use Serwist with Turbopack in a Next.js App Router project. The integration requires TypeScript configuration and uses specific dependencies like @serwist/turbopack to enable PWA features such as precaching and runtime caching.

What is the best way to add PWA offline support to a Next.js application?

The best way to add PWA offline support to a Next.js application is by integrating Serwist. It configures service workers for precaching and runtime caching strategies, allowing users to access content without an internet connection.

Do I need TypeScript to configure PWA capabilities in Next.js?

Yes, TypeScript is required to configure PWA capabilities in Next.js using this integration. The setup relies on TypeScript configuration alongside Serwist and Turbopack to enable offline support and installability.

Why add PWA features like precaching and runtime caching to an e-commerce site?

Adding PWA features like precaching and runtime caching to an e-commerce site ensures it remains accessible and usable even with spotty internet connections. Users can install the app for quick access from their home screen.

Does Serwist support both precaching and runtime caching strategies for Next.js?

Yes, Serwist supports both precaching and runtime caching strategies for Next.js. This allows your application to store assets proactively and manage network requests dynamically to maintain offline functionality.