Does it work with the Next.js App Router?

Yes, it includes patterns specifically designed for the App Router, such as metadata API configurations and 'use client' hooks for status detection.

Which libraries are required to use these patterns?

Most patterns are built around next-pwa and Workbox, which are the industry standards for managing service workers in the Next.js ecosystem.

How does this skill handle offline data synchronization?

The skill provides implementation guides for Background Sync and IndexedDB, allowing apps to save user actions while offline and sync them once a connection is restored.

What does the pwa-next skill do for my project?

It provides ready-to-use patterns for adding Progressive Web App capabilities to Next.js, including service worker configuration, manifest setup, and caching logic.

Next.js PWA Patterns

Name: Next.js PWA Patterns
Author: Naw3

byNaw3

0•

Mobile Development

Implements Progressive Web App features in Next.js applications including offline support, service workers, and push notifications.

This skill provides a comprehensive toolkit for building high-performance Progressive Web Apps using Next.js. It offers standardized patterns for configuring service workers with next-pwa, managing web app manifests, and implementing advanced Workbox caching strategies. Whether you need to handle offline fallbacks, integrate background synchronization, or manage persistent data with IndexedDB, this skill streamlines the process of making your web application installable and resilient to poor network conditions.

主な機能

01Offline fallback pages and real-time connectivity detection hooks

02Automated next-pwa setup and manifest.json configuration

03Advanced Workbox caching strategies for APIs, images, and fonts

040 GitHub stars

05Push notification registration and background sync workflows

06IndexedDB integration patterns for robust offline data persistence

ユースケース

01Implementing re-engagement features like push notifications and background updates

02Converting a standard Next.js website into an installable mobile-first application

03Building offline-capable dashboards that require persistent local data storage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add naw3/skillsrepo pwa-next

For use in Claude.ai and ChatGPT

Download Skill