/* === Creative PWA Install Button Style === */ .install-button-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; cursor: pointer; background: linear-gradient(145deg, #0056b3, #007bff); color: white; border-radius: 50px; box-shadow: 0 4px 15px rgba(0, 86, 179, 0.4); transition: all 0.3s ease-in-out; animation: bounceIn 0.6s ease; } .install-button-container:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 86, 179, 0.6); } .install-button-content { display: flex; align-items: center; justify-content: center; padding: 12px 20px; } .install-button-icon { width: 24px; height: 24px; margin-right: 10px; } .install-button-text { font-size: 16px; font-weight: bold; line-height: 1; } /* Animation for the button to appear */ @keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } /* For mobile devices, make it a bit smaller */ @media (max-width: 600px) { .install-button-container { bottom: 15px; right: 15px; } .install-button-content { padding: 10px 15px; } .install-button-text { font-size: 14px; } .install-button-icon { width: 20px; height: 20px; } } // === Smart PWA Install Button Logic === document.addEventListener('DOMContentLoaded', () => { let deferredPrompt; const installButton = document.getElementById('custom-install-button'); // This event fires when the app is installable. window.addEventListener('beforeinstallprompt', (e) => { // Prevent the default browser prompt e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; // Show our custom install button only if the app is not already installed if (!isAppInstalled()) { installButton.style.display = 'block'; } }); // Our button's click event handler installButton.addEventListener('click', async () => { if (deferredPrompt) { // Show the browser's install prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt const { outcome } = await deferredPrompt.userChoice; if (outcome === 'accepted') { console.log('User accepted the A2HS prompt'); // Hide the button as the user has accepted installButton.style.display = 'none'; } else { console.log('User dismissed the A2HS prompt'); } // We can only use the prompt once, so clear it. deferredPrompt = null; } }); // This event fires when the app is successfully installed window.addEventListener('appinstalled', () => { console.log('PWA was installed'); // Hide the install button installButton.style.display = 'none'; deferredPrompt = null; }); // Function to check if the app is already installed function isAppInstalled() { // For Android if (window.matchMedia('(display-mode: standalone)').matches) { return true; } // For iOS if (window.navigator.standalone) { return true; } return false; } // Hide button immediately if app is already running in standalone mode if (isAppInstalled()) { installButton.style.display = 'none'; } });