Pwa deployment in cloudflare #108
Conversation
deployed preview: https://108.connect-d5y.pages.devWelcome to new-connect! Make sure to:
Mobile
Desktop
|
This reverts commit ae9d7e4.
lighthouserc.json
Outdated
| "ci": { | ||
| "collect": { | ||
| "url": ["http://localhost:4173"], | ||
| "startServerCommand": "bun run start | sed -u 's/^/[server] /' & pid=$!; sleep 2; echo 'Server is ready'; wait $pid", |
There was a problem hiding this comment.
Lighthouse CI uses "Server is ready" echo command to indicate when to start analysis.
| @@ -11,7 +11,11 @@ | |||
| "scripts": { | |||
| "build": "vite build", | |||
| "dev": "vite", | |||
| "generate-pwa-assets": "npx pwa-asset-generator ./public/images/icon-vector.svg ./pwa-assets -m ./public/manifest.json -i ./index.html --sizes \"72x72,96x96,128x128,144x144,152x152,192x192,384x384,512x512\" --quality 75 --background \"#ffffff\" --padding \"10%\" --platform android,ios --opaque false", | |||
| "move-pwa-assets": "rm -rf ./public/pwa-assets && mv ./pwa-assets ./public/", | |||
| "pwa-setup": "npm run generate-pwa-assets && npm run move-pwa-assets", | |||
There was a problem hiding this comment.
-
"generate-pwa-assets":
- Takes our vector icon from public/images/icon-vector.svg
- Generates various sizes of icons required for PWA (72px to 512px)
- Updates manifest.json and index.html with the new icons
- Applies settings:
- 75% image quality for optimization
- White background
- 10% padding around icons
- Compatible with both Android and iOS
- Transparent background allowed
-
"move-pwa-assets":
- Moves generated assets to the public directory
- Cleans up old assets first to avoid duplicates
-
"pwa-setup":
- Runs both commands in sequence to generate and organize PWA assets
| @@ -0,0 +1,76 @@ | |||
| const SERVICE_WORKER_VERSION = 1; | |||
| const CACHE_NAME = `comma-connect-cache-v${SERVICE_WORKER_VERSION}`; | |||
|
|
|||
There was a problem hiding this comment.
Incrementing the version number forces browsers to update their cached service worker when you deploy changes - without it, users might keep running old versions.
| type: 'asset', | ||
| fileName: `pwa-assets/${file}`, | ||
| source: fs.readFileSync(path.resolve(pwaAssetsDir, file)), | ||
| }) |
There was a problem hiding this comment.
pwa-asset-generator doesn't allow us to specify a reference path for assets separate from where they're actually placed (ie: assets placed in dist are referenced as /dist/pwa-assets by pwa-asset-generator's auto-generated code)
So this manually places the assets where they need to be.
|
This PR is quite large. Anything we can split out? |
Features
Testing
Potential Improvements
Can implement the Richer PWA UI which allows us to customize the PWA installation process
Demo (Ctrl + r to reload PWA app)
https://www.loom.com/share/042bfb4cdda84da0b4775f44cfd4ff05?sid=7f6a27a2-5de4-4d17-bb9f-d7984d4d0bd2
Closes #59