let deferredPrompt; let installButton; // Service Worker Registration if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { console.log('SW registered: ', registration); }) .catch(function(registrationError) { console.log('SW registration failed: ', registrationError); }); }); } // PWA Install Prompt Handler window.addEventListener('beforeinstallprompt', (e) => { console.log('beforeinstallprompt fired'); e.preventDefault(); deferredPrompt = e; // Show install button/banner after a delay setTimeout(() => { showInstallPromotion(); }, 3000); }); function showInstallPromotion() { // Check if user hasn't dismissed the prompt recently const lastDismissed = localStorage.getItem('pwa-install-dismissed'); const now = Date.now(); const dayInMs = 24 * 60 * 60 * 1000; if (lastDismissed && (now - parseInt(lastDismissed)) < dayInMs) { return; // Don't show if dismissed within last 24 hours } // Create install banner const banner = document.createElement('div'); banner.id = 'pwa-install-banner'; banner.style.cssText = ` position: fixed; bottom: 20px; left: 20px; right: 20px; background: #3b82f6; color: white; padding: 16px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; display: flex; align-items: center; justify-content: space-between; font-family: system-ui, -apple-system, sans-serif; font-size: 14px; max-width: 400px; margin: 0 auto; animation: slideUp 0.3s ease-out; `; banner.innerHTML = `

📱 Install CalculatorFolks

Add to home screen for quick access

`; // Add animation keyframes if (!document.getElementById('pwa-animations')) { const style = document.createElement('style'); style.id = 'pwa-animations'; style.textContent = ` @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 640px) { #pwa-install-banner { left: 10px !important; right: 10px !important; bottom: 10px !important; } } `; document.head.appendChild(style); } document.body.appendChild(banner); // Install button click handler document.getElementById('pwa-install-btn').addEventListener('click', async () => { if (deferredPrompt) { deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; console.log('User choice:', outcome); deferredPrompt = null; } banner.remove(); }); // Dismiss button click handler document.getElementById('pwa-dismiss-btn').addEventListener('click', () => { localStorage.setItem('pwa-install-dismissed', Date.now().toString()); banner.remove(); }); // Auto-dismiss after 10 seconds setTimeout(() => { if (document.getElementById('pwa-install-banner')) { banner.remove(); } }, 10000); } // Handle successful installation window.addEventListener('appinstalled', (evt) => { console.log('PWA was installed'); // Remove any existing install prompts const banner = document.getElementById('pwa-install-banner'); if (banner) banner.remove(); // Track installation (optional) if (typeof gtag !== 'undefined') { gtag('event', 'pwa_install', { event_category: 'engagement', event_label: 'PWA Installation' }); } }); // iOS Safari specific handling function isIOS() { return /iPad|iPhone|iPod/.test(navigator.userAgent); } function isInStandaloneMode() { return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone; } // Show iOS install instructions if applicable if (isIOS() && !isInStandaloneMode()) { setTimeout(() => { const lastShown = localStorage.getItem('ios-install-shown'); const now = Date.now(); const weekInMs = 7 * 24 * 60 * 60 * 1000; if (!lastShown || (now - parseInt(lastShown)) > weekInMs) { showIOSInstallInstructions(); } }, 5000); } function showIOSInstallInstructions() { const banner = document.createElement('div'); banner.style.cssText = ` position: fixed; bottom: 20px; left: 20px; right: 20px; background: #1f2937; color: white; padding: 16px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; font-family: system-ui, -apple-system, sans-serif; font-size: 14px; max-width: 400px; margin: 0 auto; animation: slideUp 0.3s ease-out; `; banner.innerHTML = `

📱 Add to Home Screen

Tap Share then Add to Home Screen

`; document.body.appendChild(banner); // Auto-dismiss after 8 seconds setTimeout(() => { if (banner.parentElement) { banner.remove(); localStorage.setItem('ios-install-shown', Date.now().toString()); } }, 8000); }