void-install-prompt-ux

Implements custom PWA install prompts by capturing and deferring the beforeinstallprompt event.

Updated May 29, 2026
One-click install
npx skills add https://github.com/voidcorp-core/void-harness --skill void-install-prompt-ux-voidcorp-core
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: void-install-prompt-ux
Source: https://github.com/voidcorp-core/void-harness/tree/main/packages/cli/core-assets/packs/pack-pwa/skills/void-install-prompt-ux
Command: npx skills add https://github.com/voidcorp-core/void-harness --skill void-install-prompt-ux-voidcorp-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? The browser's default PWA install prompt fires at unpredictable times with generic UI, and once dismissed it may not reappear for 90 days, causing users to miss or reflexively decline installation. This Skill replaces that behavior with a controlled flow: capture the beforeinstallprompt event, defer it, and surface a custom install button only after meaningful engagement signals. ## Core Features & Use Cases - Event capture and deferral: Intercept beforeinstallprompt, prevent the browser default, and trigger the native prompt later from a custom button click. - Engagement-based timing: Show the install button only after thresholds like 2+ sessions, 30+ seconds in-session, and a 7-day cooldown after dismissal. - Dismissal recovery and iOS fallback: Store dismissal timestamps in localStorage for cooldown logic, and provide a manual "Add to Home Screen" guide for Safari iOS, which never fires beforeinstallprompt. - Use Case: A React/Next.js PWA wants to convert engaged users into installed users without annoying first-time visitors; this Skill provides the component code, timing thresholds, and placement patterns to do it. ## Quick Start Add an install button to my PWA that captures the beforeinstallprompt event and only appears after the user's second session.

Frequently Asked Questions about void-install-prompt-ux

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

FAQPage Schema
How do I customize the PWA install prompt in React?

Listen for the beforeinstallprompt event, call preventDefault() to stop the browser default, and store the event in state. Later, call the stored event's prompt() method from a button click to show the native install dialog at your chosen moment.

When should I show the PWA install button to users?

Show it only after engagement signals such as 2 or more sessions, 30 or more seconds in the current session, or completion of a key action. Combine thresholds and enforce a 7-day cooldown after dismissal to avoid pestering users.

Does beforeinstallprompt work on iOS Safari?

No, Safari on iOS never fires beforeinstallprompt. Provide a fallback help page instructing users to tap Share then Add to Home Screen, so iOS users still have an install path.

Why is my PWA install prompt not appearing?

The prompt requires a valid web app manifest and a registered service worker, and prompt() must be called from a user gesture. Check installability in DevTools under Application, Manifest, and verify Lighthouse reports the app as installable.

Can I re-prompt users who dismissed the PWA install dialog?

Chrome will not refire beforeinstallprompt for roughly 90 days after dismissal. Store the dismissal timestamp, hide your button for 7 to 14 days, and only resurface it if the event fires again and the user remains engaged.