riyadhafraa
a6d5988421
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.
49 lines
2.3 KiB
HTML
49 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<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,
|
|
Helvetica Neue, Majalla). No third-party Google Fonts roundtrip
|
|
is needed at page load, which speeds up first paint and removes
|
|
the external dependency.
|
|
|
|
#350 (browser print): preload DIN Next LT Arabic — the app's
|
|
sole Arabic print font — so it's already in the HTTP cache by
|
|
the time `@font-face` (declared with `font-display: block` in
|
|
custom-fonts.css) wants to fetch it. Without this, Chrome's
|
|
print snapshot can be taken before the font is ready and the
|
|
output uses a system fallback that lacks Arabic GSUB shaping
|
|
(isolated, unjoined letters that look reversed).
|
|
-->
|
|
<link rel="preload" href="/fonts/DINNextLTArabic-Regular.ttf"
|
|
as="font" type="font/ttf" crossorigin="anonymous" />
|
|
<link rel="preload" href="/fonts/DINNextLTArabic-Bold.ttf"
|
|
as="font" type="font/ttf" crossorigin="anonymous" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|