web-pwa-service-workers_skill

Overview

This skill explains Service Worker lifecycle management, common caching strategies, offline patterns, and update handling for Progressive Web Apps. It focuses on practical patterns: precaching, runtime caching, cache versioning, and user-controlled updates. Use these patterns to make apps reliable offline while preserving safe update behavior.

How this skill works

The skill inspects Service Worker registration and the worker file to verify proper install, activate, fetch, and message handlers. It checks that install/activate handlers call event.waitUntil(), caches are versioned and cleaned up on activation, and update detection is exposed to the client so users control when a new worker takes over. It also validates caching strategy implementations (cache-first, network-first, stale-while-revalidate) and offline fallback handling.

When to use it

• Building PWAs that must work offline or with flaky networks
• Implementing fine-grained caching beyond default HTTP caching
• Providing an offline fallback page and cached assets for reliability
• Controlling update rollout so users are not disrupted mid-session

Best practices

• Always call event.waitUntil() in install and activate to signal completion
• Version caches (e.g., static-v1.0.0) and delete old ones during activate
• Avoid skipWaiting by default; surface updateAvailable to users and let them opt in
• Use cache-first for static assets, network-first for navigations, and stale-while-revalidate for non-critical API data
• Handle all fetch failures with sensible fallbacks (offline page for navigations, placeholders for images)

Example use cases

• Precaching app shell and offline.html during install so the app loads offline
• Using network-first for HTML pages so users get fresh content when online but fall back when offline
• Applying cache-first for images and vendor JS to improve load performance
• Implementing a UI that notifies users about updates and calls postMessage to skipWaiting when accepted