feat(pwa): show install prompt toast on eligible browsers (beforeinstallprompt)

Author: GaspardKirira

assets/index-ByYSHKaj.js

@@ -99,8 +99,8 @@
       gtag("js", new Date());
       gtag("config", "G-1B67VYZMXF");
     </script>
-    <script type="module" crossorigin src="/assets/index-Do3U5wD-.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CfflbtDV.css">
+    <script type="module" crossorigin src="/assets/index-ByYSHKaj.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CB2TdpUq.css">
   <link rel="manifest" href="/manifest.webmanifest"></head>
 
   <body>

assets/index-CfflbtDV.css assets/index-CB2TdpUq.cssassets/index-CfflbtDV.css renamed to assets/index-CB2TdpUq.css

@@ -1,11 +1,23 @@
 <template>
   <div class="app">
     <SiteHeader />
+
     <main class="main">
       <router-view />
     </main>
+
     <SiteFooter />
 
+    <!-- PWA install prompt toast -->
+    <PwaInstallToast
+      :show="showInstallToast"
+      :canInstall="canInstall"
+      message="Install Vix.cpp?"
+      detail="Pin it like an app. Offline support, faster launch."
+      @install="triggerInstall"
+      @dismiss="dismissInstall"
+    />
+
     <!-- PWA update toast -->
     <PwaUpdateToast
       :show="showPwaToast"
@@ -17,11 +29,15 @@
 </template>
 
 <script setup>
-import { inject, computed } from "vue";
+import { inject, computed, onMounted, onBeforeUnmount, ref } from "vue";
 
 import SiteHeader from "./components/SiteHeader.vue";
 import SiteFooter from "./components/SiteFooter.vue";
 
+import PwaUpdateToast from "./components/PwaUpdateToast.vue";
+import PwaInstallToast from "./components/PwaInstallToast.vue";
+
+//PWA Update Toast (existing)
 const store = inject("pwaToast");
 const showPwaToast = computed(() => store?.show?.value === true);
 
@@ -34,6 +50,94 @@ function refresh() {
 function dismiss() {
   window.__vix_pwa_dismiss__?.();
 }
+
+/* ===========================
+   PWA Install Toast (new)
+   - uses beforeinstallprompt
+   - cooldown on "Not now"
+=========================== */
+const showInstallToast = ref(false);
+const canInstall = ref(false);
+
+let deferredPrompt = null;
+
+const INSTALL_DISMISS_KEY = "vix_pwa_install_dismiss_until";
+
+function nowMs() {
+  return Date.now();
+}
+
+function shouldShowInstallToast() {
+  const until = Number(localStorage.getItem(INSTALL_DISMISS_KEY) || "0");
+  return nowMs() > until;
+}
+
+function setDismissCooldown(days = 7) {
+  const until = nowMs() + days * 24 * 60 * 60 * 1000;
+  localStorage.setItem(INSTALL_DISMISS_KEY, String(until));
+}
+
+function dismissInstall() {
+  setDismissCooldown(7);
+  showInstallToast.value = false;
+}
+
+async function triggerInstall() {
+  if (!deferredPrompt) return;
+
+  try {
+    deferredPrompt.prompt();
+    const choice = await deferredPrompt.userChoice; // { outcome: 'accepted'|'dismissed' }
+
+    // one-shot: reset
+    deferredPrompt = null;
+    canInstall.value = false;
+    showInstallToast.value = false;
+
+    // if dismissed, avoid spamming
+    if (choice?.outcome !== "accepted") setDismissCooldown(7);
+  } catch {
+    deferredPrompt = null;
+    canInstall.value = false;
+    showInstallToast.value = false;
+    setDismissCooldown(7);
+  }
+}
+
+function onBeforeInstallPrompt(e) {
+  // prevent Chrome mini-infobar
+  e.preventDefault();
+
+  deferredPrompt = e;
+  canInstall.value = true;
+
+  if (!shouldShowInstallToast()) return;
+
+  // small delay so it feels intentional (after initial paint)
+  setTimeout(() => {
+    // still eligible?
+    if (deferredPrompt && canInstall.value) showInstallToast.value = true;
+  }, 900);
+}
+
+function onAppInstalled() {
+  deferredPrompt = null;
+  canInstall.value = false;
+  showInstallToast.value = false;
+
+  // long cooldown (or you can clear it)
+  setDismissCooldown(365);
+}
+
+onMounted(() => {
+  window.addEventListener("beforeinstallprompt", onBeforeInstallPrompt);
+  window.addEventListener("appinstalled", onAppInstalled);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("beforeinstallprompt", onBeforeInstallPrompt);
+  window.removeEventListener("appinstalled", onAppInstalled);
+});
 </script>
 
 <style scoped>

assets/index-Do3U5wD-.js

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  message: { type: String, default: "Install Vix.cpp?" },
+  detail: {
+    type: String,
+    default: "Get an app-like experience: offline support, faster launch.",
+  },
+  canInstall: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["install", "dismiss"]);
+
+const installDisabled = computed(() => !props.canInstall);
+</script>
+
+<template>
+  <teleport to="body">
+    <div v-if="show" class="pwa-toast-wrap" role="status" aria-live="polite">
+      <div class="pwa-toast">
+        <div class="pwa-toast-glow" aria-hidden="true"></div>
+
+        <div class="pwa-toast-left">
+          <div class="pwa-toast-icon" aria-hidden="true">
+            <span class="pwa-dot pwa-dot-red"></span>
+            <span class="pwa-dot pwa-dot-yellow"></span>
+            <span class="pwa-dot pwa-dot-green"></span>
+          </div>
+
+          <div class="pwa-toast-text">
+            <div class="pwa-toast-title">{{ message }}</div>
+            <div class="pwa-toast-sub">{{ detail }}</div>
+          </div>
+        </div>
+
+        <div class="pwa-toast-actions">
+          <button
+            class="pwa-btn pwa-btn-ghost"
+            type="button"
+            @click="emit('dismiss')"
+          >
+            Not now
+          </button>
+
+          <button
+            class="pwa-btn pwa-btn-primary"
+            type="button"
+            :disabled="installDisabled"
+            @click="emit('install')"
+          >
+            Install
+          </button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>