add PWA plugin

This commit is contained in:
geoffsee
2025-05-29 21:02:54 -04:00
parent 246b673111
commit 84b0ea0307
3 changed files with 1106 additions and 73 deletions

1053
bun.lock

File diff suppressed because it is too large Load Diff

View File

@@ -8,7 +8,7 @@
"client": "pnpm client:dev",
"client:build": "vite build",
"server:build": "WRANGLER_LOG=info wrangler build",
"deploy": "CI=true vite build && wrangler deploy --minify",
"deploy": "CI=true; NODE_ENV=production vite build && NODE_ENV=production wrangler deploy --minify",
"deploy:secrets": "wrangler secret bulk secrets.json",
"deploy:email-service": "wrangler deploy --cwd workers/email",
"deploy:analytics-service": "wrangler deploy --cwd workers/analytics",
@@ -54,6 +54,7 @@
"typescript": "^5.7.2",
"vike": "0.4.193",
"vite": "^5.4.11",
"vite-plugin-pwa": "^1.0.0",
"wrangler": "^4.18.0",
"zod": "^3.23.8"
},

View File

@@ -2,6 +2,7 @@ import react from "@vitejs/plugin-react";
import vike from "vike/plugin";
import {defineConfig} from "vite";
import * as child_process from "node:child_process";
import {VitePWA} from 'vite-plugin-pwa';
const APP_FQDN = "open-gsio.seemueller.workers.dev";
@@ -27,7 +28,13 @@ export default defineConfig(({ command }) => {
prerender: true,
}),
react(),
// PWA plugin saves money on data transfer by caching assets on the client
VitePWA({
registerType: 'autoUpdate',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}']
}
})
],
server: {
port: 3000,
@@ -41,38 +48,14 @@ export default defineConfig(({ command }) => {
},
},
},
esbuild: {
drop: ["console"]
},
build: {
emitAssets: false,
sourcemap: false,
minify: true,
minify: "esbuild",
target: ["es2020", "edge88", "firefox78", "chrome87", "safari13"],
rollupOptions: {
output: {
manualChunks(id: string) {
if (id.includes('node_modules')) {
// creating a chunk to react routes deps. Reducing the vendor chunk size
if (id.includes('shiki/dist/wasm')) {
return '@wasm-bundle';
}
if (id.includes('katex') || id.includes('marked') || id.includes('shiki')) {
return '@resources-bundle';
}
if (id.includes('chakra') || id.includes('emotion-react')) {
return '@gui-bundle';
}
if (id.includes('react-dom') || id.includes('vike') || id.includes('mobx') || id.includes('framer-motion')) {
return '@logic-bundle';
}
return 'vendor';
}
}
}
},
cssMinify: true
},
};