CRA PWA Install Readiness

Create an install-ready experience for a TypeScript React app that uses the CRA template's manifest and bundled PWA icons.

Capabilities

Manifest loading and validation

• Fetches /manifest.json, parsing the CRA-provided icons (logo192.png, logo512.png) and converting their sizes strings to numeric dimensions; returns manifest data (name, short_name, start_url, display, theme_color, background_color, icons) and includes status text when the response is not ok @test
• Picks the largest available icon (preferring 512px then 192px) and exposes alt text using manifest short_name or name @test

Document metadata wiring

• Ensures <link rel="manifest" href="/manifest.json"> exists in the document head and creates it if missing without duplicating existing links @test
• Sets or updates <meta name="theme-color"> to the manifest theme_color, falling back to background_color when the theme color is absent @test

Install prompt experience

• Renders an install call-to-action component that shows manifest name, short name, and the chosen icon; it waits to show the install button until a beforeinstallprompt event is captured, then calls the stored prompt() on click and surfaces the userChoice outcome via a callback @test

Implementation

@generates

API

export type PwaIcon = { src: string; size: number; type: string };
export type PwaManifest = {
  name: string;
  shortName: string;
  startUrl: string;
  display: string;
  themeColor?: string;
  backgroundColor?: string;
  icons: PwaIcon[];
};

export function loadManifest(): Promise<PwaManifest>;

export function selectIcon(manifest: PwaManifest): { icon: PwaIcon; alt: string };

export function applyManifestMetadata(manifest: PwaManifest): void;

export type InstallResult = { outcome: 'accepted' | 'dismissed'; platform?: string };

export function useInstallPrompt(): {
  canPrompt: boolean;
  promptInstall(): Promise<InstallResult>;
  lastResult: InstallResult | null;
};

export function PwaInstallCard(props: {
  manifest: PwaManifest;
  onInstallResult(result: InstallResult): void;
}): JSX.Element;

Dependencies { .dependencies }

cra-template-typescript { .dependency }

Provides the CRA TypeScript scaffold with public/manifest.json, logo192.png, and logo512.png used for installable PWA metadata. @satisfied-by