chore added PWA support to Vue demo (#129)

Co-authored-by: Christiaan Landman <christiaanlandman@Christiaans-MacBook-Pro-2.local>

Author: Chriztiaan

.changeset/chatty-news-appear.md

@@ -0,0 +1,5 @@
+---
+"vue-supabase-todolist": patch
+---
+
+Added PWA support.

demos/vue-supabase-todolist/.gitignore

@@ -25,3 +25,10 @@ components.d.ts
 *.njsproj
 *.sln
 *.sw?
+
+# PWA
+**/public/workbox-*.js
+**/public/sw.js
+**/public/swe-worker-*
+**/public/worker-*.js
+**/public/fallback-*.js

demos/vue-supabase-todolist/package.json

@@ -30,6 +30,7 @@
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.0",
+    "vite-plugin-pwa": "^0.19.2",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-vuetify": "^2.0.3",
     "vite-plugin-wasm": "^3.3.0",

demos/vue-supabase-todolist/public/powersync-logo.svg

@@ -5,6 +5,7 @@ import Vue from '@vitejs/plugin-vue';
 import ViteFonts from 'unplugin-fonts/vite';
 import Components from 'unplugin-vue-components/vite';
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // Utilities
 import { fileURLToPath, URL } from 'node:url';
@@ -29,6 +30,41 @@ export default defineConfig({
           }
         ]
       }
+    }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['powersync-logo.svg', 'supabase-logo.png', 'favicon.ico'],
+      manifest: {
+        theme_color: '#c44eff',
+        background_color: '#c44eff',
+        display: 'standalone',
+        scope: '/',
+        start_url: '/',
+        name: 'PowerSync Vue Demo',
+        short_name: 'PowerSync Vue',
+        icons: [
+          {
+            src: '/icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: '/icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
+          },
+          {
+            src: '/icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
+          },
+          {
+            src: '/icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
     })
   ],
   define: { 'process.env': {} },