let deferredPrompt; // Détecter l'événement beforeinstallprompt window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferredPrompt = e; // Afficher la bannière d'installation showInstallBanner(); }); // Afficher la bannière d'installation function showInstallBanner() { // Créer la bannière const banner = document.createElement('div'); banner.id = 'pwa-install-banner'; banner.style.cssText = ` position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); color: white; padding: 15px 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(251, 146, 60, 0.3); z-index: 9999; display: flex; align-items: center; gap: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; animation: slideUp 0.5s ease; max-width: 90%; margin: 0 auto; `; banner.innerHTML = `

📱 Installer Elyra

`; document.body.appendChild(banner); // Gérer le clic sur "Installer" document.getElementById('install-btn').addEventListener('click', () => { if (deferredPrompt) { deferredPrompt.prompt(); deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the install prompt'); } else { console.log('User dismissed the install prompt'); } deferredPrompt = null; banner.remove(); }); } }); // Gérer le clic sur "Plus tard" document.getElementById('dismiss-btn').addEventListener('click', () => { banner.remove(); localStorage.setItem('pwa-install-dismissed', 'true'); }); // Vérifier si l'utilisateur a déjà refusé if (localStorage.getItem('pwa-install-dismissed') === 'true') { banner.remove(); } } // Ajouter les animations CSS const style = document.createElement('style'); style.textContent = ` @keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(100px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @media (max-width: 640px) { #pwa-install-banner { bottom: 10px; left: 10px; right: 10px; transform: none; max-width: none; flex-direction: column; text-align: center; gap: 10px; } #pwa-install-banner button { font-size: 12px; padding: 6px 12px; } } `; document.head.appendChild(style); if ('serviceWorker' in navigator) { // withPWA s'occupe de l'enregistrement, on a juste besoin que ce code soit là ! }

Rejoignez Elyra

Créer votre compte

Création du compte

Pourquoi Elyra ?