bug: fix issues with white labeling pwa (#456)

Author: lukepolo

components/InstallPWA.vue

@@ -143,6 +143,16 @@ export default {
         return false;
       }
 
+      // Already running as an installed app — don't offer install.
+      // `$pwa.isPWAInstalled` only checks the display-mode media query, which
+      // is unreliable on iOS, so also check navigator.standalone directly.
+      if (
+        (window.navigator as Navigator & { standalone?: boolean }).standalone ||
+        window.matchMedia("(display-mode: standalone)").matches
+      ) {
+        return false;
+      }
+
       if (this.isIOS) {
         return true;
       }

components/match/ReplayViewer.vue

@@ -2548,14 +2548,28 @@ onMounted(() => {
     if (dock) radarRO.observe(dock);
   }
   window.addEventListener("resize", recomputeRadarSize);
+  // Rotating a phone/tablet fires `orientationchange` BEFORE the viewport
+  // metrics (innerHeight / dvh / safe-area) have settled — iOS especially
+  // reports stale values for a moment — so re-fit a few times as it lands,
+  // otherwise the map height is wrong and the page scrolls (shoving the seek
+  // bar). `visualViewport` resize is the most reliable mobile signal.
+  window.addEventListener("orientationchange", recomputeAfterRotate);
+  window.visualViewport?.addEventListener("resize", recomputeRadarSize);
   // Re-measure once after fonts/images settle so the initial top
   // offset is right.
   requestAnimationFrame(() => recomputeRadarSize());
 });
+function recomputeAfterRotate() {
+  recomputeRadarSize();
+  setTimeout(recomputeRadarSize, 200);
+  setTimeout(recomputeRadarSize, 450);
+}
 onUnmounted(() => {
   radarRO?.disconnect();
   if (typeof window !== "undefined") {
     window.removeEventListener("resize", recomputeRadarSize);
+    window.removeEventListener("orientationchange", recomputeAfterRotate);
+    window.visualViewport?.removeEventListener("resize", recomputeRadarSize);
   }
 });
 

composables/useBranding.ts

@@ -204,9 +204,9 @@ export function useBranding() {
           manifest.rel = "manifest";
           document.head.appendChild(manifest);
         }
-        manifest.href = `https://${apiDomain}/branding/manifest.webmanifest?v=${encodeURIComponent(version)}`;
-        // CORS uses credentials:true (not "*"), so the fetch must send cookies.
-        manifest.crossOrigin = "use-credentials";
+        // Same-origin route (Nitro proxy) — a cross-origin manifest would
+        // resolve start_url/scope to the API origin and break installability.
+        manifest.href = `/branding/manifest.webmanifest?v=${encodeURIComponent(version)}`;
       }
     },
     { immediate: true, deep: true },

server/routes/branding/manifest.webmanifest.get.ts

@@ -0,0 +1,29 @@
+// Same-origin PWA manifest for white-label instances.
+//
+// The web app manifest must be served from the SAME origin as the page,
+// otherwise its start_url/scope resolve to the API origin and the manifest
+// no longer applies to the document — Chrome never fires beforeinstallprompt
+// (no install button) and iOS won't reliably enter standalone mode.
+//
+// So we proxy the API's dynamic manifest (brand name + colors) through the
+// web origin. start_url ("/") resolves to the web origin here; the icon URLs
+// in the API manifest are absolute (API origin), and cross-origin icons are
+// allowed by the spec.
+
+export default defineEventHandler(async (event) => {
+  setResponseHeader(event, "Content-Type", "application/manifest+json");
+  setResponseHeader(event, "Cache-Control", "public, max-age=60");
+
+  const apiDomain = process.env.NUXT_PUBLIC_API_DOMAIN;
+  if (!apiDomain) {
+    return sendRedirect(event, "/manifest.webmanifest", 302);
+  }
+
+  try {
+    return await $fetch(`https://${apiDomain}/branding/manifest.webmanifest`);
+  } catch (err) {
+    console.error("[branding-manifest] fetch failed:", err);
+    // Fall back to the static build manifest rather than serving nothing.
+    return sendRedirect(event, "/manifest.webmanifest", 302);
+  }
+});