feat: add offline caching

.gitignore

@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+dev-dist
 # dependencies
 node_modules
 /.pnp

packages/frontend/package.json

@@ -91,6 +91,8 @@
     "prisma": "^4.8.1",
     "typescript": "^5.4",
     "vite": "^5.1.6",
-    "vite-node": "^1.4.0"
+    "vite-node": "^1.4.0",
+    "vite-plugin-pwa": "^0.20.0",
+    "workbox-window": "^7.1.0"
   }
 }

packages/frontend/src/main.tsx

@@ -7,6 +7,11 @@ import "./index.css";
 import { Link } from "@tanstack/react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ErrorBoundary } from "react-error-boundary";
+import { registerSW } from "virtual:pwa-register";
+
+if ("serviceWorker" in navigator) {
+  registerSW({});
+}
 
 startReactDsfr({ defaultColorScheme: "system", Link: Link });
 

packages/frontend/tsconfig.json

@@ -22,7 +22,8 @@
     "paths": {
       "#styled-system/*": ["./styled-system/*"],
       "#components/*": ["./src/components/*"]
-    }
+    },
+    "types": ["vite-plugin-pwa/client"]
   },
   "include": ["src/**/*.tsx", "src/**/*.ts"],
   "exclude": [

packages/frontend/vite.config.ts

@@ -2,16 +2,32 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 import wasm from "vite-plugin-wasm";
-
+import { VitePWA } from "vite-plugin-pwa";
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), TanStackRouterVite(), wasm()],
+  plugins: [
+    react(),
+    TanStackRouterVite(),
+    wasm(),
+    VitePWA({
+      devOptions: { enabled: true },
+      manifest: {
+        id: "gouv.beta.compte-rendu-vif",
+        orientation: "portrait",
+        short_name: "CR-VIF",
+        name: "Compte-rendu VIF",
+        scope: "/",
+        start_url: "/",
+        lang: "fr",
+      },
+      workbox: {
+        maximumFileSizeToCacheInBytes: 2097152 * 3,
+        globPatterns: ["**/*.{svg,woff2,js,wasm,css,html}"],
+      },
+    }),
+  ],
   envDir: "../..",
   preview: {},
-  worker: {
-    format: "es",
-    plugins: () => [wasm()],
-  },
   build: {
     target: "esnext",
   },