pwa-storefront

Implement installable PWA storefronts with service workers, offline caching, and push notifications.

3|1|Updated Mar 21, 2026
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill pwa-storefront-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pwa-storefront
Source: https://github.com/tomtoto757/ecomm-ai-team/tree/main/skills/platform-integrations-infrastructure/finsilabs/headless-modern/pwa-storefront
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill pwa-storefront-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires workbox-webpack-plugin, vite-plugin-pwa, web-push, idb.

What problem does it solve? Mobile shoppers on unreliable connections lose access to your store entirely, and without a native app you miss re-engagement channels like home screen installation and push notifications. This Skill provides the complete implementation patterns for turning a headless ecommerce storefront into an installable Progressive Web App. ## Core Features & Use Cases - Service Worker Caching: Configure Workbox strategies (CacheFirst, StaleWhileRevalidate, NetworkFirst) for product images, catalog APIs, and collections, with background sync for offline cart operations. - Web App Manifest & Installability: Create a manifest.json with maskable icons, share targets, and iOS meta tags so the store passes Lighthouse PWA audits and shows Add to Home Screen prompts. - Push Notifications & Offline UX: Implement Web Push with VAPID keys via web-push, an offline fallback page backed by IndexedDB, and a useOnlineStatus React hook. - Use Case: An outdoor gear retailer whose customers shop from areas with poor cell coverage uses this Skill to cache the product catalog offline, queue cart changes with background sync, and send order status push notifications. ## Quick Start Use the pwa-storefront skill to add a Workbox service worker, web app manifest, and order update push notifications to my Vite storefront.

Frequently Asked Questions about pwa-storefront

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add offline support to an ecommerce storefront?▼

Register a service worker with Workbox and apply StaleWhileRevalidate to product API routes and CacheFirst to product images. Precache an offline fallback page and serve it via setCatchHandler when navigation requests fail.

How to implement web push notifications for order updates?▼

Use the web-push package server-side with VAPID keys configured via setVapidDetails, then send notifications with Promise.allSettled to all subscribed devices. Client-side, call pushManager.subscribe with userVisibleOnly true and the VAPID public key converted to a Uint8Array.

Which Workbox caching strategy should product APIs use?▼

Product catalog APIs should use StaleWhileRevalidate so users see cached content immediately while fresh data loads in the background. Cart and checkout routes must never be cached; use NetworkOnly or NetworkFirst with BackgroundSyncPlugin for offline cart writes.

Does iOS support PWA push notifications?▼

iOS supports Web Push only on iOS 16.4 or later and only when the PWA is installed to the Home Screen with standalone display mode. Users browsing in Safari without installing the app cannot receive push notifications.

Why is my PWA not installable in Lighthouse audit?▼

Installability requires HTTPS, a valid manifest with a 512x512 maskable icon, a registered service worker, and a start_url that responds with HTTP 200. Check the manifest link tag, theme-color meta, and service worker registration in DevTools.

Why does my service worker not update after deployment?▼

Set registerType to autoUpdate in vite-plugin-pwa and call skipWaiting in the service worker so the new version takes control immediately. Version your cache names so stale assets are purged, and show a new version available toast to users.