Next.js를 사용하여 프로그레시브 웹 앱 구축: 서비스 작업자, 오프라인 지원, 캐싱 전략, 푸시 알림, 설치 프롬프트 및 웹 앱 매니페스트. PWA 생성, 오프라인 기능 추가, 서비스 작업자 구성, 푸시 알림 구현, 설치 프롬프트 처리 또는 PWA 성능 최적화 시 사용합니다. 트리거: PWA, 프로그레시브 웹 앱, 서비스 워커, 오프라인, 캐시 전략, 웹 매니페스트, 푸시 알림, 설치 가능한 앱, Serwist, next-pwa, workbox, 백그라운드 동기화.
명령줄에서 nextjs-pwa AI 스킬을 개발 환경에 빠르게 설치
출처: jakerains/agentskills.
| Add PWA to Next.js app | Serwist (recommended) | This file → Quick Start | | Add PWA without dependencies | Manual SW | references/service-worker-manual.md | | Configure caching | Serwist defaultCache or custom | references/caching-strategies.md | | Add offline support | App shell + IndexedDB | references/offline-data.md |
| Push notifications | VAPID + web-push | references/push-notifications.md | | Fix iOS issues | Safari/WebKit workarounds | references/ios-quirks.md | | Debug SW / Lighthouse | DevTools + common fixes | references/troubleshooting.md | | Migrate from next-pwa | Serwist migration | references/serwist-setup.md |
Serwist is the actively maintained successor to next-pwa, built for App Router.
Next.js를 사용하여 프로그레시브 웹 앱 구축: 서비스 작업자, 오프라인 지원, 캐싱 전략, 푸시 알림, 설치 프롬프트 및 웹 앱 매니페스트. PWA 생성, 오프라인 기능 추가, 서비스 작업자 구성, 푸시 알림 구현, 설치 프롬프트 처리 또는 PWA 성능 최적화 시 사용합니다. 트리거: PWA, 프로그레시브 웹 앱, 서비스 워커, 오프라인, 캐시 전략, 웹 매니페스트, 푸시 알림, 설치 가능한 앱, Serwist, next-pwa, workbox, 백그라운드 동기화. 출처: jakerains/agentskills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/jakerains/agentskills --skill nextjs-pwaNext.js를 사용하여 프로그레시브 웹 앱 구축: 서비스 작업자, 오프라인 지원, 캐싱 전략, 푸시 알림, 설치 프롬프트 및 웹 앱 매니페스트. PWA 생성, 오프라인 기능 추가, 서비스 작업자 구성, 푸시 알림 구현, 설치 프롬프트 처리 또는 PWA 성능 최적화 시 사용합니다. 트리거: PWA, 프로그레시브 웹 앱, 서비스 워커, 오프라인, 캐시 전략, 웹 매니페스트, 푸시 알림, 설치 가능한 앱, Serwist, next-pwa, workbox, 백그라운드 동기화. 출처: jakerains/agentskills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/jakerains/agentskills --skill nextjs-pwa 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/jakerains/agentskills