Added initial PWA support

code/client/package.json

@@ -13,7 +13,7 @@
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
     "build": "tsc && vite build",
-    "generate": "pwa-assets-generator",
+    "generate": "pwa-assets-generator -c src/pwa/pwa-assets.config.ts",
     "knip": "knip",
     "format": "prettier --write . && eslint . --ext .ts,.tsx",
     "preview": "vite preview"

code/client/src/pwa/manifest-config.ts

@@ -11,35 +11,25 @@ export const manifestConfig: Partial<ManifestOptions> = {
   orientation: 'portrait-primary',
   icons: [
     {
-      src: '/android-chrome-192x192.png',
-      sizes: '192x192',
-      type: 'image/png',
-      purpose: 'any maskable',
-    },
-    {
-      src: '/android-chrome-512x512.png',
-      sizes: '512x512',
+      src: 'pwa-64x64.png',
+      sizes: '64x64',
       type: 'image/png',
-      purpose: 'any maskable',
     },
-    /* favicon */
     {
-      src: '/favicon-16x16.png',
-      sizes: '16x16',
+      src: 'pwa-192x192.png',
+      sizes: '192x192',
       type: 'image/png',
-      purpose: 'any maskable',
     },
     {
-      src: '/favicon-32x32.png',
-      sizes: '32x32',
+      src: 'pwa-512x512.png',
+      sizes: '512x512',
       type: 'image/png',
-      purpose: 'any maskable',
     },
     {
-      src: '/apple-touch-icon.png',
-      sizes: '180x180',
+      src: 'maskable-icon-512x512.png',
+      sizes: '512x512',
       type: 'image/png',
-      purpose: 'any maskable',
+      purpose: 'maskable',
     },
   ],
 };

code/client/src/pwa/pwa-assets.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig, minimal2023Preset as preset } from '@vite-pwa/assets-generator/config';
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: '2023',
+  },
+  preset,
+  images: ['public/notespace.png'],
+});

code/client/src/pwa/pwa-config.ts

@@ -1,20 +1,19 @@
-import { injectConfig } from './inject-config.ts';
+//import { injectConfig } from './inject-config.ts';
 import { manifestConfig } from './manifest-config.ts';
 import { VitePWAOptions } from 'vite-plugin-pwa';
+import { workboxConfig } from './workbox-config.ts';
 
 export const pwaConfig: Partial<VitePWAOptions> = {
   mode: 'development',
-  base: '/',
-  strategies: 'injectManifest',
-  srcDir: './src/pwa',
-  filename: 'sw.ts',
+  strategies: 'generateSW',
   //injectRegister: false,
-  injectManifest: injectConfig,
-  registerType: 'autoUpdate',
+  //injectManifest: injectConfig,
+  //registerType: 'prompt',
   manifest: manifestConfig,
+  workbox: workboxConfig,
   devOptions: {
     enabled: true,
-    navigateFallback: '../../index.html',
+    navigateFallback: 'index.html',
     type: 'module',
   },
 };

code/client/src/pwa/service-worker.ts

@@ -0,0 +1,7 @@
+self.addEventListener('install', event => {
+  console.log('Service worker installing...');
+});
+
+self.addEventListener('fetch', event => {
+  console.log('Fetching:', event);
+});

code/client/src/pwa/workbox-config.ts

@@ -0,0 +1,52 @@
+import { GenerateSWOptions } from 'workbox-build';
+
+export const workboxConfig: Partial<GenerateSWOptions> = {
+  runtimeCaching: [
+    {
+      urlPattern: ({ url }) => url.pathname.startsWith('/'),
+      handler: async ({ event }) => {
+        console.log('Fetching:', event);
+        try {
+          const resp = await fetch(event.request);
+          console.log('Fetched:', resp);
+          return resp;
+        } catch (error) {
+          // Fetch failed, fetch from cache
+          console.error('Error:', error);
+          return caches.match(event.request);
+        }
+      },
+      options: {
+        cacheName: 'app-cache',
+        cacheableResponse: { statuses: [0, 200] },
+      },
+    },
+    // api calls to localhost:8080
+    {
+      urlPattern: ({ url }) => url.origin === 'http://localhost:8080',
+      handler: async ({ event }) => {
+        console.log('Fetching:', event);
+        try {
+          const resp = fetch(event.request);
+          console.log('Fetched:', resp);
+          return resp;
+        } catch (error) {
+          console.error('Error:', error);
+          const cache = await caches.open('api-cache');
+          const cachedResponse = await cache.match(event.request);
+          return cachedResponse;
+        }
+      },
+      options: {
+        cacheName: 'api-cache',
+        cacheableResponse: { statuses: [0, 200] },
+        expiration: {
+          maxEntries: 10,
+          maxAgeSeconds: 60,
+        },
+      },
+    },
+  ],
+  //importScripts: ['./service-worker.ts'],
+  //cleanupOutdatedCaches: true,
+};

code/client/vite.config.ts

@@ -6,8 +6,8 @@ import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { qrcode } from 'vite-plugin-qrcode';
 import { config } from 'dotenv';
-import { VitePWA } from 'vite-plugin-pwa';
-import { pwaConfig } from './src/pwa/pwa-config.ts';
+// import { VitePWA } from 'vite-plugin-pwa';
+// import { pwaConfig } from './src/pwa/pwa-config.ts';
 
 config();
 
@@ -16,7 +16,7 @@ export default defineConfig({
   server: {
     port: Number.parseInt(process.env.CLIENT_PORT) || 5173,
   },
-  plugins: [tsconfigPaths(), qrcode(), react(), VitePWA(pwaConfig)],
+  plugins: [tsconfigPaths(), qrcode(), react() /*VitePWA(pwaConfig)*/],
   build: {
     //sourcemap: true,
     rollupOptions: {

code/shared/crdt/FugueTree.ts

@@ -1,6 +1,5 @@
 import { Id, Node, Nodes } from "./types/nodes";
 import { BlockStyle, InlineStyle } from "../types/styles";
-
 import { rootNode, treeNode } from "./utils";
 import { RootNode, NodeType } from "./types/nodes";