fix: resolve PWA static file serving and button visibility issues

Daniel Sullivan · Daniel Sullivan · commit d36898650e5d · 2025-12-10T14:46:23.000+09:00
Frontend changes:
- Update PWA button to show on production HTTPS domains
- Add timeout fallback for production domains when beforeinstallprompt doesn't fire
- Add modern mobile-web-app-capable meta tag (fixes deprecation warning)
- Improve console logging for debugging PWA conditions
Backend changes:
- Add proper static file serving for PWA files (favicon.svg, manifest.json, og-image.svg)
- Add NoRoute handler to serve static files from dist directory
- Ensure all PWA assets are accessible at production URLs
This fixes the 404 errors for PWA files and makes the install button appear on production domains like babelbridge.world
diff --git a/api/server.go b/api/server.go
@@ -82,8 +82,41 @@ func NewServerWithTTLs(svc service.TranslationService, sessTTL, ctxTTL time.Dura
 	// serve static assets for the frontend
 	r.Static("/assets", "frontend/dist/assets")
 
-	// Root: ensure session and serve SPA
+	// serve PWA files and other static assets from dist root
+	r.StaticFile("/favicon.svg", "frontend/dist/favicon.svg")
+	r.StaticFile("/manifest.json", "frontend/dist/manifest.json")
+	r.StaticFile("/og-image.svg", "frontend/dist/og-image.svg")
+
+	// Root: first try to serve static files, then ensure session and serve SPA
 	r.GET("/", func(c *gin.Context) {
+		// Try to serve static files from dist root first
+		path := c.Request.URL.Path
+		if path != "/" {
+			if f, err := http.Dir("frontend/dist").Open(path); err == nil {
+				_ = f.Close()
+				c.File("frontend/dist" + path)
+				return
+			}
+		}
+
+		// Default to SPA index with session
+		s.issueSessionHandler(c)
+		if c.IsAborted() {
+			return
+		}
+		serveSPAIndex(c)
+	})
+
+	// Handle any other static files that weren't caught above
+	r.NoRoute(func(c *gin.Context) {
+		path := c.Request.URL.Path
+		// Try to serve from dist directory
+		if f, err := http.Dir("frontend/dist").Open(path); err == nil {
+			_ = f.Close()
+			c.File("frontend/dist" + path)
+			return
+		}
+		// Fall back to SPA index for client-side routing
 		s.issueSessionHandler(c)
 		if c.IsAborted() {
 			return
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="manifest" href="/manifest.json" />
     <meta name="theme-color" content="#6366F1" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="BabelBridge" />
@@ -18,7 +19,7 @@
     <meta property="og:title" content="BabelBridge - Modern Translation Tool" />
     <meta property="og:description" content="A modern web-based translation tool with live language identification and pluggable AI backends. Translate text seamlessly with intelligent context preservation." />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://babel-bridge.com" />
+    <meta property="og:url" content="https://babelbridge.world" />
     <meta property="og:image" content="/og-image.svg" />
     <meta property="og:image:alt" content="BabelBridge - Modern Translation Tool with AI-powered features" />
     <meta property="og:image:width" content="1200" />
@@ -37,8 +38,8 @@
     <meta name="keywords" content="translation, AI, language, translate, babel, bridge, multilingual, context, preservation" />
     <meta name="author" content="Daniel Sullivan" />
     <meta name="robots" content="index, follow" />
-    <link rel="canonical" href="https://babel-bridge.com" />
-    <script type="module" crossorigin src="/assets/index-CD4TOx2g.js"></script>
+    <link rel="canonical" href="https://babelbridge.world" />
+    <script type="module" crossorigin src="/assets/index-Dwa_SCcC.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/index.html b/frontend/index.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="manifest" href="/manifest.json" />
     <meta name="theme-color" content="#6366F1" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="BabelBridge" />
diff --git a/frontend/src/components/AddToAppButton.tsx b/frontend/src/components/AddToAppButton.tsx
@@ -37,16 +37,18 @@ export function AddToAppButton() {
     console.log('PWA: hasBeforeInstallPrompt =', 'onbeforeinstallprompt' in window)
     console.log('PWA: hostname =', window.location.hostname)
 
-    // For localhost development: if no beforeinstallprompt after 2 seconds,
-    // assume it's available for testing (but only on localhost)
+    // For development localhost OR production HTTPS: if no beforeinstallprompt after 2 seconds,
+    // assume it's available for testing/installation
     const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
     const isDev = process.env.NODE_ENV === 'development'
+    const isHTTPS = window.location.protocol === 'https:'
+    const isProductionDomain = !isLocalhost && isHTTPS
 
     let timeoutId: NodeJS.Timeout | null = null
-    if (isDev && isLocalhost) {
+    if ((isDev && isLocalhost) || isProductionDomain) {
       timeoutId = setTimeout(() => {
         if (!isInstallable && !isIOS()) {
-          console.log('PWA: No beforeinstallprompt after 2s, enabling for localhost testing')
+          console.log('PWA: No beforeinstallprompt after 2s, enabling for production/localhost')
           setIsInstallable(true)
         }
       }, 2000)
@@ -99,17 +101,21 @@ export function AddToAppButton() {
   // Show button if:
   // 1. Actually installable (beforeinstallprompt fired), OR
   // 2. iOS device (can always install via Safari), OR
-  // 3. Development mode AND localhost (for testing)
+  // 3. Development mode AND localhost (for testing), OR
+  // 4. Production domain with HTTPS (assume PWA is available)
   const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
   const isDev = process.env.NODE_ENV === 'development'
-  const shouldShowButton = isInstallable || isIOS() || (isDev && isLocalhost)
+  const isHTTPS = window.location.protocol === 'https:'
+  const isProductionDomain = !isLocalhost && isHTTPS
+
+  const shouldShowButton = isInstallable || isIOS() || (isDev && isLocalhost) || isProductionDomain
 
   if (!shouldShowButton) {
-    console.log('PWA: Button hidden - not installable, not iOS, not dev+localhost')
+    console.log('PWA: Button hidden - not installable, not iOS, not dev+localhost, not production HTTPS')
     return null
   }
 
-  console.log('PWA: Button will show - installable:', isInstallable, 'iOS:', isIOS(), 'dev+localhost:', isDev && isLocalhost)
+  console.log('PWA: Button will show - installable:', isInstallable, 'iOS:', isIOS(), 'dev+localhost:', isDev && isLocalhost, 'production:', isProductionDomain)
 
   return (
     <>
