skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kb-pwa

Implement offline-first PWA behavior and service worker lifecycle management for Next.js apps.

Updated May 19, 2026
Search Tags:#service worker#pwa#web push#offline caching#vapid#update ux
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-pwa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kb-pwa
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/kb-pwa
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-pwa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures your Next.js Progressive Web App works reliably offline and delivers new service worker updates without silently breaking user sessions or losing in-progress work.

Core Features & Use Cases

  • Managed Service Worker selection: Guides when to use Serwist for Next.js App Router, when to use next-pwa for Pages Router legacy apps, and when to fall back to a manual register flow for non-standard needs.
  • Safe update-available UX: Implements an explicit “New version available—Reload” flow instead of using skipWaiting in a way that forces reloads.
  • Offline strategy by resource type: Defines caching rules per content category (HTML, static assets, images, public GET APIs, authenticated/mutations, and sensitive data) plus an offline fallback page requirement.
  • Web Push with VAPID: Covers VAPID key handling, client subscription, server persistence, small payload design, and notification click deep linking behavior.
  • Deferred install prompt: Uses beforeinstallprompt capture with a user-intent “Install” affordance, and clears it on appinstalled.

Quick Start

Ask the AI to “Design my Next.js App Router PWA using Serwist, including offline caching rules by resource type, a user-driven update prompt (no silent skipWaiting), a navigation offline fallback page, VAPID push setup, and a deferred beforeinstallprompt install flow.”

Frequently Asked Questions about kb-pwa

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

FAQPage Schema
How do I show a service worker update prompt without breaking user sessions in Next.js?▼

To show a service worker update prompt safely in Next.js, implement an explicit “New version available—Reload” flow instead of using silent skipWaiting, which forces reloads and loses in-progress work.

What's the best way to configure offline caching strategies for a Next.js PWA?▼

The best way to configure offline caching for a Next.js PWA is to define specific caching rules per resource type, covering HTML, static assets, images, public GET APIs, and authenticated mutations, plus an offline fallback page.

Does Serwist work with Next.js App Router for building Progressive Web Apps?▼

Yes, Serwist works with Next.js App Router for building Progressive Web Apps, while next-pwa is recommended for legacy Pages Router apps and manual register flows suit non-standard needs.

How do I set up web push notifications with VAPID keys in a PWA?▼

To set up web push notifications with VAPID keys in a PWA, handle VAPID key separation, manage client subscription, persist data server-side, design small payloads, and configure notification click deep linking.

When should I defer the beforeinstallprompt event for PWA installation?▼

You should defer the beforeinstallprompt event for PWA installation by capturing it and presenting a user-intent “Install” affordance, then clearing the prompt on appinstalled to ensure a non-intrusive flow.

Why does my PWA lose user data when a new service worker activates?▼

Your PWA loses user data when a new service worker activates if it uses skipWaiting to force a reload, bypassing an explicit update-available prompt and disrupting active user sessions.

Related Skills

Explore More Software Engineering Skills→
mattwoodcomattwoodco
3

notifications-push

Implement Web Push notifications with VAPID authentication for subscribing devices.

Community
Advanced
jamshujamshu
4

add-odoo-model

Add an Odoo Studio model to an existing PWA project.

Community
Advanced
secondskysecondsky
204

progressive-web-app

Implement service workers, web manifest, and install prompts for offline-capable web apps.

Community
Advanced
Just-mpmJust-mpm

nextjs-pwa

Guide Next.js 13+ projects to choose between native PWA support and Serwist offline caching.

Community
Advanced