[P1][PWA] 內容頁返回列被狀態列遮蔽（safe-area 缺失）＋staging manifest 跨網域＋字體 preload 未使用

[s123104]

摘要

使用者於 staging PWA（standalone 安裝、iOS black-translucent 狀態列）實機回報：六個內容頁（FAQ／使用指南／關於／隱私權／開放資料／SEO 技術）共用的返回麵包屑列被系統狀態列完全遮蔽，導航不可用。另附帶兩項 staging 環境問題：manifest 指向跨網域 URL、字體 preload 未被使用產生 console warning。

背景／證據（使用者實機取證）

1. P0 返回列遮蔽：PageNavHeader（ContentPageLayout 共用）sticky 列寫 sticky top-0 但 padding 僅固定 py-2.5（10px），未吃 env(safe-area-inset-top)。PWA 已開 viewport-fit=cover ＋ apple-mobile-web-app-status-bar-style: black-translucent，standalone 安裝後該列頂進瀏海、被狀態列蓋住。換算器主畫面 safe-area 已處理故不受影響。使用者實測：套用專案既有 .pt-safe-top 類別後返回列往下移 59px，完全脫離狀態列。
2. staging manifest 跨網域：staging（https://ratewise-staging.zeabur.app/ratewise/）的 manifest.webmanifest scope／start_url 硬編 production 網域（https://app.haotool.org/ratewise/，fix(ratewise): 修復 PWA 冷啟動 HTTPS 連線不安全 #493 為修 HTTPS-First 冷啟動改為絕對 URL），staging 網域下屬跨網域 manifest，PWA 安裝性失效。
3. 字體 preload 未使用：index.html preload fonts/nunito-wordmark-900.woff2，但六個內容頁不渲染品牌 wordmark（無 AppLayout header、非 standalone 不出 splash），瀏覽器報「preloaded but not used」warning。
4. React chore(seo): 每日更新匯差範例數據 #418 hydration mismatch：已由 fix(ratewise): 修復 SSG 語言與 client 首屏不一致造成的 React #418 #595 修復（已併入 experiment 分支），本 issue 不重複處理。

影響

• PWA standalone 用戶在全部 6 個內容頁無法點擊返回／麵包屑（頂部導航不可用），屬高嚴重度 UX 阻斷。
• staging 環境 PWA 安裝與驗證流程失真，無法代表 production 行為。
• 內容頁 console warning 與 1.2KB 無效預載。

範圍

• apps/ratewise/src/components/PageNavHeader.tsx（safe-area padding）
• apps/ratewise/scripts/generate-manifest.mjs（scope/start_url 依部署環境）
• apps/ratewise/index.html（字體 preload）
• 對應守門測試

驗收標準

• CDP safe-area 模擬（top 59px）＋standalone 注入下，6 個內容頁返回列完全脫離狀態列（前後截圖）。
• 390×844 非 standalone（safe-area-inset-top = 0）視覺迴歸不變。
• staging base 情境 manifest scope／start_url 同源；production 預設行為不變（fix(ratewise): 修復 PWA 冷啟動 HTTPS 連線不安全 #493 不回歸）。
• 內容頁字體 preload warning 消失。
• 守門測試：返回列 sticky 元素必含 safe-area padding 斷言；manifest 同源測試。
• pnpm vitest run 全綠、typecheck、build 通過。

[s123104]

PR #613（審查 APPROVE）修除程式碼層根因後，生效前提為 ops 步驟：Zeabur staging 服務需設定 VITE_SITE_URL=https://ratewise-staging.zeabur.app/ratewise/，合併部署後執行 staging 實機複驗（manifest 同源＋可安裝）。本 issue 保持 open 至實機複驗通過。

[s123104]

QA-E staging 複驗：程式已修、環境變數未設 → ops 阻塞，保持 open

現況（staging build 2026-07-05T23:14Z，已含 #613）：

GET /ratewise/manifest.webmanifest
scope:     https://app.haotool.org/ratewise/   ← 仍跨網域
start_url: https://app.haotool.org/ratewise/

程式面 generate-manifest.mjs 已改由 VITE_SITE_URL 驅動（未設回退正式站值），行為符合設計；staging 要正確需在 Zeabur 設 VITE_SITE_URL=https://ratewise-staging.zeabur.app/ratewise/ 並 redeploy。

MCP 代設嘗試結果：Zeabur MCP token 僅能存取 production 專案 6932a7361a94e0d74fc7f5cc（唯一服務 app，網域 app.haotool.org；無 ratewise-staging 服務），且 MCP 無 list-projects 工具可定位 staging 專案 → 無法經 MCP 設定，需 ops 於 Dashboard 對 staging 服務手動設定後 redeploy，屆時再複驗 manifest 即可 close。

證據：.claude/product-intel/qa-staging-reverify.md。