back
loading skill details...
>
Progressive Web App
Table of Contents
Overview
When to Use
Quick Start
Reference Guides
Best Practices
Overview
Build progressive web applications with offline support, installability, service workers, and web app manifests to deliver app-like experiences in the browser.
When to Use
App-like web experiences
Offline functionality needed
Mobile installation required
Push notifications
Fast loading experiences
Quick Start
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)
Reference Guides
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
Best Practices
✅ DO
Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying
❌ DON'T
Skip testing or validation
Ignore error handling
Hard-code configuration values
1d:[don't have the plugin yet? install it then click "run inline in claude" again.