fix(pwa)

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>