feat: Implement PWA install prompt with platform-specific handling and dismissal persistence.
All checks were successful
Build and Deploy / build (push) Successful in 1m25s

This commit is contained in:
2025-12-18 00:55:45 +01:00
parent 60db2a91df
commit c8d2871126
12 changed files with 3734 additions and 2 deletions

View File

@@ -0,0 +1,23 @@
# PWA Install Prompt Implementation Plan
## Objective
Implement a user interface that prompts the user to install the application as a PWA on supported devices (primarily Android/Chrome).
## Tasks
1. Create `src/client/src/components/PWAInstallPrompt.tsx` that:
- Listens for `beforeinstallprompt` event.
- Displays a custom UI (toast/banner) when the event is captured.
- Calls `prompt()` on the event object when the user clicks "Install".
- Handles the user's choice.
2. Integrate `PWAInstallPrompt` into `App.tsx`.
3. Verify `vite.config.ts` PWA settings (already done, looks good).
## Implementation Details
- The component will use a fixed position styling (bottom right/center) to be noticeable but not blocking.
- It will use existing design system (Tailwind).
## Status
- [x] Create Component
- [x] Integrate into App
- [x] Update Config
- **Completed**: 2025-12-18

View File

@@ -0,0 +1,33 @@
# Fix PWA Install Prompt Implementation Plan
## Objective
Ensure the PWA install prompt appears reliably on mobile devices, addressing potential issues with event timing, iOS compatibility, and explicit Service Worker registration.
## Root Causes to Address
1. **Late Event Listener**: The `beforeinstallprompt` event might fire before the React component mounts. We need to capture it globally as early as possible.
2. **Missing Service Worker Registration**: While `vite-plugin-pwa` can auto-inject, explicit registration in `main.tsx` ensures it's active and handles updates.
3. **iOS Compatibility**: iOS does not support `beforeinstallprompt`. We must detect iOS and show specific "Share -> Add to Home Screen" instructions.
4. **Secure Context**: PWA features require HTTPS. While we can't force this on the user's network, we can ensure the app behaves best-effort and maybe warn if needed (skipped for now to avoid noise, focusing on logical fixes).
## Tasks
1. **Update `src/client/src/main.tsx`**:
- Import `registerSW` from `virtual:pwa-register`.
- Add a global `window` event listener for `beforeinstallprompt` immediately upon script execution to capture the event.
- Expose the captured event on `window` (or a global store) so the React component can consume it.
2. **Update `src/client/src/components/PWAInstallPrompt.tsx`**:
- Check `window.deferredInstallPrompt` (or similar) on mount.
- Add User Agent detection for iOS (iPhone/iPad/iPod).
- If iOS, display a custom "Add to Home Screen" instruction banner.
- If Android/Desktop, use the captured prompt.
3. **Docs**: Update devlog.
## Technical Details
- **Global Property**: `window.deferredInstallPrompt`
- **iOS Detection**: Regex on `navigator.userAgent` looking for `iPhone|iPad|iPod` (and not `MSStream`).
## Status
- [x] Register SW explicitly in main.tsx
- [x] Capture `beforeinstallprompt` globally
- [x] Add iOS specific UI
- **Completed**: 2025-12-18

View File

@@ -0,0 +1,20 @@
# Persist PWA Prompt Dismissal
## Objective
Ensure the PWA install prompt honors the user's previous interactions. If the user dismisses the prompt (clicks X) or initiates the install flow, the prompt should not appear again in subsequent sessions.
## Implementation Details
1. **Storage**: Use `localStorage` key `pwa_prompt_dismissed` (value: 'true').
2. **Logic Update** in `PWAInstallPrompt.tsx`:
- On mount: Check if `localStorage.getItem('pwa_prompt_dismissed') === 'true'`. If so, return `null` immediately.
- On Dismiss (X click): Set `localStorage.setItem('pwa_prompt_dismissed', 'true')` and hide UI.
- On Install Click: Set `localStorage.setItem('pwa_prompt_dismissed', 'true')` immediately. Even if they cancel the native dialog, we respect their choice to have interacted with it once. (Or should we? The user said "after a use choice". I will assume entering the flow counts).
## Refinements
- We might want to allow re-prompting after a long time (e.g., storing a timestamp), but the request is simple: "do not show... after a use choice". I will stick to simple boolean persistence for now.
## Status
- [x] Add logic to check/set `pwa_prompt_dismissed`
- [x] Update dismissal (X button) logic
- [x] Update install logic
- **Completed**: 2025-12-18