feat(pwa): add web app manifest and install icons - #1252
Conversation
There was a problem hiding this comment.
Pull request overview
Adds basic PWA install metadata so “Add to Home Screen” uses the map’s configured name, theme color, and proper install icons (without introducing a service worker), supporting multi-domain deployments via NODE_CONFIG_ENV overrides.
Changes:
- Pass map title/short title/theme into the existing Vite favicon plugin.
- Extend the favicon Vite plugin to emit a web app manifest + PNG install icons and inject corresponding HTML tags.
- Update multi-domain documentation and allow committing bundled fallback PNG icons via
.gitignore.
Reviewed changes
Copilot reviewed 3 out of 8 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
vite.config.js |
Threads map title/theme config into the favicon plugin and reuses mapTheme for client config. |
packages/vite-plugins/lib/favicon.js |
Generates/serves manifest.webmanifest and icon assets; injects manifest/theme-color/apple-touch-icon tags. |
config/multi-domain-example/README.md |
Documents how to override per-domain PWA icons and how manifest fields are derived from config. |
.gitignore |
Ensures bundled fallback PWA PNG icons are tracked; ignores .history. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const pngSize = (file) => { | ||
| const header = Buffer.alloc(24) | ||
| const fd = fs.openSync(file, 'r') | ||
| try { | ||
| fs.readSync(fd, header, 0, 24, 0) | ||
| } finally { | ||
| fs.closeSync(fd) | ||
| } | ||
| return `${header.readUInt32BE(16)}x${header.readUInt32BE(20)}` | ||
| } |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8dd0867c35
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| faviconPlugin(isDevelopment, { | ||
| name: config.getSafe('map.general.title'), | ||
| shortName: config.getSafe('map.general.headerTitle'), | ||
| theme: mapTheme, |
There was a problem hiding this comment.
When the supported legacy multiDomains configuration serves multiple domains from one process, this always builds a single manifest from the base map object. The runtime explicitly selects each domain's merged title and theme through config.getMapConfig(req) in server/src/utils/getServerSettings.js, but every alternate host will receive the base domain's name, short name, and colors when added to a home screen. The manifest and associated HTML metadata need to be selected per request/host, or generated separately for every configured domain.
Useful? React with 👍 / 👎.
Adding the map to a phone home screen produced an unnamed, generic
shortcut. Emit a manifest plus install icons so it gets the map's name,
icon, theme color and splash screen instead.
The tags are injected by the favicon plugin rather than hardcoded in
index.html so the theme color follows each deploy's config. Icon lookup
mirrors the existing .ico cascade ({NODE_CONFIG_ENV}-{size}.png ->
favicon-{size}.png -> fallback-{size}.png), so multi-domain instances can
override any size. Manifest sizes are read from each PNG's IHDR rather
than its file name, so an override with different dimensions still
reports the truth.
No service worker: this is a live-data map (no major benefits). Chrome will therefore not fire
an install prompt, but manual "Add to home screen" works.