Add back PWA support; fix readme.

rkistner · rkistner · commit d14f9d9b8889 · 2024-03-06T13:17:38.000+02:00
diff --git a/demos/react-supabase-todolist/README.md b/demos/react-supabase-todolist/README.md
@@ -29,25 +29,25 @@ And then edit `.env.local` to insert your credentials for Supabase.
 Run the development server:
 
 ```bash
-pnpm watch
+pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 
 ## Progressive Web App (PWA)
 
-This demo is PWA compatible. PWA is not available in development (watch) mode.
+This demo is PWA compatible, and works fully offline. PWA is not available in development (watch) mode. The manifest and service worker is built using [vite-plugin-pwa](https://vite-pwa-org.netlify.app/).
 
-Build the production codebase
+Build the production codebase:
 
 ```bash
 pnpm build
 ```
 
-Run the production server
+Run the production server:
 
 ```bash
-pnpm start
+pnpm preview
 ```
 
 Open a browser on the served URL and install the PWA.
diff --git a/demos/react-supabase-todolist/package.json b/demos/react-supabase-todolist/package.json
@@ -31,6 +31,7 @@
     "babel-loader": "^9.1.3",
     "typescript": "^5",
     "vite": "^5.1.4",
+    "vite-plugin-pwa": "^0.19.2",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0"
   }
diff --git a/demos/react-supabase-todolist/public/manifest.json b/demos/react-supabase-todolist/public/manifest.json
diff --git a/demos/react-supabase-todolist/src/index.html b/demos/react-supabase-todolist/src/index.html
@@ -1,6 +1,5 @@
 <html lang="en">
   <head>
-    <link rel="manifest" href="/manifest.json" />
     <meta name="theme-color" content="#c44eff" />
     <link rel="apple-touch-icon" href="/icons/icon.png" />
     <link rel="stylesheet" href="./app/globals.css" />
diff --git a/demos/react-supabase-todolist/vite.config.mts b/demos/react-supabase-todolist/vite.config.mts
@@ -4,6 +4,7 @@ import { fileURLToPath, URL } from 'url';
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -26,7 +27,46 @@ export default defineConfig({
     exclude: ['@journeyapps/wa-sqlite', '@journeyapps/powersync-sdk-web'],
     include: ['object-hash', 'uuid', 'event-iterator', 'js-logger', 'lodash', 'can-ndjson-stream']
   },
-  plugins: [wasm(), topLevelAwait(), react()],
+  plugins: [
+    wasm(),
+    topLevelAwait(),
+    react(),
+    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 NextJS Demo',
+        short_name: 'PowerSync NextJS',
+        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'
+          }
+        ]
+      }
+    })
+  ],
   worker: {
     format: 'es',
     plugins: () => [wasm(), topLevelAwait()]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@`
`31`	`31`	`"babel-loader": "^9.1.3",`
`32`	`32`	`"typescript": "^5",`
`33`	`33`	`"vite": "^5.1.4",`
	`34`	`+ "vite-plugin-pwa": "^0.19.2",`
`34`	`35`	`"vite-plugin-top-level-await": "^1.4.1",`
`35`	`36`	`"vite-plugin-wasm": "^3.3.0"`
`36`	`37`	`}`