Add automatic site update check

Author: iiAhmedYT

src/lib/siteUpdate.ts

@@ -0,0 +1,127 @@
+declare const __SITE_BUILD_ID__: string;
+
+const VERSION_URL = '/site-version.json';
+const CHECK_INTERVAL_MS = 5 * 60 * 1000;
+const INITIAL_CHECK_DELAY_MS = 15 * 1000;
+const UPDATE_STORAGE_KEY = 'mevera:site-update-applied';
+const UPDATE_QUERY_KEY = 'siteUpdate';
+const RELOAD_DELAY_MS = 750;
+
+type SiteVersion = {
+  version?: string;
+};
+
+async function fetchLatestVersion(): Promise<string | null> {
+  const response = await fetch(`${VERSION_URL}?t=${Date.now()}`, {
+    cache: 'no-store',
+    headers: {
+      'Cache-Control': 'no-cache',
+      Pragma: 'no-cache',
+    },
+  });
+
+  if (!response.ok) {
+    return null;
+  }
+
+  const data = (await response.json()) as SiteVersion;
+  return typeof data.version === 'string' && data.version.length > 0 ? data.version : null;
+}
+
+function markReloadAttempt(version: string): boolean {
+  const previousAttempt = sessionStorage.getItem(UPDATE_STORAGE_KEY);
+
+  if (previousAttempt === version) {
+    return false;
+  }
+
+  sessionStorage.setItem(UPDATE_STORAGE_KEY, version);
+  return true;
+}
+
+async function refreshServiceWorkerState(): Promise<void> {
+  if (!('serviceWorker' in navigator)) {
+    return;
+  }
+
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  await Promise.all(registrations.map((registration) => registration.update()));
+}
+
+function reloadWithCacheBuster(version: string) {
+  const nextUrl = new URL(window.location.href);
+  nextUrl.searchParams.set(UPDATE_QUERY_KEY, version);
+  window.location.replace(nextUrl);
+}
+
+function clearRuntimeCachesInBackground() {
+  if (!('caches' in window)) {
+    return;
+  }
+
+  caches.keys()
+    .then((cacheNames) => Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName))))
+    .catch(() => undefined);
+}
+
+function applyUpdate(version: string) {
+  if (!markReloadAttempt(version)) {
+    return;
+  }
+
+  clearRuntimeCachesInBackground();
+  window.setTimeout(() => reloadWithCacheBuster(version), RELOAD_DELAY_MS);
+}
+
+export function installSiteUpdateCheck() {
+  if (!import.meta.env.PROD || typeof window === 'undefined') {
+    return;
+  }
+
+  const currentVersion = __SITE_BUILD_ID__;
+  let isChecking = false;
+
+  const checkForUpdate = async () => {
+    if (isChecking || document.visibilityState === 'hidden') {
+      return;
+    }
+
+    isChecking = true;
+
+    try {
+      const latestVersion = await fetchLatestVersion();
+
+      if (latestVersion && latestVersion !== currentVersion) {
+        applyUpdate(latestVersion);
+      }
+    } catch {
+      // A failed update check should never break the site.
+    } finally {
+      isChecking = false;
+    }
+  };
+
+  window.setTimeout(checkForUpdate, INITIAL_CHECK_DELAY_MS);
+  window.setInterval(checkForUpdate, CHECK_INTERVAL_MS);
+  window.addEventListener('focus', checkForUpdate);
+  document.addEventListener('visibilitychange', checkForUpdate);
+
+  if ('serviceWorker' in navigator) {
+    refreshServiceWorkerState().catch(() => undefined);
+  }
+}
+
+export function scheduleSiteUpdateCheck() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const install = () => installSiteUpdateCheck();
+
+  if ('requestIdleCallback' in window) {
+    window.requestIdleCallback(install, { timeout: 5000 });
+    return;
+  }
+
+  setTimeout(install, 0);
+}

src/main.tsx

@@ -6,6 +6,9 @@ import './i18n'
 import App from './App.tsx'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import { CodeThemeProvider } from '@/components/CodeThemeProvider'
+import { scheduleSiteUpdateCheck } from '@/lib/siteUpdate'
+
+scheduleSiteUpdateCheck()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

vite.config.ts

@@ -4,12 +4,28 @@ import { defineConfig } from "vite"
 import { inspectAttr } from 'kimi-plugin-inspect-react'
 import { VitePWA } from 'vite-plugin-pwa'
 
+const buildId = process.env.GITHUB_SHA || process.env.VERCEL_GIT_COMMIT_SHA || `${Date.now()}`
+const builtAt = new Date().toISOString()
+
 // https://vite.dev/config/
 export default defineConfig({
   base: '/',
+  define: {
+    __SITE_BUILD_ID__: JSON.stringify(buildId),
+  },
   plugins: [
     inspectAttr(),
     react(),
+    {
+      name: 'site-version',
+      generateBundle() {
+        this.emitFile({
+          type: 'asset',
+          fileName: 'site-version.json',
+          source: JSON.stringify({ version: buildId, builtAt }),
+        })
+      },
+    },
     VitePWA({
       registerType: 'autoUpdate',
       includeAssets: ['icon-192.png', 'icon-512.png', 'icon-1024.png'],
@@ -43,8 +59,13 @@ export default defineConfig({
       },
       workbox: {
         globPatterns: ['**/*.{js,css,html,ico,png,svg,json}'],
+        globIgnores: ['**/site-version.json'],
         maximumFileSizeToCacheInBytes: 4000000, // 4MB to allow React/UI vendor chunks
         runtimeCaching: [
+          {
+            urlPattern: /\/site-version\.json$/,
+            handler: 'NetworkOnly',
+          },
           {
             urlPattern: /\/docs-nav\.json$/,
             handler: 'CacheFirst',