feat: prompt for reload

src/components/ReloadPrompt.tsx

@@ -0,0 +1,50 @@
+// @ts-ignore
+import { useRegisterSW } from "virtual:pwa-register/react";
+import { Button, Snackbar } from "@mui/material";
+import Slide from "@mui/material/Slide";
+
+export function ReloadPrompt() {
+    const {
+        offlineReady: [offlineReady, setOfflineReady],
+        needRefresh: [needRefresh, setNeedRefresh],
+        updateServiceWorker,
+    } = useRegisterSW();
+
+    const refresh = () => {
+        updateServiceWorker(true).then(() => {
+            window.location.reload();
+        });
+    };
+
+    if (offlineReady) {
+        return (
+            <Snackbar
+                anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+                open={offlineReady}
+                onClose={() => setNeedRefresh(false)}
+                message="L'application peut maintenant fonctionner hors ligne"
+                TransitionComponent={Slide}
+                action={
+                    <Button size="small" onClick={() => setOfflineReady(false)}>
+                        Fermer
+                    </Button>
+                }
+            />
+        );
+    }
+
+    return (
+        <Snackbar
+            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+            open={needRefresh}
+            onClose={() => setNeedRefresh(false)}
+            message="Une nouvelle version de l'application est disponible"
+            TransitionComponent={Slide}
+            action={
+                <Button size="small" onClick={refresh}>
+                    Actualiser
+                </Button>
+            }
+        />
+    );
+}

src/index.tsx

@@ -5,7 +5,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
 import { OidcProvider } from "./components/OidcProvider.tsx";
-
+import { ReloadPrompt } from "./components/ReloadPrompt.tsx";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
@@ -16,6 +16,7 @@ root.render(
                 <ThemeProvider theme={theme}>
                     <CssBaseline enableColorScheme />
                     <App />
+                    <ReloadPrompt />
                 </ThemeProvider>
             </StyledEngineProvider>
         </React.StrictMode>

vite.config.ts

@@ -13,9 +13,9 @@ export default defineConfig({
         VitePWA({
             workbox: {
                 maximumFileSizeToCacheInBytes: 15_000_000,
-                sourcemap: true
+                sourcemap: true,
             },
-            registerType: "autoUpdate",
+            registerType: "prompt",
         }),
     ],
     server: {