feat(web) detect cached webapp running and prompt user to reload

app/auth-portal/src/components/DeployNotification.vue

@@ -28,7 +28,6 @@ async function check() {
   const manifestUrl = `${
     window.location.origin
   }/manifest.json?timestamp=${Date.now()}`;
-  // // const url = "https://api.netlify.com/api/v1/sites/auth.systeminit.com";
   const res = await axios(manifestUrl, {
     headers: { "Cache-Control": "no-cache" },
   });

app/web/package.json

@@ -20,7 +20,7 @@
     "check": "pnpm run lint:strict && npm run build:check",
     "dev": "pnpm run start",
     "start": "vite",
-    "serve": "vite preview --port 8081",
+    "serve": "vite preview --port 8080",
     "test": "echo 'Sorry, no tests yet!'",
     "vite:clean": "./script/clean-vite-cache.sh",
     "cypress:run": "cypress run",

app/web/src/App.vue

@@ -15,6 +15,7 @@
       <p>restoring auth...</p>
     </template>
     <template v-else>
+      <CachedAppNotification />
       <RealtimeConnectionStatus />
       <RouterView :key="selectedWorkspace?.pk" />
       <Teleport to="body">
@@ -42,6 +43,7 @@ import { useAuthStore } from "./store/auth.store";
 import { useWorkspacesStore } from "./store/workspaces.store";
 import { useRealtimeStore } from "./store/realtime/realtime.store";
 import RealtimeConnectionStatus from "./components/RealtimeConnectionStatus.vue";
+import CachedAppNotification from "./components/CachedAppNotification.vue";
 
 useCustomFontsLoadedProvider();
 

app/web/src/components/CachedAppNotification.vue

@@ -0,0 +1,73 @@
+<template>
+  <Modal ref="modalRef" title="Please refresh your browser">
+    <Stack>
+      <RichText>
+        <p>
+          Looks like you might be running a cached version of this web app. For
+          new features and to ensure compatibility, please refresh your browser.
+        </p>
+      </RichText>
+      <VButton icon="refresh" @click="reloadBrowser">Refresh</VButton>
+    </Stack>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { Modal, RichText, Stack, VButton } from "@si/vue-lib/design-system";
+
+import axios from "axios";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+
+const APP_FILENAME_REGEX = /\/?assets\/index-([0-9a-z]+).js/;
+
+const runningHash = getRunningHash();
+
+const modalRef = ref();
+
+async function check() {
+  const manifestUrl = `${
+    window.location.origin
+  }/manifest.json?timestamp=${Date.now()}`;
+  const res = await axios(manifestUrl, {
+    headers: { "Cache-Control": "no-cache" },
+  });
+
+  try {
+    if (res.status !== 200) throw new Error("server offline");
+    const latestAppFileWithHash = res.data["index.html"].file;
+
+    const latestHash = latestAppFileWithHash.match(APP_FILENAME_REGEX)?.[1];
+    if (runningHash && latestHash !== runningHash) {
+      modalRef.value?.open();
+    }
+  } catch (err) {
+    stopInterval();
+  }
+}
+
+function reloadBrowser() {
+  window.location.reload();
+}
+
+function getRunningHash() {
+  if (import.meta.env.SSR) return "";
+  // look for script tag of our main entrypoint that includes a hash
+  const scriptEls = document.querySelectorAll("script[src^='/assets/index-']");
+  for (const scriptEl of scriptEls) {
+    const matches = scriptEl.getAttribute("src")?.match(APP_FILENAME_REGEX);
+    if (matches) return matches[1];
+  }
+}
+
+let intervalId: number;
+function stopInterval() {
+  if (window && intervalId) window.clearInterval(intervalId);
+}
+onMounted(() => {
+  if (import.meta.env.SSR) return;
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  check();
+  intervalId = window.setInterval(check, 30 * 1000);
+});
+onBeforeUnmount(stopInterval);
+</script>

app/web/vite.config.ts

@@ -87,6 +87,14 @@ export default (opts: { mode: string }) => {
         },
       },
     },
+    preview: {
+      proxy: {
+        "/api": {
+          target: config.DEV_API_PROXY_URL,
+          ws: true,
+        },
+      },
+    },
     resolve: {
       alias: [
         {
@@ -95,6 +103,8 @@ export default (opts: { mode: string }) => {
         },
       ],
     },
-    define: {},
+    build: {
+      manifest: true,
+    },
   });
 };