skills/progressive-web-app/SKILL.md
Build progressive web apps using service workers, web manifest, offline support, and installability. Use when creating app-like web experiences.
npx skillsauth add aj-geddes/useful-ai-prompts progressive-web-appInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Build progressive web applications with offline support, installability, service workers, and web app manifests to deliver app-like experiences in the browser.
Minimal working example:
// public/manifest.json
{
"name": "My Awesome App",
"short_name": "AwesomeApp",
"description": "A progressive web application",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "portrait-primary",
"background_color": "#ffffff",
"theme_color": "#007bff",
"icons": [
{
"src": "/images/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents | |---|---| | Web App Manifest | Web App Manifest | | Service Worker Implementation | Service Worker Implementation | | Install Prompt and App Installation | Install Prompt and App Installation | | Offline Support with IndexedDB | Offline Support with IndexedDB | | Push Notifications | Push Notifications |
development
Implement Zero Trust security model with identity verification, microsegmentation, least privilege access, and continuous monitoring. Use when building secure cloud-native applications.
development
Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.
tools
Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.
development
Implement real-time bidirectional communication with WebSockets including connection management, message routing, and scaling. Use when building real-time features, chat systems, live notifications, or collaborative applications.