Task 5.24: PWA — vite-plugin-pwa with autoUpdate, manifest, workbox caching, PWAInstallPrompt component, notification helper, SVG icons, 6 tests

2026-07-24 00:01:53 +02:00
parent d54a87cf84
commit 96e183bab2
11 changed files with 4034 additions and 3 deletions
@@ -0,0 +1,89 @@
+/**
+ * PWA Install Prompt — shows install button when PWA is installable (Task 5.24).
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Download, X } from 'lucide-react';
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+
+const DISMISS_KEY = 'leocrm_pwa_install_dismissed';
+
+export function PWAInstallPrompt() {
+  const { t } = useTranslation();
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const dismissed = localStorage.getItem(DISMISS_KEY);
+    if (dismissed) return;
+
+    const handler = (e: Event) => {
+      e.preventDefault();
+      setDeferredPrompt(e as BeforeInstallPromptEvent);
+      setVisible(true);
+    };
+
+    window.addEventListener('beforeinstallprompt', handler);
+    return () => window.removeEventListener('beforeinstallprompt', handler);
+  }, []);
+
+  const handleInstall = useCallback(async () => {
+    if (!deferredPrompt) return;
+    await deferredPrompt.prompt();
+    const choice = await deferredPrompt.userChoice;
+    if (choice.outcome === 'accepted') {
+      setVisible(false);
+    }
+    setDeferredPrompt(null);
+  }, [deferredPrompt]);
+
+  const handleDismiss = useCallback(() => {
+    localStorage.setItem(DISMISS_KEY, '1');
+    setVisible(false);
+  }, []);
+
+  if (!visible || !deferredPrompt) return null;
+
+  return (
+    <div
+      className="fixed bottom-4 right-4 z-50 bg-white rounded-lg shadow-lg border border-secondary-200 p-4 max-w-sm"
+      data-testid="pwa-install-prompt"
+    >
+      <div className="flex items-start gap-3">
+        <Download className="w-5 h-5 text-primary-600 mt-0.5" />
+        <div className="flex-1">
+          <p className="font-medium text-secondary-900">{t('pwa.installTitle')}</p>
+          <p className="text-sm text-secondary-600 mt-1">{t('pwa.installDescription')}</p>
+          <div className="flex gap-2 mt-3">
+            <button
+              className="px-3 py-1.5 bg-primary-600 text-white rounded-md text-sm font-medium hover:bg-primary-700"
+              onClick={handleInstall}
+              data-testid="pwa-install-btn"
+            >
+              {t('pwa.install')}
+            </button>
+            <button
+              className="px-3 py-1.5 text-secondary-600 text-sm hover:bg-secondary-100 rounded-md"
+              onClick={handleDismiss}
+              data-testid="pwa-dismiss-btn"
+            >
+              {t('pwa.dismiss')}
+            </button>
+          </div>
+        </div>
+        <button
+          className="text-secondary-400 hover:text-secondary-600"
+          onClick={handleDismiss}
+          aria-label="Close"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}