From e32b1ce04e03999f9b8970b407d9f31f19dd7e81 Mon Sep 17 00:00:00 2001
From: EvanChal <naev79@gmail.com>
Date: Sun, 25 Jan 2026 23:24:25 +0100
Subject: [PATCH] fix(pwa)

---
 frontend/src/layouts/DefaultLayout.vue | 71 +++++++++++++++++---------
 frontend/src/views/Register.vue        | 48 +++++++++++------
 2 files changed, 81 insertions(+), 38 deletions(-)

diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
index 02464e0..215ac7b 100644
--- a/frontend/src/layouts/DefaultLayout.vue
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -129,9 +129,9 @@
                   <!-- Installer l'app -->
                   <button
                     @click="handleInstallApp"
-                    :disabled="isPWAInstalled || !canInstall"
+                    :disabled="isPWAInstalled"
                     class="block w-full text-left px-4 py-2 text-sm transition-colors"
-                    :class="isPWAInstalled || !canInstall 
+                    :class="isPWAInstalled 
                       ? 'text-gray-400 cursor-not-allowed' 
                       : 'text-gray-700 hover:bg-gray-100'"
                   >
@@ -307,6 +307,7 @@ const isMobileMenuOpen = ref(false)
 const deferredPrompt = ref(null)
 const isPWAInstalled = ref(false)
 const canInstall = ref(false)
+const isMobile = ref(false)
 
 const user = computed(() => authStore.user)
 const notifications = computed(() => authStore.notifications)
@@ -343,11 +344,21 @@ async function handleNotificationClick(notification) {
 }
 
 // PWA Installation logic
+function checkIfMobile() {
+  isMobile.value = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || 
+                   window.innerWidth < 768
+}
+
 function checkPWAInstalled() {
   // Vérifier si l'app est déjà installée (mode standalone)
   isPWAInstalled.value = window.matchMedia('(display-mode: standalone)').matches || 
                          window.navigator.standalone === true ||
                          document.referrer.includes('android-app://')
+  
+  // Sur mobile, permettre l'installation même sans beforeinstallprompt
+  if (isMobile.value && !isPWAInstalled.value) {
+    canInstall.value = true
+  }
 }
 
 function handleBeforeInstallPrompt(e) {
@@ -359,35 +370,47 @@ function handleBeforeInstallPrompt(e) {
 }
 
 async function handleInstallApp() {
-  if (!deferredPrompt.value || isPWAInstalled.value) {
+  if (isPWAInstalled.value) {
     return
   }
 
-  try {
-    showUserMenu.value = false
-    
-    // Afficher le prompt d'installation
-    deferredPrompt.value.prompt()
-    
-    // Attendre la réponse de l'utilisateur
-    const { outcome } = await deferredPrompt.value.userChoice
-    
-    if (outcome === 'accepted') {
-      console.log('✅ PWA installée avec succès')
-      isPWAInstalled.value = true
-    } else {
-      console.log('❌ Installation PWA annulée')
+  if (deferredPrompt.value) {
+    try {
+      showUserMenu.value = false
+      
+      // Afficher le prompt d'installation
+      deferredPrompt.value.prompt()
+      
+      // Attendre la réponse de l'utilisateur
+      const { outcome } = await deferredPrompt.value.userChoice
+      
+      if (outcome === 'accepted') {
+        console.log('✅ PWA installée avec succès')
+        isPWAInstalled.value = true
+      } else {
+        console.log('❌ Installation PWA annulée')
+      }
+      
+      // Réinitialiser
+      deferredPrompt.value = null
+      canInstall.value = false
+    } catch (error) {
+      console.error('Erreur lors de l\'installation:', error)
+    }
+  } else if (isMobile.value) {
+    // Sur mobile sans beforeinstallprompt, afficher les instructions
+    showUserMenu.value = false
+    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+    if (isIOS) {
+      alert('Sur iOS :\n1. Appuyez sur le bouton de partage (□↑) en bas de l\'écran\n2. Faites défiler et sélectionnez "Sur l\'écran d\'accueil"\n3. Appuyez sur "Ajouter"')
+    } else {
+      alert('Sur Android :\n1. Appuyez sur le menu (⋮) en haut à droite\n2. Sélectionnez "Ajouter à l\'écran d\'accueil" ou "Installer l\'application"\n3. Confirmez l\'installation')
     }
-    
-    // Réinitialiser
-    deferredPrompt.value = null
-    canInstall.value = false
-  } catch (error) {
-    console.error('Erreur lors de l\'installation:', error)
   }
 }
 
 onMounted(async () => {
+  checkIfMobile()
   await authStore.fetchCurrentUser()
   
   if (authStore.isAuthenticated) {
@@ -411,10 +434,12 @@ onMounted(async () => {
   
   // Écouter les changements de display mode
   window.matchMedia('(display-mode: standalone)').addEventListener('change', checkPWAInstalled)
+  window.addEventListener('resize', checkIfMobile)
 })
 
 onBeforeUnmount(async () => {
   window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.removeEventListener('resize', checkIfMobile)
   
   // Arrêter le polling des notifications
   const notificationService = (await import('@/services/notificationService')).default
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index 97f729a..88d93fe 100644
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -267,7 +267,7 @@
               Une fois connecté, tu pourras installer l'app depuis le menu de ton profil
             </p>
             <button
-              v-if="deferredPrompt"
+              v-if="deferredPrompt || isMobile"
               @click="handleInstallApp"
               class="w-full sm:w-auto bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105 text-sm sm:text-base"
             >
@@ -275,11 +275,11 @@
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                 </svg>
-                <span>Installer l'app maintenant</span>
+                <span>{{ deferredPrompt ? 'Installer l\'app maintenant' : 'Voir les instructions' }}</span>
               </div>
             </button>
             <p v-else class="text-xs sm:text-sm text-gray-500">
-              Voilà, c'est quand même mieux comme ça !
+              Le bouton d'installation apparaîtra automatiquement quand tu seras connecté
             </p>
           </div>
         </div>
@@ -439,33 +439,51 @@ async function handleRegister() {
 }
 
 // PWA Installation
+const isMobile = ref(false)
+
+function checkIfMobile() {
+  isMobile.value = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || 
+                   window.innerWidth < 768
+}
+
 function handleBeforeInstallPrompt(e) {
   e.preventDefault()
   deferredPrompt.value = e
 }
 
 async function handleInstallApp() {
-  if (!deferredPrompt.value) return
-
-  try {
-    deferredPrompt.value.prompt()
-    const { outcome } = await deferredPrompt.value.userChoice
-    
-    if (outcome === 'accepted') {
-      console.log('✅ PWA installée avec succès')
+  if (deferredPrompt.value) {
+    try {
+      deferredPrompt.value.prompt()
+      const { outcome } = await deferredPrompt.value.userChoice
+      
+      if (outcome === 'accepted') {
+        console.log('✅ PWA installée avec succès')
+      }
+      
+      deferredPrompt.value = null
+    } catch (error) {
+      console.error('Erreur lors de l\'installation:', error)
+    }
+  } else if (isMobile.value) {
+    // Sur mobile sans beforeinstallprompt, afficher les instructions
+    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+    if (isIOS) {
+      alert('Sur iOS :\n1. Appuyez sur le bouton de partage (□↑) en bas de l\'écran\n2. Faites défiler et sélectionnez "Sur l\'écran d\'accueil"\n3. Appuyez sur "Ajouter"')
+    } else {
+      alert('Sur Android :\n1. Appuyez sur le menu (⋮) en haut à droite\n2. Sélectionnez "Ajouter à l\'écran d\'accueil" ou "Installer l\'application"\n3. Confirmez l\'installation')
     }
-    
-    deferredPrompt.value = null
-  } catch (error) {
-    console.error('Erreur lors de l\'installation:', error)
   }
 }
 
 onMounted(() => {
+  checkIfMobile()
   window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.addEventListener('resize', checkIfMobile)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.removeEventListener('resize', checkIfMobile)
 })
 </script>