/* ─────────────────────────────────────────────── Happy Guts — installable web app (PWA) • service-worker registration (built/deployed copy only — see scripts/build.mjs) • install-status detection: running installed? can the browser prompt? which platform? • install nudges, on every open until installed: InstallGate (full screen, phones), InstallBanner on Home, InstallCard in Settings Exposed: useInstall, promptInstall, InstallGate, InstallBanner, InstallCard, InstallHelp, UpdateToast, shouldShowInstallGate, markInstallGateSeen ─────────────────────────────────────────────── */ /* ── service worker ── */ (function registerServiceWorker() { // dist/index.html sets window.HG_BUILD; the zero-build dev page doesn't, so dev never caches. if (!window.HG_BUILD || !('serviceWorker' in navigator)) return; const register = () => navigator.serviceWorker.register('sw.js') .catch(err => console.warn('[Happy Guts] Service worker registration failed:', err)); if (document.readyState === 'complete') register(); else window.addEventListener('load', register); })(); /* ── install-status store (module singleton, so events fired before React mounts aren't lost) ── */ const pwaStore = (() => { const ua = navigator.userAgent || ''; const ios = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); const android = /Android/i.test(ua); // In-app browsers (Instagram, Facebook, TikTok, LinkedIn, Google app…) can't add to the home screen. const inApp = /FBAN|FBAV|FB_IAB|Instagram|Line\/|LinkedInApp|Twitter|Snapchat|TikTok|musical_ly|Bytedance|MicroMessenger|GSA\//i.test(ua) || (android && /; wv\)/.test(ua)); const iosBrowser = !ios ? null : /CriOS/.test(ua) ? 'chrome' : /FxiOS/.test(ua) ? 'firefox' : /EdgiOS/.test(ua) ? 'edge' : 'safari'; const platform = ios ? 'ios' : android ? 'android' : 'desktop'; let promptEvent = window.__hgInstallPrompt || null; // captured early by an inline script in index.html let justInstalled = !!window.__hgAppInstalled; const listeners = new Set(); const emit = () => listeners.forEach(fn => fn()); const mq = (q) => (window.matchMedia ? window.matchMedia(q) : { matches: false }); const standaloneMQ = mq('(display-mode: standalone)'); const isStandalone = () => standaloneMQ.matches || mq('(display-mode: fullscreen)').matches || window.navigator.standalone === true; const markInstalled = () => { try { localStorage.setItem('hg_installed', JSON.stringify(Date.now())); } catch {} }; const knownInstalled = () => { try { return !!localStorage.getItem('hg_installed'); } catch { return false; } }; if (isStandalone()) markInstalled(); // Android shares storage between browser + installed app, so a later browser visit knows // A new deploy's service worker takes over straight away (skipWaiting); offer a reload so the // page picks up the new app shell. Skipped on the very first install (no previous controller). let updateReady = false; if (navigator.serviceWorker) { const hadController = !!navigator.serviceWorker.controller; navigator.serviceWorker.addEventListener('controllerchange', () => { if (hadController) updateReady = true; emit(); }); } window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); promptEvent = e; emit(); }); window.addEventListener('appinstalled', () => { justInstalled = true; promptEvent = null; markInstalled(); emit(); }); if (standaloneMQ.addEventListener) standaloneMQ.addEventListener('change', emit); return { subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); }, snapshot() { const standalone = isStandalone(); return { standalone, // running as the installed app right now platform, iosBrowser, inApp, mobile: platform !== 'desktop', canPrompt: !!promptEvent, // Chrome/Edge/Samsung can show their own install dialog justInstalled, // installed during this visit knownInstalled: knownInstalled(), // installed earlier (only detectable where storage is shared, e.g. Android) offlineReady: !!(navigator.serviceWorker && navigator.serviceWorker.controller), updateReady, }; }, async prompt() { if (!promptEvent) return 'unavailable'; const e = promptEvent; promptEvent = null; emit(); e.prompt(); const { outcome } = await e.userChoice; // 'accepted' | 'dismissed' if (outcome === 'accepted') { justInstalled = true; markInstalled(); } emit(); return outcome; }, }; })(); // "Installed" as far as this page can tell. iPhone/iPad give a browser tab no way to know whether // the home-screen app exists (separate storage, no API), so there it's only true inside the app. function isInstalled(s) { return s.standalone || s.justInstalled || (s.knownInstalled && !s.canPrompt); } // Dismissals last for this open only (sessionStorage = this tab until it's closed), so the // nudge comes back every time the site is opened in a browser, but not on a reload mid-visit. const session = { has(k) { try { return !!sessionStorage.getItem(k); } catch { return false; } }, set(k) { try { sessionStorage.setItem(k, '1'); } catch {} }, }; function useInstall() { const [, force] = React.useReducer(x => x + 1, 0); React.useEffect(() => pwaStore.subscribe(force), []); return pwaStore.snapshot(); } const promptInstall = () => pwaStore.prompt(); /* ── small pieces ── */ function Step({ n, children }) { return (
{n}
{children}
); } const Glyph = ({ name }) => ( ); function CopyLink() { const [copied, setCopied] = React.useState(false); const copy = async () => { try { await navigator.clipboard.writeText(location.href); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch { window.prompt('Copy this link:', location.href); } }; return ( ); } /* ── platform-specific "how to install" — shared by gate, banner sheet and settings ── */ function InstallHelp({ s }) { if (s.standalone) { return

You're using the installed app. 🎉

; } if (s.justInstalled || (s.knownInstalled && !s.canPrompt)) { return (
Happy Guts is installed. Open it from your home screen (or app list) for the full-screen, offline experience.
); } if (s.inApp) { const where = s.platform === 'ios' ? 'Safari' : 'Chrome'; return (

You've opened this inside another app, which can't install it. Open the page in {where} instead — use the menu and choose Open in {s.platform === 'ios' ? 'browser' : where}, or copy the link.

); } if (s.canPrompt) { return ( ); } if (s.platform === 'ios') { return (
Tap Share {s.iosBrowser === 'safari' ? <> in Safari's toolbar. Don't see it? Tap first. : <> next to the address bar.} Scroll down and tap Add to Home Screen Tap Add, then open Happy Guts from your Home Screen.
); } if (s.platform === 'android') { return (
Open your browser menu Tap Install app or Add to Home screen Open Happy Guts from your home screen.
); } return (

In Chrome or Edge, use the install icon in the address bar. In Safari on a Mac, choose File → Add to Dock.

); } const BENEFITS = [ ['scan', 'Opens full screen, straight to the scanner'], ['leaf', 'Works offline — your food guide is always to hand'], ['check', 'Keeps your profile and lists safely on this phone'], ]; /* ── shown on phones each time the site is opened in a browser, until installed ── */ function InstallGate({ onContinue }) { const s = useInstall(); return (

Install Happy Guts

Add it to your home screen for the best experience.

{BENEFITS.map(([icon, text]) => (
{text}
))}
How to install
{s.platform === 'ios' && !s.justInstalled && (

Install first, then set up inside the app — on iPhone the installed app keeps its own copy of your profile, separate from Safari.

)}
); } /* ── reminder on Home — every open until installed; ✕ hides it for this open only ── */ const BANNER_KEY = 'hg_install_banner_dismissed'; function InstallBanner({ style }) { const s = useInstall(); const [open, setOpen] = React.useState(false); const [hidden, setHidden] = React.useState(() => session.has(BANNER_KEY)); if (isInstalled(s) || hidden || (!s.mobile && !s.canPrompt)) return null; const snooze = () => { session.set(BANNER_KEY); setHidden(true); }; const install = async () => { if (s.canPrompt) await promptInstall(); else setOpen(true); }; return (
Install Happy Guts
Full screen, offline, one tap away
setOpen(false)} title="Install Happy Guts"> ); } /* ── Settings → App ── */ function InstallCard() { const s = useInstall(); const [open, setOpen] = React.useState(false); const status = s.standalone ? 'Installed — running as an app' : s.justInstalled || s.knownInstalled ? 'Installed — open it from your home screen' : 'Running in your browser'; return (
{status}
{s.offlineReady ? 'Available offline' : window.HG_BUILD ? 'Preparing offline copy…' : 'Offline mode is only in the built app'}
{!s.standalone && ( )}
{window.HG_BUILD ? `build ${window.HG_BUILD.version}` : 'dev (unbuilt)'}
setOpen(false)} title="Install Happy Guts">
); } /* ── "new version" toast (after a deploy) ── */ function UpdateToast() { const s = useInstall(); const [dismissed, setDismissed] = React.useState(false); if (!s.updateReady || dismissed) return null; return (
A new version of Happy Guts is ready.
); } /* install page bookkeeping: shown on every open on a phone until the app is installed */ const GATE_KEY = 'hg_install_gate_dismissed'; function shouldShowInstallGate() { const s = pwaStore.snapshot(); if (isInstalled(s) || !s.mobile) return false; if (new URLSearchParams(location.search).has('noinstall')) return false; // escape hatch for testing / links return !session.has(GATE_KEY); } function markInstallGateSeen() { session.set(GATE_KEY); } Object.assign(window, { useInstall, promptInstall, InstallGate, InstallBanner, InstallCard, InstallHelp, UpdateToast, shouldShowInstallGate, markInstallGateSeen });