What this prompt does
This prompt converts an existing [framework] web app into a full Progressive Web App. It works through the whole PWA surface in order: a Web App Manifest with proper icons and [shortcut_count] shortcuts, a service worker using a [caching_strategy] strategy via Workbox, an offline experience with Background Sync, a custom install prompt, push notifications, and app-like navigation touches. Because it sequences manifest, service worker, then offline behavior, you end up with a PWA that genuinely helps on flaky connections rather than one that just passes a checklist.
The variables tune the caching and UX tradeoffs. [caching_strategy], [api_cache_strategy], and [cache_duration] decide what is served from cache versus network and for how long, which directly shapes offline usefulness and content freshness. [install_prompt_trigger] delays the install banner until the user has shown intent rather than nagging on first visit, [push_service] and [notification_types] define re-engagement, and [transition_method] plus [use_wco] add the app-like feel for installed instances. The manifest's [display_mode] and [brand_colors] round out the installed experience so it looks like a native app rather than a browser tab.
When to use it
- Making an existing app installable on home screens and the desktop.
- Adding offline support so users keep working through flaky or absent connectivity.
- Queuing failed writes and replaying them with Background Sync when connectivity returns.
- Designing a value-first install prompt instead of nagging on first visit.
- Adding push notifications for re-engagement with clear permission timing.
- Giving installed instances app-like navigation, transitions, and window controls.
Example output
You get a PWA implementation plan with code: a manifest.json with name fields, [display_mode], theme and background colors from [brand_colors], a full icon set with maskable variants, and [shortcut_count] shortcuts; a Workbox service worker doing app-shell precaching plus runtime caching with [api_cache_strategy] and a [cache_duration] max-age; offline detection with IndexedDB-queued writes and Background Sync; a beforeinstallprompt handler firing after [install_prompt_trigger]; push setup via [push_service] for [notification_types]; and app-like touches using [transition_method].
Pro tips
- Match
[caching_strategy]to content type: stale-while-revalidate suits pages, cache-first suits static assets, network-first suits fresh API data. - Keep
[cache_duration]honest; long durations boost offline reach but risk serving stale content, so pair it with a visible last-updated timestamp. - Delay the install banner until
[install_prompt_trigger]is met; prompting on first visit tanks acceptance rates. - Request push permission with a value proposition, never on first load, or users will permanently deny
[notification_types]. - Generate every icon size with maskable variants; missing sizes cause ugly cropping on some platforms.
- Treat
[use_wco]window-controls-overlay as desktop polish and feature-detect it rather than assuming support. - Show a last-updated timestamp alongside cached content so users on the offline path know how fresh what they are seeing actually is.
