#244
Native prompt
The install prompt in native mode, triggered by a stand-in beforeinstallprompt event fired on mount.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Native prompt" pattern (@codeatlasdev/ui demo #244, feedback/install-prompt) in my app.
Call get_demo({ ids: ["#244"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Offering an install banner on browsers that expose the beforeinstallprompt event, such as Chrome and Edge.
Keep these library parts, with the props and tokens the demo uses:
- InstallPrompt from "@codeatlasdev/ui"
Behaviour to keep:
- `<InstallPrompt mode="native" storageKey="demo-install-native" />`
- `onMount` dispatches `new Event('beforeinstallprompt', { cancelable: true })` on the window
- The fake event gets `prompt: () => Promise.resolve()` and `userChoice: Promise.resolve({ outcome: 'dismissed' })`
- Wrapped in `<div class="stage">` with `min-height: calc(var(--ca-space-8) * 3)`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- InstallPrompt
@codeatlasdev/ui
How it is built
- `<InstallPrompt mode="native" storageKey="demo-install-native" />`
- `onMount` dispatches `new Event('beforeinstallprompt', { cancelable: true })` on the window
- The fake event gets `prompt: () => Promise.resolve()` and `userChoice: Promise.resolve({ outcome: 'dismissed' })`
- Wrapped in `<div class="stage">` with `min-height: calc(var(--ca-space-8) * 3)`
Related
Loading source.