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

sk-pwa

Configure a Serwist service worker with caching firewalls and managed update UX.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents broken or inconsistent Progressive Web App behavior in the TimeKast Starter Kit by providing a safe, production-ready Serwist Service Worker setup with a managed update flow and install UX.

Core Features & Use Cases

  • Service Worker in the kit’s canonical location: Implements precaching and tightly-scoped runtime caching using src/app/sw.ts (fonts, images, CSS, and controlled /_next/image), while explicitly avoiding navigations, RSC, /api/*, and Next-action POSTs to prevent hydration/auth/stream failures.
  • Managed update UX with opt-in activation: Uses PwaUpdateToast to detect a waiting Service Worker and prompts the user to reload via an explicit “Recargar” button instead of silent takeover.
  • Install prompt patterns across platforms: Provides PwaInstallToast for Chromium/Android and IosA2hsHint for iOS Safari, including route gating and one-shot/cooldown storage.
  • Push reception and click navigation contract: Handles VAPID push inside the SW and forwards notification clicks to the client using the SW_NAVIGATE postMessage contract.
  • Manifest and icon asset wiring: Documents the shipped icons under public/pwa/ and the expected manifest integration via src/app/manifest.ts.

Quick Start

Use sk-pwa whenever you integrate the TimeKast Starter Kit with offline caching, install prompts, SW updates, or VAPID push—by aligning your changes to the kit’s canonical Service Worker at src/app/sw.ts and its managed update flow in PwaUpdateToast.

Frequently Asked Questions about sk-pwa

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

FAQPage Schema
How do I set up offline caching in a Next.js PWA without breaking navigation and API routes?▼

Use a Serwist-based service worker with strict caching firewalls to precache static assets while explicitly bypassing navigations, RSC, and API POST requests. This prevents hydration and authentication failures during offline use.

What is the best way to manage service worker updates without a silent takeover?▼

Managed service worker updates detect a waiting SW and prompt the user via an explicit reload button. This opt-in activation via SKIP_WAITING prevents sudden page refreshes and ensures a controlled update experience.

How do I handle PWA install prompts across both Android Chromium and iOS Safari?▼

Platform-specific install patterns use an install toast for Chromium/Android and an Add to Home Screen hint for iOS Safari. Route gating and cooldown storage manage prompt frequency without annoying users.

Does service worker caching interfere with Next.js Server Components and Next-Action POST requests?▼

No, the service worker explicitly avoids intercepting navigations, RSC, API routes, and Next-action POSTs. This strict caching firewall prevents stream interruptions and maintains correct hydration and authentication states.

How do I configure VAPID push notifications and handle notification clicks in a service worker?▼

VAPID push reception occurs inside the service worker, forwarding notification clicks to the client using a SW_NAVIGATE postMessage contract. This ensures clicks trigger proper client-side navigation without breaking the app state.

Related Skills

Explore More Software Engineering Skills→
jamshujamshu
4

add-odoo-model

Add an Odoo Studio model to an existing PWA project.

Community
Advanced
apakouapakou

FE_PushNotificationIntegration

Integrate web push notifications in React apps using the Push API.

Community
Basic
congiuluccongiuluc

pwa

Integrate service workers, manifests, and caching strategies for offline web apps.

Community
Advanced
EsdevenimentsEsdeveniments
2

service-worker-updates

Update service worker caching by editing sw-template.js and running yarn prebuild.

Official
Intermediate