Back to Skills

pwa-development

Progressive Web Apps - service workers, caching strategies, offline, Workbox

693stars59forksUpdated 6/15/2026

Security Assessment

Safe(90/100)

Detected risks:

Sensitive File Access([SKILL.md] .env)
Security Score90/100

About pwa-development

The PWA Development skill enables building Progressive Web Apps that combine the reach of web applications with the capabilities of native apps. It focuses on implementing the three core pillars of PWA: HTTPS security, service workers for background processing, and web app manifests for installation. This skill helps create applications that work reliably offline, load instantly, and can be installed on users' devices without app store distribution.

The skill provides expertise in service worker lifecycle management, caching strategies, and offline-first architectures. It covers implementing fetch handlers, managing cache storage, and configuring Workbox for production-ready caching solutions. The skill includes knowledge of web app manifest configuration, including metadata, icons, display modes, and installation requirements across different browsers and platforms.

Ideal for developers building mobile-first web applications, e-commerce sites requiring offline functionality, content platforms needing fast load times, or any web application that benefits from native app-like features. The skill automatically activates when working with service worker files, workbox configurations, or web app manifests, providing guidance on installability criteria, icon requirements, caching patterns, and cross-browser PWA compatibility.

FAQ

What are the minimum requirements for a PWA to be installable?

A PWA needs three things to be installable: HTTPS (or localhost for development), a service worker with a fetch event handler, and a web app manifest containing name, icons (192px and 512px), start_url, and display mode set to standalone, fullscreen, or minimal-ui.

Which file types and paths trigger this skill?

This skill activates for files matching service worker patterns (sw.*, service-worker.*), Workbox configuration files (workbox-config.*), and web app manifest files (manifest.json).

What icon sizes are required for PWA installation?

At minimum, you need 192x192 and 512x512 PNG icons. For optimal support across platforms, provide icons at 72px, 96px, 128px, 144px, 152px, 192px, 384px, and 512px. Include a maskable icon at 512x512 for adaptive icon support on Android.

Does this skill work with specific frameworks or is it framework-agnostic?

This skill is framework-agnostic and focuses on core PWA standards. It works with service workers, Workbox, and web app manifests regardless of whether you're using React, Vue, Angular, or vanilla JavaScript.

What caching strategies does this skill cover?

The skill covers standard PWA caching strategies including cache-first, network-first, stale-while-revalidate, and offline fallback patterns, primarily through Workbox configuration and service worker implementation.

Install pwa-development

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill