if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { console.log('[PWA] Service Worker registered successfully:', registration.scope); // Check for updates registration.addEventListener('updatefound', function() { const newWorker = registration.installing; if (newWorker) { newWorker.addEventListener('statechange', function() { if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { // New content is available, prompt user to refresh if (confirm('New version available! Refresh to update?')) { window.location.reload(); } } }); } }); }) .catch(function(error) { console.log('[PWA] Service Worker registration failed:', error); }); }); } // Install prompt handling let deferredPrompt; window.addEventListener('beforeinstallprompt', function(e) { e.preventDefault(); deferredPrompt = e; // Show custom install button after a delay setTimeout(function() { // Check if user has already dismissed the prompt in this session if (sessionStorage.getItem('pwaPromptDismissed') === 'true') { console.log('[PWA] Install prompt already dismissed in this session'); return; } if (deferredPrompt && !window.matchMedia('(display-mode: standalone)').matches) { const installBanner = document.createElement('div'); installBanner.id = 'pwa-install-banner'; installBanner.innerHTML = `

🎨 Install AIArtify

Get the full app experience!

`; document.body.appendChild(installBanner); document.getElementById('install-btn').addEventListener('click', function() { deferredPrompt.prompt(); deferredPrompt.userChoice.then(function(choiceResult) { console.log('[PWA] Install prompt result:', choiceResult.outcome); deferredPrompt = null; try { if (document.body.contains(installBanner)) { document.body.removeChild(installBanner); } } catch (e) { console.log('[PWA] Banner already removed'); } }); }); document.getElementById('dismiss-btn').addEventListener('click', function() { try { if (document.body.contains(installBanner)) { document.body.removeChild(installBanner); console.log('[PWA] Install banner dismissed by user'); } } catch (e) { console.log('[PWA] Error removing banner:', e); } // Mark as dismissed so it doesn't show again in this session sessionStorage.setItem('pwaPromptDismissed', 'true'); }); } }, 3000); // Show after 3 seconds }); // Track if app is installed window.addEventListener('appinstalled', function(e) { console.log('[PWA] App was installed successfully'); // Track installation analytics if (typeof gtag !== 'undefined') { gtag('event', 'pwa_install', { event_category: 'engagement', event_label: 'PWA Installation' }); } }); // Handle offline/online status function updateOnlineStatus() { const isOnline = navigator.onLine; const statusIndicator = document.getElementById('network-status'); if (!statusIndicator) { const indicator = document.createElement('div'); indicator.id = 'network-status'; indicator.style.cssText = ` position: fixed; top: 70px; right: 20px; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; z-index: 9998; transition: all 0.3s ease; backdrop-filter: blur(10px); `; document.body.appendChild(indicator); } const indicator = document.getElementById('network-status'); if (isOnline) { indicator.textContent = '🟢 Online'; indicator.style.background = 'rgba(34, 197, 94, 0.9)'; indicator.style.color = 'white'; indicator.style.opacity = '0'; setTimeout(() => indicator.style.display = 'none', 300); } else { indicator.textContent = '🔴 Offline Mode'; indicator.style.background = 'rgba(239, 68, 68, 0.9)'; indicator.style.color = 'white'; indicator.style.opacity = '1'; indicator.style.display = 'block'; } } window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); updateOnlineStatus(); // Initial check