Make offline usable

vite.config.ts

@@ -3,12 +3,46 @@ import { fileURLToPath, URL } from 'node:url';
 import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 import vueDevTools from 'vite-plugin-vue-devtools';
 
 // https://vite.dev/config/
 export default defineConfig({
   base: process.env.BASE || '/',
-  plugins: [vue(), tailwindcss(), vueDevTools()],
+  plugins: [
+    vue(),
+    tailwindcss(),
+    vueDevTools(),
+    VitePWA({
+      devOptions: {
+        enabled: true
+      },
+      includeAssets: '**/*',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,png,ico,woff,woff2}']
+      },
+      manifest: {
+        name: 'TramTrack!',
+        short_name: 'TramTrack',
+        description: 'Markiere alle BSAG Fahrzeuge, mit denen du gefahren bist!',
+        icons: [
+          {
+            src: 'https://passidel.github.io/tramtrack/android-chrome-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'https://passidel.github.io/tramtrack/android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ],
+        theme_color: '#26a21e',
+        background_color: '#ffffff',
+        display: 'standalone'
+      }
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))