feat(pwa): add web app manifest + icons for OS install support #11

Merged
christin merged 1 commit from christin into main 2026-07-21 18:05:09 +02:00
Owner

Christin: Chrome (and other browsers) can install a website as a
standalone app if it ships a web app manifest — wants that for FediSuite.

  • public/manifest.webmanifest: name/short_name/description, start_url
    and scope "/", display "standalone", background/theme color matching
    the app's dark surface token (#0a0a14), and an icons array.
  • public/icons/: icon-192.png, icon-512.png (purpose "any") and
    icon-maskable-512.png (purpose "maskable" — logo composited onto a
    solid #0a0a14 square with generous safe-zone padding, since maskable
    icons get cropped into arbitrary shapes by the OS and can't rely on
    transparent edges). Generated via ImageMagick from the existing
    logo/fedisuite-logo-solo-500px-transparent.png source (the only asset
    in the repo above 180px — apple-touch-icon.png and the public/logos/
    files are all too small to use directly for a 512px icon).
  • index.html: , theme-color meta, and the usual
    apple-mobile-web-app-* meta trio so iOS Safari's "Add to Home Screen"
    picks up the same manifest/icon rather than falling back to a
    screenshot thumbnail.

Deliberately no service worker: current Chrome's install-prompt
criteria (manifest + icons + HTTPS + standalone display) don't require
one anymore, and offline caching wasn't asked for -- adding one would
be real, unrequested risk (stale-cache bugs) for an app that ships
updates this often. Can be added later as a separate, explicit piece of
work if Christin wants offline support too.

Verified against the actual served files, not just written on paper:
built with vite, confirmed manifest.webmanifest and all three icons
land in dist/ at the right paths; ran the dev server and used
Playwright to fetch /manifest.webmanifest and each icon URL directly,
confirming HTTP 200 and (for the manifest) the correct
application/manifest+json content-type via the mime-types package
Express's static middleware already uses in production.

Folded into the already-tagged v1.6.1 per Christin's explicit call
after being told v1.6.1's Docker image was already published to Docker
Hub -- new CHANGELOG "### Added" entry under the existing v1.6.1
heading (not a new version section). The v1.6.1 git tag itself and the
already-published christinloehner/fedisuite:1.6.1 image will be
recreated/overwritten once this reaches main, not part of this commit.

npx tsc --noEmit, npm run build, npm run test (130 tests / 25 files)
all green.

Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com

Christin: Chrome (and other browsers) can install a website as a standalone app if it ships a web app manifest — wants that for FediSuite. - public/manifest.webmanifest: name/short_name/description, start_url and scope "/", display "standalone", background/theme color matching the app's dark surface token (#0a0a14), and an icons array. - public/icons/: icon-192.png, icon-512.png (purpose "any") and icon-maskable-512.png (purpose "maskable" — logo composited onto a solid #0a0a14 square with generous safe-zone padding, since maskable icons get cropped into arbitrary shapes by the OS and can't rely on transparent edges). Generated via ImageMagick from the existing logo/fedisuite-logo-solo-500px-transparent.png source (the only asset in the repo above 180px — apple-touch-icon.png and the public/logos/ files are all too small to use directly for a 512px icon). - index.html: <link rel="manifest">, theme-color meta, and the usual apple-mobile-web-app-* meta trio so iOS Safari's "Add to Home Screen" picks up the same manifest/icon rather than falling back to a screenshot thumbnail. Deliberately no service worker: current Chrome's install-prompt criteria (manifest + icons + HTTPS + standalone display) don't require one anymore, and offline caching wasn't asked for -- adding one would be real, unrequested risk (stale-cache bugs) for an app that ships updates this often. Can be added later as a separate, explicit piece of work if Christin wants offline support too. Verified against the actual served files, not just written on paper: built with vite, confirmed manifest.webmanifest and all three icons land in dist/ at the right paths; ran the dev server and used Playwright to fetch /manifest.webmanifest and each icon URL directly, confirming HTTP 200 and (for the manifest) the correct `application/manifest+json` content-type via the mime-types package Express's static middleware already uses in production. Folded into the already-tagged v1.6.1 per Christin's explicit call after being told v1.6.1's Docker image was already published to Docker Hub -- new CHANGELOG "### Added" entry under the existing v1.6.1 heading (not a new version section). The v1.6.1 git tag itself and the already-published christinloehner/fedisuite:1.6.1 image will be recreated/overwritten once this reaches main, not part of this commit. npx tsc --noEmit, npm run build, npm run test (130 tests / 25 files) all green. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Christin: Chrome (and other browsers) can install a website as a
standalone app if it ships a web app manifest — wants that for FediSuite.

- public/manifest.webmanifest: name/short_name/description, start_url
  and scope "/", display "standalone", background/theme color matching
  the app's dark surface token (#0a0a14), and an icons array.
- public/icons/: icon-192.png, icon-512.png (purpose "any") and
  icon-maskable-512.png (purpose "maskable" — logo composited onto a
  solid #0a0a14 square with generous safe-zone padding, since maskable
  icons get cropped into arbitrary shapes by the OS and can't rely on
  transparent edges). Generated via ImageMagick from the existing
  logo/fedisuite-logo-solo-500px-transparent.png source (the only asset
  in the repo above 180px — apple-touch-icon.png and the public/logos/
  files are all too small to use directly for a 512px icon).
- index.html: <link rel="manifest">, theme-color meta, and the usual
  apple-mobile-web-app-* meta trio so iOS Safari's "Add to Home Screen"
  picks up the same manifest/icon rather than falling back to a
  screenshot thumbnail.

Deliberately no service worker: current Chrome's install-prompt
criteria (manifest + icons + HTTPS + standalone display) don't require
one anymore, and offline caching wasn't asked for -- adding one would
be real, unrequested risk (stale-cache bugs) for an app that ships
updates this often. Can be added later as a separate, explicit piece of
work if Christin wants offline support too.

Verified against the actual served files, not just written on paper:
built with vite, confirmed manifest.webmanifest and all three icons
land in dist/ at the right paths; ran the dev server and used
Playwright to fetch /manifest.webmanifest and each icon URL directly,
confirming HTTP 200 and (for the manifest) the correct
`application/manifest+json` content-type via the mime-types package
Express's static middleware already uses in production.

Folded into the already-tagged v1.6.1 per Christin's explicit call
after being told v1.6.1's Docker image was already published to Docker
Hub -- new CHANGELOG "### Added" entry under the existing v1.6.1
heading (not a new version section). The v1.6.1 git tag itself and the
already-published christinloehner/fedisuite:1.6.1 image will be
recreated/overwritten once this reaches main, not part of this commit.

npx tsc --noEmit, npm run build, npm run test (130 tests / 25 files)
all green.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
FediSuite/FediSuite-Docker-Image!11
No description provided.