// Request fullscreen on PWA launch if (window.matchMedia('(display-mode: fullscreen)').matches || window.matchMedia('(display-mode: standalone)').matches) { document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen().catch(function(err) { console.log('Fullscreen request failed:', err); }); } }, 100); }); } // PWA install prompts are currently disabled, but keep intercepting // beforeinstallprompt so browsers do not show their own prompt. const enablePwaInstallPrompt = false; // PWA Install Prompt - Enhanced with browser detection let deferredPrompt; // Detect browser and OS function getBrowserInfo() { const ua = navigator.userAgent; const isIOS = /iPhone|iPad|iPod/.test(ua); const isAndroid = /Android/.test(ua); const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua); const isChrome = /Chrome/.test(ua) && !/Edge/.test(ua); const isFirefox = /Firefox/.test(ua); const isSamsung = /SamsungBrowser/.test(ua); console.log('[PWA] Browser detection:', { isIOS, isAndroid, isSafari, isChrome, isFirefox, isSamsung }); return { isIOS, isAndroid, isSafari, isChrome, isFirefox, isSamsung }; } window.addEventListener('beforeinstallprompt', function(e) { if (!enablePwaInstallPrompt) { e.preventDefault(); return; } console.log('[PWA] beforeinstallprompt event fired'); console.log('[PWA] User agent:', navigator.userAgent); // Prevent the mini-infobar from appearing on mobile e.preventDefault(); // Stash the event so it can be triggered later deferredPrompt = e; // Check if already installed or dismissed const dismissed = localStorage.getItem('pwa-install-dismissed'); const dismissedUntil = localStorage.getItem('pwa-install-dismissed-until'); const isStandalone = window.matchMedia('(display-mode: standalone)').matches; const isFullscreen = window.matchMedia('(display-mode: fullscreen)').matches; console.log('[PWA] Install state:', { dismissed, dismissedUntil, isStandalone, isFullscreen }); // Check if dismissal has expired (7 days) const now = Date.now(); const shouldShow = !dismissed || (dismissedUntil && now > parseInt(dismissedUntil)); if (shouldShow && !isStandalone && !isFullscreen) { // Show install prompt after a short delay console.log('[PWA] Showing install prompt in 2 seconds...'); setTimeout(function() { showInstallPrompt(); }, 2000); } else { console.log('[PWA] Not showing prompt:', { shouldShow, isStandalone, isFullscreen }); } }); // For iOS Safari, show custom instructions since beforeinstallprompt doesn't fire window.addEventListener('DOMContentLoaded', function() { if (!enablePwaInstallPrompt) { return; } const { isIOS, isSafari } = getBrowserInfo(); const dismissed = localStorage.getItem('pwa-install-dismissed'); const isStandalone = window.matchMedia('(display-mode: standalone)').matches; if (isIOS && isSafari && !dismissed && !isStandalone) { // Show iOS-specific prompt after delay setTimeout(function() { showIOSInstallPrompt(); }, 3000); } }); function showInstallPrompt() { // Determine icon based on environment const isLocal = window.location.hostname.endsWith('.ngrok-free.app') || window.location.hostname.endsWith('.ngrok.io') || window.location.hostname.endsWith('.ngrok.app') || window.location.hostname.startsWith('uic.'); const isDev = !isLocal && (window.location.hostname.includes('localhost') || window.location.hostname.includes('127.0.0.1') || window.location.hostname.includes('.vercel.app') || window.location.hostname.startsWith('dev.')); const envName = isLocal ? ' LOCAL' : (isDev ? ' DEV' : ''); const iconPath = "/api/app-icon?variant=small"; // Create install prompt UI const promptDiv = document.createElement('div'); promptDiv.id = 'pwa-install-prompt'; promptDiv.style.cssText = ` position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 16px 20px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); max-width: 90%; width: 400px; animation: slideUp 0.3s ease-out; `; promptDiv.innerHTML = `

Install Shelled${envName}

Add to your home screen for quick access

`; document.body.appendChild(promptDiv); // Install button handler document.getElementById('pwa-install-btn').addEventListener('click', async function() { console.log('[PWA] Install button clicked'); if (deferredPrompt) { console.log('[PWA] Showing native install prompt...'); try { // Show the install prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt const { outcome } = await deferredPrompt.userChoice; console.log('[PWA] User response:', outcome); if (outcome === 'accepted') { console.log('[PWA] User accepted the install prompt'); localStorage.setItem('pwa-install-dismissed', 'true'); } else { console.log('[PWA] User dismissed the install prompt'); } // Clear the deferredPrompt deferredPrompt = null; } catch (err) { console.error('[PWA] Error showing install prompt:', err); } } else { console.log('[PWA] No deferred prompt available'); } // Remove the prompt promptDiv.remove(); }); // Dismiss button handler (remind in 7 days) document.getElementById('pwa-dismiss-btn').addEventListener('click', function() { const sevenDaysFromNow = Date.now() + (7 * 24 * 60 * 60 * 1000); localStorage.setItem('pwa-install-dismissed-until', sevenDaysFromNow.toString()); promptDiv.remove(); }); // Never show again button handler document.getElementById('pwa-never-btn').addEventListener('click', function() { localStorage.setItem('pwa-install-dismissed', 'true'); promptDiv.remove(); }); } function showIOSInstallPrompt() { // Determine icon based on environment const isDev = window.location.hostname.includes('localhost') || window.location.hostname.includes('127.0.0.1') || window.location.hostname.includes('.vercel.app'); const iconPath = "/api/app-icon?variant=small"; // Create iOS-specific install prompt const promptDiv = document.createElement('div'); promptDiv.id = 'pwa-install-prompt-ios'; promptDiv.style.cssText = ` position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 16px 20px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); max-width: 90%; width: 400px; animation: slideUp 0.3s ease-out; `; promptDiv.innerHTML = `

Install Shelled${isDev ? ' DEV' : ''}

Add to your home screen

To install:

Tap the Share button ⎋
Scroll down and tap "Add to Home Screen"
Tap "Add" in the top right

`; document.body.appendChild(promptDiv); // Dismiss button handler (remind in 7 days) document.getElementById('pwa-ios-dismiss-btn').addEventListener('click', function() { const sevenDaysFromNow = Date.now() + (7 * 24 * 60 * 60 * 1000); localStorage.setItem('pwa-install-dismissed-until', sevenDaysFromNow.toString()); promptDiv.remove(); }); // Never show again button handler document.getElementById('pwa-ios-never-btn').addEventListener('click', function() { localStorage.setItem('pwa-install-dismissed', 'true'); promptDiv.remove(); }); } // Listen for successful installation window.addEventListener('appinstalled', function() { console.log('[PWA] App installed successfully'); localStorage.setItem('pwa-install-dismissed', 'true'); });

Imagine a little motion.