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 @@

- Voilà, c'est quand même mieux comme ça ! + Le bouton d'installation apparaîtra automatiquement quand tu seras connecté

@@ -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) })