add reload prompt

src/components/page.tsx

@@ -9,12 +9,14 @@ import { useIsMobile } from "../hooks/use-is-mobile";
 import { ProfileButton } from "./profile-button";
 import identity from "../services/identity";
 import { FollowingList } from "./following-list";
+import { ReloadPrompt } from "./reload-prompt";
 
 const MobileLayout = ({ children }: { children: React.ReactNode }) => {
   const navigate = useNavigate();
 
   return (
     <Flex direction="column" height="100%">
+      <ReloadPrompt />
       <Flex flexGrow={1} direction="column" overflow="hidden">
         {children}
       </Flex>
@@ -42,28 +44,33 @@ const DesktopLayout = ({ children }: { children: React.ReactNode }) => {
   const navigate = useNavigate();
 
   return (
-    <Container size="lg" display="flex" gap="4" height="100vh" overflow="hidden">
+    <>
-      <VStack width="15rem" pt="2" alignItems="stretch" flexShrink={0}>
+      <Container size="lg" display="flex" gap="2" flexDirection="column" height="100vh" overflow="hidden">
-        <ProfileButton to="/profile" />
+        <ReloadPrompt />
-        <Button onClick={() => navigate("/")} leftIcon={<HomeIcon />}>
+        <Flex gap="4" grow={1} overflow="hidden">
-          Home
+          <VStack width="15rem" pt="2" alignItems="stretch" flexShrink={0}>
-        </Button>
+            <ProfileButton to="/profile" />
-        <Button onClick={() => navigate("/settings")} leftIcon={<SettingsIcon />}>
+            <Button onClick={() => navigate("/")} leftIcon={<HomeIcon />}>
-          Settings
+              Home
-        </Button>
+            </Button>
-        <Button onClick={() => identity.logout()} leftIcon={<LogoutIcon />}>
+            <Button onClick={() => navigate("/settings")} leftIcon={<SettingsIcon />}>
-          Logout
+              Settings
-        </Button>
+            </Button>
-        <ConnectedRelays />
+            <Button onClick={() => identity.logout()} leftIcon={<LogoutIcon />}>
-      </VStack>
+              Logout
-      <Flex flexGrow={1} direction="column" overflow="hidden">
+            </Button>
-        <ErrorBoundary>{children}</ErrorBoundary>
+            <ConnectedRelays />
-      </Flex>
+          </VStack>
-      <VStack width="15rem" pt="2" alignItems="stretch" flexShrink={0}>
+          <Flex flexGrow={1} direction="column" overflow="hidden">
-        <Heading size="md">Following</Heading>
+            <ErrorBoundary>{children}</ErrorBoundary>
-        <FollowingList />
+          </Flex>
-      </VStack>
+          <VStack width="15rem" pt="2" alignItems="stretch" flexShrink={0}>
-    </Container>
+            <Heading size="md">Following</Heading>
+            <FollowingList />
+          </VStack>
+        </Flex>
+      </Container>
+    </>
   );
 };
 

src/components/reload-prompt.tsx

@@ -0,0 +1,32 @@
+import { useRegisterSW } from "virtual:pwa-register/react";
+import { Alert, AlertIcon, AlertTitle, Button } from "@chakra-ui/react";
+
+export const ReloadPrompt = () => {
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      console.log("SW Registered: " + r);
+    },
+    onRegisterError(error) {
+      console.log("SW registration error", error);
+    },
+  });
+
+  const close = () => {
+    setOfflineReady(false);
+    setNeedRefresh(false);
+  };
+
+  return offlineReady || needRefresh ? (
+    <Alert status="success">
+      <AlertIcon />
+      <AlertTitle>New update ready!</AlertTitle>
+      <Button size="sm" ml="auto" onClick={() => updateServiceWorker(true)}>
+        Refresh
+      </Button>
+    </Alert>
+  ) : null;
+};

src/vite-env.d.ts

@@ -1 +1,34 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+
+declare module "virtual:pwa-register/react" {
+  // @ts-expect-error ignore when react is not installed
+  import type { Dispatch, SetStateAction } from "react";
+
+  export interface RegisterSWOptions {
+    immediate?: boolean;
+    onNeedRefresh?: () => void;
+    onOfflineReady?: () => void;
+    /**
+     * Called only if `onRegisteredSW` is not provided.
+     *
+     * @deprecated Use `onRegisteredSW` instead.
+     * @param registration The service worker registration if available.
+     */
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
+    /**
+     * Called once the service worker is registered (requires version `0.12.8+`).
+     *
+     * @param swScriptUrl The service worker script url.
+     * @param registration The service worker registration if available.
+     */
+    onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void;
+    onRegisterError?: (error: any) => void;
+  }
+
+  export function useRegisterSW(options?: RegisterSWOptions): {
+    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>];
+    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>];
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
+  };
+}