services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
49080d82334d03fc7a05eb0ac2d62ab023d787f9
mtg-online-drafter/docs/development/devlog/2025-12-18-005000_fix_pwa_prompt.md
dnviti c8d2871126
All checks were successful
Build and Deploy / build (push) Successful in 1m25s
Details
feat: Implement PWA install prompt with platform-specific handling and dismissal persistence.
2025-12-18 00:55:45 +01:00

1.9 KiB
Raw Blame History

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

  • Register SW explicitly in main.tsx
  • Capture beforeinstallprompt globally
  • Add iOS specific UI
  • Completed: 2025-12-18