Repository navigation
Install-as-PWA onboarding: iOS Share sheet + Android native prompt - #10
Merged
Merged
Conversation
New usePwaInstall composable (singleton, same pattern as useToast/ useUserLocation) + InstallPwaSheet.vue, mounted once in App.vue: - Auto-shows ~1.6s after the splash finishes, once, on iOS Safari and Android — never on desktop, never if already running standalone (installed), never again after being dismissed once (localStorage) - iOS: no native install API exists on Safari, so it walks through the real steps — Share -> Add to Home Screen -> Add — with icons matching Safari's actual glyphs - Android (and desktop Chrome/Edge, as a bonus): captures the real beforeinstallprompt event and shows a one-tap 'Install App' button that triggers the browser's native install dialog directly; falls back to manual '⋮ menu -> Install app' steps if the event hasn't fired (e.g. Firefox Android, or criteria not yet met) - Also reachable any time via a new 'Install App' row at the top of Profile -> Settings (hidden once already installed) Fixed a real bug before shipping: initially reused the class names 'modal-overlay'/'modal' assuming they'd inherit AddPlaceModal's position:fixed/z-index — Vue's <style scoped> does NOT cross component boundaries even with matching class names (only cartoon.scss's global color rules were actually applying), so the sheet had no real position/z-index and its bottom button was unclickable, intercepted by the bottom tab bar (z-index 1100) sitting on top of it. Fixed with proper scoped positioning (z-index 2100) declared in the component's own styles. Verified via a real (non-forced) Playwright click that failed loudly before the fix and succeeds now. Verified end-to-end: iOS auto-show + dismiss + reload-suppressed; Android auto-show + Profile-triggered fallback steps; Android with a simulated beforeinstallprompt showing and firing the native button.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A friendly 'Install Pinna' card that teaches users how to add the app to their home screen — auto-shown once on first launch, and reachable anytime from Profile → Settings.
iOS (Safari has no install API)
Real step-by-step instructions: Share → Add to Home Screen → Add, with icons matching Safari's actual glyphs.
Android (and desktop Chrome/Edge as a bonus)
Captures the real
beforeinstallpromptevent — when available, one tap on Install App triggers the browser's actual native install dialog. Falls back to manual ⋮ menu → Install app steps when the event hasn't fired (e.g. Firefox Android).Behavior
A real bug caught before shipping
Initially reused AddPlaceModal's
modal-overlay/modalclass names assuming they'd inherit its positioning — but Vue's<style scoped>doesn't cross component boundaries even with matching class names (only cartoon.scss's global color rules were actually reaching it). The sheet had no realposition/z-index, so its bottom button was silently unclickable — intercepted by the bottom tab bar sitting on top of it. Fixed with proper scoped positioning; verified with a real (non-forced) Playwright click that failed loudly before the fix and succeeds cleanly now.Verified end-to-end: iOS auto-show → dismiss → reload-suppressed ✔; Android auto-show + Profile fallback ✔; simulated
beforeinstallprompt→ native button shows and fires ✔. Build clean, 15/15 tests green.