All use cases

Turn a Web App into a PWA

Installable app experience.

Workflows
Prompt
Convert this project into a professional, store-ready PWA. Implementation requirements: 1) Generate pixel-perfect PNG assets from the master SVG for all Android densities (mdpi to xxxhdpi) and iOS sizes, placing them in a structured `public/icons` directory (android/, ios/, maskable/). 2) Update `manifest.json` to reference these specific PNG files with correct sizes and purposes ("any" vs "maskable"), avoiding SVG-only icons to prevent Android blank icon issues. 3) Implement theme-adaptive favicons and meta tags in the layout (light/dark mode support). 4) Configure the service worker to precache all generated icon assets. 5) Ensure `display_override` includes `window-controls-overlay` for desktop polish.
Use this

Why this exists

Your web app already works in the browser, but "open a tab and remember the URL" is not how anyone treats software they rely on. A real PWA installs to the home screen, launches without browser chrome, and shows a crisp icon instead of a screenshot thumbnail. Most half-done attempts fail on one boring detail: Android renders a blank icon when the manifest points at an SVG, and the illusion breaks. This blueprint does the unglamorous asset work properly, so your app earns its home-screen spot.

What the agent does

Starting from your master SVG, the agent turns this project into a store-ready installable app: pixel-perfect PNG icons for every Android density (mdpi through xxxhdpi) and every iOS size, organized into a public/icons directory with android, ios, and maskable folders. It rewrites manifest.json to reference those exact PNGs with correct sizes and purposes, "any" versus "maskable", avoiding the SVG-only trap that leaves Android blank. It adds theme-adaptive favicons and meta tags for light and dark mode, configures the service worker to precache every icon, and sets display_override to window-controls-overlay for desktop polish.

You watch it happen in the task workspace: the agent generates the assets, wires the manifest and service worker, and confirms the app is installable before handing it back. The code lands on a branch in your repository with a pull request ready.

Make it yours

The first pass covers the essentials; you steer the rest with plain follow-up messages:

  • "Add a splash screen that matches my brand color."
  • "Make it work offline with a cached fallback page."
  • "Add an install prompt button in the header."
  • "Generate a monochrome icon for iOS tinted mode."

Each follow-up wakes the same repository and the agent continues on its own code.

FAQ

Will it actually pass install checks? That's the point of the icon and manifest work; the agent targets what browsers check before offering to install.

Do I lose my existing site? No, it stays as it is; the PWA layer is added on top, so the same app simply becomes installable.

Why PNGs instead of one SVG? Because Android quietly shows a blank icon for SVG-only manifests, so the agent ships real PNGs at every size.

Turn a Web App into a PWA | OutcomeDev Use Cases