merge: #2682

2682: feat(web) detect cached webapp running and prompt user to reload r=theoephraim a=theoephraim very similar to the new deploy notification on the auth portal, except this detects a cached version of the web app running compared to what is now available on disk via the si launcher. This could potentially happen if the user left their browser open while running an `si update` <img width="474" alt="image" src="https://github.com/systeminit/si/assets/1158956/8c9e8594-cc0a-48ee-90db-ae23d7ebc0f0"> Co-authored-by: Theo Ephraim <[email protected]>
systeminit · Sep 19, 2023 · 810e2b9 · 810e2b9
2 parents 2b51ad1 + b14507f
commit 810e2b9
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 3 deletions.
diff --git a/app/auth-portal/src/components/DeployNotification.vue b/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" },
   });

diff --git a/app/web/package.json b/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",

diff --git a/app/web/src/App.vue b/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();
 

diff --git a/app/web/src/components/CachedAppNotification.vue b/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>
diff --git a/app/web/vite.config.ts b/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,
+    },
   });
 };