04138b435ab3c0d4fb4f655d67ce02de0c2b7136
1 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 julien
|
29f79d677e |
feat(portal-shell): full favicon set + PWA manifest (#84)
## Summary - Replace the single root `favicon.ico` with a complete asset bundle under [`apps/portal-shell/public/favicons/`](apps/portal-shell/public/favicons/): SVG primary favicon, PNG fallback (96×96), legacy ICO, Apple touch icon (180×180), and a Web App Manifest with 192 / 512 maskable PNGs. - Wire the assets in [`index.html`](apps/portal-shell/src/index.html) via the standard `<link rel="icon|apple-touch-icon|manifest">` block and add a matching `<meta name="theme-color" content="#ffffff">`. - Set the manifest name to `"APF Portal"` (short_name `"Portal"`) so the PWA install banner and home-screen icon read consistently with the in-app header. ## Why it matters - **Modern favicons.** SVG is now the primary icon — vector-clean at every density, automatic dark-mode adaptation when the SVG carries `prefers-color-scheme` rules. PNG + ICO entries cover legacy and pinned-tab contexts. - **Installability.** With a valid manifest + 192/512 icons + `display: standalone`, the portal is installable on Android home-screens and as a desktop PWA in Chromium-based browsers, without shipping a service worker. - **Mobile chrome.** `<meta name="theme-color">` aligned with the manifest's `theme_color` tints the browser address bar and the PWA chrome to white — matching the app header. ## Decisions worth flagging - **Icons declared `purpose: "maskable"` only.** The PNGs were generated with the Android safe-zone padding. On Android they render correctly (cropped to the device's adaptive shape); on contexts that ask for `"any"` the browser falls back to the SVG / PNG / ICO entries from the `<link rel="icon">` block, so nothing breaks. If we later want a no-padding edge-to-edge variant for desktop, we can add a second icon entry with `purpose: "any"` and a different source. - **`theme_color: #ffffff` rather than brand teal.** The app header is white in the v1 design; tinting the mobile chrome to teal would create a visible seam at the top of the viewport. We can revisit if a darker header lands. - **Cache-buster query strings kept (`?v=20260511`).** Static `public/` assets are not hashed by Angular's build (only bundled JS/CSS are), so the explicit version stamp guards against stale caches on icon updates. The date matches the generation day. ## What this PR explicitly does NOT do - Ship a service worker / offline support (PWA installability does not require it; offline strategy is a separate decision and likely a future ADR). - Replace the SVG icon contents with a brand-tuned design — uses the existing generator output. - Wire a localized manifest (single `name` / `short_name`, no `lang` variant per locale). ## Test plan - [x] `pnpm exec nx build portal-shell --configuration=production` — green, 100 kB gzip initial (unchanged). - [x] All 7 assets ship to `dist/apps/portal-shell/browser/favicons/`. - [x] `index.html` in the production build contains every `<link>` + the `theme-color` meta. - [ ] Manual: tab favicon visible in Chrome / Firefox / Safari. - [ ] Manual: Chrome DevTools → Application → Manifest reports no errors and shows both 192/512 icons. - [ ] Manual: Chrome desktop install prompt offers "Install APF Portal". - [ ] Manual: Add-to-Home-Screen on Android shows the maskable icon clipped to the device's adaptive shape. --------- Co-authored-by: Julien Gautier <julien.gautier@apf.asso.fr> Reviewed-on: #84 |