Pwa Development

by mindrally97184105b5daNo license269 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 5 weeks ago

Progressive Web App development guidelines covering service workers, caching strategies, offline functionality, and installability

Instructions onlySoftware Development

AI-generated overview

Guidelines and code patterns for building Progressive Web Apps with service workers, caching, offline support and installability.

What it does: This skill supplies reference guidance for Progressive Web App development, covering web app manifest setup, service worker registration and lifecycle, and caching strategies such as cache first, network first and stale while revalidate. It also documents background sync, push notifications, offline detection, performance optimization, testing and best practices. It produces explanatory text and illustrative code snippets rather than generated files or runnable tooling.
When to use it: Use it when implementing or reviewing a web app that needs offline-first behavior, installability or service worker caching. It also fits questions about manifest configuration, background sync, push notifications or PWA audits.
Requirements: No scripts or assets ship with the skill; it is instructions only. Following its examples assumes a web project served over HTTPS, a browser with service worker support, and for push notifications a VAPID key pair and a server endpoint.

Progressive Web App Development Guidelines

You are an expert in building Progressive Web Applications with offline-first capabilities.

Core Principles

Design for offline-first experience
Implement proper caching strategies
Ensure fast loading and smooth performance
Follow web app manifest best practices
Provide native-like experience

Web App Manifest

json

{  "name": "My Progressive Web App",  "short_name": "MyPWA",  "description": "A description of your app",  "start_url": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#000000",  "icons": [    {      "src": "/icons/icon-192.png",      "sizes": "192x192",      "type": "image/png"    },    {      "src": "/icons/icon-512.png",      "sizes": "512x512",      "type": "image/png"    }  ]}

{  "name": "My Progressive Web App",  "short_name": "MyPWA",  "description": "A description of your app",  "start_url": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#000000",  "icons": [    {      "src": "/icons/icon-192.png",      "sizes": "192x192",      "type": "image/png"    },    {      "src": "/icons/icon-512.png",      "sizes": "512x512",      "type": "image/png"    }  ]}

Service Worker Registration

javascript

// Register service workerif ('serviceWorker' in navigator) {  window.addEventListener('load', async () => {    try {      const registration = await navigator.serviceWorker.register('/sw.js');      console.log('SW registered:', registration.scope);    } catch (error) {      console.error('SW registration failed:', error);    }  });}

// Register service workerif ('serviceWorker' in navigator) {  window.addEventListener('load', async () => {    try {      const registration = await navigator.serviceWorker.register('/sw.js');      console.log('SW registered:', registration.scope);    } catch (error) {      console.error('SW registration failed:', error);    }  });}

Service Worker Implementation

javascript

// sw.jsconst CACHE_NAME = 'v1';const STATIC_ASSETS = [  '/',  '/index.html',  '/styles.css',  '/app.js',  '/offline.html'];
// Install event - cache static assetsself.addEventListener('install', (event) => {  event.waitUntil(    caches.open(CACHE_NAME).then((cache) => {      return cache.addAll(STATIC_ASSETS);    })  );  self.skipWaiting();});
// Activate event - cleanup old cachesself.addEventListener('activate', (event) => {  event.waitUntil(    caches.keys().then((cacheNames) => {      return Promise.all(        cacheNames          .filter((name) => name !== CACHE_NAME)          .map((name) => caches.delete(name))      );    })  );  self.clients.claim();});
// Fetch event - serve from cache or networkself.addEventListener('fetch', (event) => {  event.respondWith(    caches.match(event.request).then((response) => {      return response || fetch(event.request);    }).catch(() => {      return caches.match('/offline.html');    })  );});

// sw.jsconst CACHE_NAME = 'v1';const STATIC_ASSETS = [  '/',  '/index.html',  '/styles.css',  '/app.js',  '/offline.html'];
// Install event - cache static assetsself.addEventListener('install', (event) => {  event.waitUntil(    caches.open(CACHE_NAME).then((cache) => {      return cache.addAll(STATIC_ASSETS);    })  );  self.skipWaiting();});
// Activate event - cleanup old cachesself.addEventListener('activate', (event) => {  event.waitUntil(    caches.keys().then((cacheNames) => {      return Promise.all(        cacheNames          .filter((name) => name !== CACHE_NAME)          .map((name) => caches.delete(name))      );    })  );  self.clients.claim();});
// Fetch event - serve from cache or networkself.addEventListener('fetch', (event) => {  event.respondWith(    caches.match(event.request).then((response) => {      return response || fetch(event.request);    }).catch(() => {      return caches.match('/offline.html');    })  );});

Caching Strategies

Cache First (Static Assets)

javascript

async function cacheFirst(request) {  const cached = await caches.match(request);  return cached || fetch(request);}

async function cacheFirst(request) {  const cached = await caches.match(request);  return cached || fetch(request);}

Network First (Dynamic Content)

javascript

async function networkFirst(request) {  try {    const response = await fetch(request);    const cache = await caches.open(CACHE_NAME);    cache.put(request, response.clone());    return response;  } catch {    return caches.match(request);  }}

async function networkFirst(request) {  try {    const response = await fetch(request);    const cache = await caches.open(CACHE_NAME);    cache.put(request, response.clone());    return response;  } catch {    return caches.match(request);  }}

Stale While Revalidate

javascript

async function staleWhileRevalidate(request) {  const cache = await caches.open(CACHE_NAME);  const cached = await cache.match(request);
  const fetchPromise = fetch(request).then((response) => {    cache.put(request, response.clone());    return response;  });
  return cached || fetchPromise;}

async function staleWhileRevalidate(request) {  const cache = await caches.open(CACHE_NAME);  const cached = await cache.match(request);
  const fetchPromise = fetch(request).then((response) => {    cache.put(request, response.clone());    return response;  });
  return cached || fetchPromise;}

Background Sync

javascript

// Register sync in main appasync function registerSync() {  const registration = await navigator.serviceWorker.ready;  await registration.sync.register('sync-data');}
// Handle sync in service workerself.addEventListener('sync', (event) => {  if (event.tag === 'sync-data') {    event.waitUntil(syncData());  }});
async function syncData() {  const data = await getQueuedData();  await fetch('/api/sync', {    method: 'POST',    body: JSON.stringify(data)  });}

// Register sync in main appasync function registerSync() {  const registration = await navigator.serviceWorker.ready;  await registration.sync.register('sync-data');}
// Handle sync in service workerself.addEventListener('sync', (event) => {  if (event.tag === 'sync-data') {    event.waitUntil(syncData());  }});
async function syncData() {  const data = await getQueuedData();  await fetch('/api/sync', {    method: 'POST',    body: JSON.stringify(data)  });}

Push Notifications

javascript

// Request permissionasync function requestNotificationPermission() {  const permission = await Notification.requestPermission();  if (permission === 'granted') {    const registration = await navigator.serviceWorker.ready;    const subscription = await registration.pushManager.subscribe({      userVisibleOnly: true,      applicationServerKey: PUBLIC_VAPID_KEY    });    // Send subscription to server  }}
// Handle push in service workerself.addEventListener('push', (event) => {  const data = event.data.json();  event.waitUntil(    self.registration.showNotification(data.title, {      body: data.body,      icon: '/icons/icon-192.png'    })  );});

// Request permissionasync function requestNotificationPermission() {  const permission = await Notification.requestPermission();  if (permission === 'granted') {    const registration = await navigator.serviceWorker.ready;    const subscription = await registration.pushManager.subscribe({      userVisibleOnly: true,      applicationServerKey: PUBLIC_VAPID_KEY    });    // Send subscription to server  }}
// Handle push in service workerself.addEventListener('push', (event) => {  const data = event.data.json();  event.waitUntil(    self.registration.showNotification(data.title, {      body: data.body,      icon: '/icons/icon-192.png'    })  );});

Offline Detection

javascript

// Check online statuswindow.addEventListener('online', () => {  console.log('Back online');  syncPendingData();});
window.addEventListener('offline', () => {  console.log('Offline mode');  showOfflineIndicator();});

// Check online statuswindow.addEventListener('online', () => {  console.log('Back online');  syncPendingData();});
window.addEventListener('offline', () => {  console.log('Offline mode');  showOfflineIndicator();});

Performance Optimization

Implement app shell architecture
Use lazy loading for routes and components
Optimize images with responsive formats
Minimize JavaScript bundle size
Use code splitting

Testing

Test offline functionality
Verify caching behavior
Test on various network conditions
Validate manifest and icons
Use Lighthouse for PWA audits

Best Practices

Serve over HTTPS
Provide meaningful offline experience
Handle service worker updates gracefully
Implement proper error handling
Add loading states and skeletons

Source and attribution

Source:mindrally/skillsinpwa-developmentat commit9718410

License: No license

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

Report or request removal

Pwa Development

Progressive Web App Development Guidelines

Core Principles

Web App Manifest

Service Worker Registration

Service Worker Implementation

Caching Strategies

Cache First (Static Assets)

Network First (Dynamic Content)

Stale While Revalidate

Background Sync

Push Notifications

Offline Detection

Performance Optimization

Testing

Best Practices

Source and attribution

More from mindrally/skills

Zustand State Management

Zod Schema Validation

Woocommerce

Wordpress

Websocket Development

Web Development

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices