Add PWA manifest + icons so iPad opens Tx OS full-screen (Task #550)

Problem: on the iPad the Safari URL bar stayed visible even after
"Add to Home Screen" because index.html had no PWA manifest and no
Apple PWA meta tags — the home-screen icon opened a normal Safari tab.

Changes:
- New `artifacts/tx-os/public/manifest.webmanifest`:
  name/short_name "Tx OS", start_url "/", scope "/",
  display "standalone", background_color and theme_color "#0B1E3F"
  (matches the Meetings brand), and 3 icons (192/512 "any" + 512
  "maskable" with safe-area padding).
- Generated icon PNGs from the existing `public/favicon.svg` brand
  mark via ImageMagick:
    public/icons/icon-192.png            (192x192)
    public/icons/icon-512.png            (512x512)
    public/icons/icon-maskable-512.png   (512x512, 360x360 logo
                                          centered on #0B1E3F so iOS/
                                          Android masks don't crop)
    public/apple-touch-icon.png          (180x180, iPad/iPhone home)
- `artifacts/tx-os/index.html` head: added <link rel="manifest">,
  <link rel="apple-touch-icon">, plus apple-mobile-web-app-capable,
  mobile-web-app-capable, apple-mobile-web-app-status-bar-style
  (default), apple-mobile-web-app-title, and theme-color meta tags.
- `replit.md`: new "iPad / iPhone — open Tx OS full-screen" section
  with the one-time Add-to-Home-Screen steps and the gotcha that
  pre-existing shortcuts must be removed and re-added to pick up the
  manifest.

Verified: dev server returns 200 for /manifest.webmanifest,
/apple-touch-icon.png, and /icons/icon-192.png. The new files all
live under public/ so they're copied verbatim into the nginx image
on the next docker build.
This commit is contained in:
riyadhafraa
2026-05-16 08:51:25 +00:00
parent b69bcd4241
commit a6d5988421
6 changed files with 46 additions and 0 deletions
+16
View File
@@ -5,6 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
<title>Tx OS</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!--
PWA / "Add to Home Screen" — when the user installs Tx OS to the
iPad/iPhone home screen (Share → Add to Home Screen) the app
launches full-screen with no Safari URL bar. The same manifest
also makes the app installable from Chrome (Add to Dock / Install).
Note: existing home-screen shortcuts created BEFORE these tags
shipped will keep opening in regular Safari with the URL bar —
remove and re-add the icon to pick up the manifest.
-->
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Tx OS" />
<meta name="theme-color" content="#0B1E3F" />
<!--
Fonts are now bundled locally via `src/custom-fonts.css`
(DIN Next LT Arabic, Tajawal, Helvetica Neue LT Arabic,
Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

@@ -0,0 +1,30 @@
{
"name": "Tx OS",
"short_name": "Tx OS",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "any",
"background_color": "#0B1E3F",
"theme_color": "#0B1E3F",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}