service-worker-updates

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

2|Updated Apr 9, 2023
One-click install
npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill service-worker-updates
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: service-worker-updates
Source: https://github.com/Esdeveniments/esdeveniments-frontend/tree/main/.github/skills/service-worker-updates
Command: npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill service-worker-updates

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides developers in safely updating and testing service worker caching logic without manually editing the generated public/sw.js file.

Core Features & Use Cases

  • Edit the central template: modify public/sw-template.js to adjust caching rules.
  • Regenerate correctly: run yarn prebuild to apply changes and produce an updated public/sw.js.
  • Validate behavior: test API routing, offline behavior, and cache strategies in development or staging before deployment.

Quick Start

Edit public/sw-template.js to implement the desired caching strategy, then run yarn prebuild to regenerate public/sw.js and verify the changes in the dev server.

Frequently Asked Questions about service-worker-updates

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

FAQPage Schema
How do I safely update service worker caching rules in a Next.js app?▼

To update service worker caching rules safely, edit the public/sw-template.js file to adjust your strategies, then run yarn prebuild to regenerate the public/sw.js file instead of editing it directly.

Why does manually editing the generated sw.js file break my service worker?▼

Manually editing the generated public/sw.js file breaks service worker updates because the build process overwrites your changes, requiring you to modify the sw-template.js source and run yarn prebuild to regenerate it.

What is the correct workflow to regenerate a Workbox service worker during development?▼

The correct workflow to regenerate a Workbox service worker involves modifying public/sw-template.js with your desired cache strategies and executing yarn prebuild to apply the changes and produce an updated public/sw.js.

Can I use this service worker update process with any Next.js project?▼

This service worker update process applies specifically to Next.js apps using Workbox and a sw-template.js flow, requiring you to run yarn prebuild and validate offline behavior before deployment.

What should I test before deploying an updated service worker cache?▼

Before deploying an updated service worker cache, you should test API routing, offline behavior, and cache strategies in your development or staging environment to validate the regenerated sw.js file.