playbooks

home / skills / harborgrid-justin / lexiflow-premium / service-worker-caching-strategies

service-worker-caching-strategies skill

/frontend/.github-skills/service-worker-caching-strategies

This skill helps you implement offline caching and asset management for React apps using service workers, improving reliability and performance.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill service-worker-caching-strategies

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
611 B
---
name: service-worker-caching-strategies
description: Implement robust offline caching and asset management for React apps via Service Workers.
---

# Service Worker Caching Strategies

## Summary
Implement robust offline caching and asset management for React apps via Service Workers.

## Key Capabilities
- Cache app shell and assets.
- Implement runtime caching.
- Handle service worker updates.

## PhD-Level Challenges
- Prevent cache poisoning.
- Debug scoping issues.
- Manage quota interaction.

## Acceptance Criteria
- Demonstrate offline launch.
- Show update prompt.
- Provide a cache strategy.

Overview

This skill implements robust offline caching and asset management for React apps using Service Workers. It provides app-shell caching, runtime caching rules, and an update flow to notify users when a new version is available. The goal is reliable offline launches, controlled cache updates, and reduced network load.

How this skill works

The skill installs a Service Worker that precaches the app shell and static assets at install time, then applies runtime caching strategies (cache-first, network-first, or stale-while-revalidate) for API responses and media. It includes logic to compare cache versions, evict stale entries, and surface an update prompt when a new Service Worker is waiting to activate. It also includes safeguards to limit cache size and prevent common pitfalls like cache poisoning and scope misconfiguration.

When to use it

  • Progressive Web App or React app that must work offline or with poor connectivity
  • Improve load performance by serving static assets from cache
  • Control asset updates and prompt users when a new release is available
  • Reduce bandwidth usage for repeat visitors
  • Manage large media or dynamic content with tailored caching rules

Best practices

  • Precise scope and URL matching: serve only intended assets from the cache to avoid scope leaks
  • Use versioned cache names and clear old caches on activate to ensure predictable updates
  • Apply appropriate strategy per asset: cache-first for static assets, network-first for APIs
  • Limit cache size and implement LRU or timestamp eviction to avoid quota issues
  • Validate cached responses (headers, content-type, status) to mitigate cache poisoning
  • Add a user-visible update prompt tied to waiting Service Worker activation

Example use cases

  • Offline-capable legal forms viewer that must load instantly without network
  • React single-page app that shows an 'Update available' banner when a new build is deployed
  • Media-heavy pages that cache thumbnails and use runtime caching for full-resolution assets
  • API-driven dashboards that use network-first for fresh data and fallback to cached snapshots when offline

FAQ

How do I prevent cache poisoning?

Validate responses before caching (status 200, correct content-type), scope caches narrowly, and avoid caching user-submitted data without strict checks.

How can I prompt users about updates?

Listen for the Service Worker 'waiting' state in the client, show a banner or toast, and call skipWaiting/clients.claim on user confirmation to activate the new worker.