# Progressive Web App

> Skill — Progressive Web App Architecture

- Skill: `sairam0424/progressive-web-app` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sairam0424/progressive-web-app`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sairam0424/progressive-web-app/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: sairam0424 (https://skillmd.com/u/sairam0424)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sairam0424/progressive-web-app

---


# Skill — Progressive Web App Architecture

## When this skill activates
This skill activates when building Progressive Web Apps, including service worker implementation, install prompts, push notifications, app shell patterns, or offline-first web experiences.

## Mandatory actions when this skill is active

### Before writing any code
1. Create comprehensive web manifest (`manifest.json`) with all required fields, icons (192px, 512px), theme colors, and display mode
2. Design service worker caching strategy (cache-first, network-first, stale-while-revalidate) based on resource types
3. Plan app shell architecture — minimal HTML/CSS/JS that loads instantly and provides chrome while content loads
4. Determine push notification strategy, permission timing, and notification content types

### During implementation
- Implement service worker with proper lifecycle management (install, activate, fetch events) and versioning
- Use Workbox for production PWAs — handles caching strategies, precaching, background sync, and updates gracefully
- Implement `beforeinstallprompt` event handler to control install prompt timing and improve conversion
- Cache critical assets during service worker install event, use runtime caching for dynamic content
- Implement proper service worker update flow — show "New version available" banner, `skipWaiting()` with user consent
- Register push notification subscription after user grants permission, handle subscription changes
- Implement proper HTTPS certificate for service worker and push notification requirements

### After implementation
- Test install prompt on Chrome/Edge desktop and Android (iOS has limited PWA support)
- Verify offline functionality using DevTools offline mode and throttling
- Test service worker update flow — deploy new version, verify old cached content updates correctly
- Validate web manifest using Lighthouse PWA audit and browser DevTools Application tab
- Test push notifications across different platforms and browsers, handle click actions

## Self-check before task completion
- [ ] Lighthouse PWA audit score is 100 (all PWA checks pass)
- [ ] Service worker caches critical resources, app works offline with meaningful content
- [ ] Install prompt appears at appropriate time (not immediately on first visit)
- [ ] App shell loads in under 1 second on 3G networks
- [ ] Push notifications work correctly with proper permission handling, rich content, and click actions
- [ ] Service worker updates smoothly without breaking user experience or causing infinite loops