Add offline pwa-like caching

env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />

index.html

@@ -6,7 +6,6 @@
     <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
     <link rel="icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="manifest" href="/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Git Calendar Web</title>
   </head>

package.json

@@ -34,6 +34,7 @@
     "prettier": "3.8.3",
     "typescript": "~6.0.3",
     "vite": "^8.0.10",
+    "vite-plugin-pwa": "^1.3.0",
     "vite-plugin-vue-devtools": "^8.1.1",
     "vue-tsc": "^3.2.7"
   }

src/main.ts

@@ -5,6 +5,12 @@ import '@/assets/styles.css';
 import '@/composables/useSettings.ts'; // init settings
 import { useTranslation } from '@/composables/useTranslation';
 
+import { registerSW } from 'virtual:pwa-register';
+
+registerSW({
+  immediate: true,
+});
+
 const { i18n } = useTranslation();
 
 const app = createApp(App);

vite.config.ts

@@ -2,10 +2,48 @@ import { fileURLToPath, URL } from 'node:url';
 
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Git Calendar Web',
+        short_name: 'Git Cal',
+        id: 'Git Cal',
+        start_url: '/',
+        description: 'A web client for a Git-backed calendar.',
+        display: 'standalone',
+        background_color: '#ffffff',
+        theme_color: '#ffffff',
+        orientation: 'portrait-primary',
+        icons: [
+          {
+            src: '/icon-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/icon-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+        ],
+        lang: 'en',
+        dir: 'ltr',
+      },
+
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff2,wasm}'],
+        maximumFileSizeToCacheInBytes: 25 * 1024 * 1024, // 25MiB (core.wasm is a big boy)
+        cleanupOutdatedCaches: true,
+        navigateFallback: '/index.html',
+      },
+    }),
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),