Progressive Web App

by secondsky88378361314fMIT227 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

Progressive Web Apps with service workers, web manifest, offline support, installation prompts. Use for installable web apps, offline functionality, push notifications, or encountering service worker registration, cache strategy, manifest configuration errors.

Instructions onlySoftware Development

AI-generated overview

Reference guide for building Progressive Web Apps with manifests, service workers, offline caching, install prompts and push notifications.

What it does: This skill provides reference material and code snippets for building installable, offline-capable Progressive Web Apps. It covers web app manifest configuration, service worker registration and cache strategies, the beforeinstallprompt install flow, push notification subscription, and a PWA readiness checklist. It produces guidance and example code rather than running any tooling itself.
When to use it: Use it when adding installability, offline support or push notifications to a web app, or when troubleshooting service worker registration, cache strategy or manifest configuration problems.
Requirements: No scripts or packages are required; the skill is instructions and code examples only. Applying the examples assumes a web project served over HTTPS and, for push notifications, a VAPID key pair and a server endpoint.

Progressive Web App (PWA)

Build web applications that work like native apps with offline support and installability.

Web App Manifest

json

{  "name": "My Application",  "short_name": "MyApp",  "start_url": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#000000",  "icons": [    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }  ]}

{  "name": "My Application",  "short_name": "MyApp",  "start_url": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#000000",  "icons": [    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }  ]}

Service Worker

javascript

const CACHE_NAME = 'app-v1';const STATIC_ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];
// Installself.addEventListener('install', event => {  event.waitUntil(    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))  );});
// Fetch with cache-first strategyself.addEventListener('fetch', event => {  event.respondWith(    caches.match(event.request).then(cached => {      if (cached) return cached;
      return fetch(event.request).then(response => {        if (response.status === 200) {          const clone = response.clone();          caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));        }        return response;      });    })  );});

const CACHE_NAME = 'app-v1';const STATIC_ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];
// Installself.addEventListener('install', event => {  event.waitUntil(    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))  );});
// Fetch with cache-first strategyself.addEventListener('fetch', event => {  event.respondWith(    caches.match(event.request).then(cached => {      if (cached) return cached;
      return fetch(event.request).then(response => {        if (response.status === 200) {          const clone = response.clone();          caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));        }        return response;      });    })  );});

Install Prompt

javascript

let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {  e.preventDefault();  deferredPrompt = e;  showInstallButton();});
async function installApp() {  if (!deferredPrompt) return;  deferredPrompt.prompt();  const { outcome } = await deferredPrompt.userChoice;  console.log('Install outcome:', outcome);  deferredPrompt = null;}

let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {  e.preventDefault();  deferredPrompt = e;  showInstallButton();});
async function installApp() {  if (!deferredPrompt) return;  deferredPrompt.prompt();  const { outcome } = await deferredPrompt.userChoice;  console.log('Install outcome:', outcome);  deferredPrompt = null;}

Push Notifications

javascript

async function subscribeToPush() {  const registration = await navigator.serviceWorker.ready;  const subscription = await registration.pushManager.subscribe({    userVisibleOnly: true,    applicationServerKey: VAPID_PUBLIC_KEY  });  await sendSubscriptionToServer(subscription);}

async function subscribeToPush() {  const registration = await navigator.serviceWorker.ready;  const subscription = await registration.pushManager.subscribe({    userVisibleOnly: true,    applicationServerKey: VAPID_PUBLIC_KEY  });  await sendSubscriptionToServer(subscription);}

PWA Checklist

Source and attribution

Source:secondsky/claude-skillsinplugins/progressive-web-app/skills/progressive-web-appat commit8837836

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Progressive Web App

Progressive Web App (PWA)

Web App Manifest

Service Worker

Install Prompt

Push Notifications

PWA Checklist

Source and attribution

More from secondsky/claude-skills

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices