昨天把 Work Score 的公式拆開，對照了兩版權重與未知資料的處理。這些分數仍留在本機測試頁，還沒有接進首頁。
今天回到使用入口：讓 WorkCafe 可以加入手機主畫面，並在斷網時顯示清楚的提示。
這次先做 PWA 的基本設定。地圖與店家查詢仍需要網路，不把昨天的計分測試或尚未確認的評論摘要一起接進來。

1. 先確認測試範圍與網址

這次分三件事檢查：

• Manifest：讓瀏覽器辨識名稱、圖示與啟動方式。
• Service Worker：在頁面導覽因斷網失敗時，提供離線提示。
• Android 模擬器：加入主畫面，再從圖示啟動，確認首頁顯示。

能加入主畫面，不代表離線功能也完成了，兩者要分開測。
桌機先用 localhost 測試。這次手邊沒有 Android 手機，所以接著使用 Android 模擬器，檢查加入主畫面與啟動流程，實體手機另外保留待測。
模擬器的 localhost 預設指向模擬器本身。若要連回電腦上的 Laravel，可使用 adb reverse 將 8000 埠轉接到電腦，再於模擬器開啟 http://localhost:8000。這是本機開發的連線方式；日後提供一般手機使用時，仍需準備可存取、憑證受信任的 HTTPS 網址。

2. 在 Antigravity 先確認實作方式

先讓 Agent 檢查現況，避免同時裝了兩套 Service Worker，或把開發伺服器的檔案快取進去。
先貼以下規劃指令：

請規劃 WorkCafe 的基本 PWA 支援，先列計畫，不修改檔案。

閱讀 README、docs/ CURRENT 規格、package.json、Vite 設定、
Laravel Blade 入口、React 入口、路由及現有公開資源。
沿用 Laravel＋Inertia＋React，先確認是否已有 manifest、
Service Worker 或 PWA 套件，不重複安裝或註冊。

本次只處理：
1. Manifest、App Icon 與 standalone 啟動。
2. 網路失敗時的靜態離線提示。
3. 更新 Service Worker 後可切換到新版。

不更動首頁設計、篩選或計分邏輯。
不呼叫 Gemini 或 Places，不讀寫 Firestore。
不把本機測試頁設為 start_url，不公開 /test/*。
不快取地圖圖磚、第三方 API、店家回應、Inertia JSON、
含使用者資料的 HTML、金鑰或測試結果。

列出必要檔案、快取白名單、更新方式、
使用 production build 的本機驗證步驟、Android 模擬器的
adb reverse 連線方式，以及日後實體手機的 HTTPS 前置條件。
不要把新增 manifest 當成安裝與離線測試都已通過。
完成計畫後先停下。

確認修改範圍與快取清單後，再貼實作指令：

依確認的計畫，實作 WorkCafe 基本 PWA。

沿用現有 Laravel＋Inertia＋React 與 Vite 結構。
已有 PWA 設定時整合既有設定，不新增第二套 Service Worker。

Manifest 至少設定：
name、short_name、id、start_url、scope、display=standalone、
theme_color、background_color，以及可正常讀取的 192px、512px PNG icons。
依實際部署路徑設定 URL；啟動頁使用正式探索入口，不使用 /test/*。
沿用既有品牌圖示；若沒有可用素材，明確標示暫用圖示。
另提供 apple-touch-icon；maskable 圖示僅在安全區已確認時宣告。

Service Worker 只在 production build 且安全連線環境註冊，
避免 Vite HMR 開發模式受快取影響。
確認 worker URL、MIME type 與 scope 正確。

採最小快取白名單：靜態 offline.html 及它必要的本機圖示與樣式。
離線頁不可依賴 CDN、地圖、API 或 Laravel 資料讀取。
不要快取首頁的動態 HTML、Inertia JSON、/test/*、
第三方資源、API 回應或店家資料。

一般同源頁面導覽優先走網路，只有網路請求失敗時才回傳離線頁；
排除 /test/* 與 API 路徑。
不要把正常 404、500 或 JSON/API 請求換成離線 HTML。

離線頁清楚說明目前無法取得地圖與店家資訊，提供重新嘗試按鈕。
已開啟的首頁斷網時，保留可辨識的連線提示；
不能把畫面上舊的營業資訊當成即時資料。
恢復網路後可重新導覽回正式入口。

快取使用 WorkCafe 專屬名稱與版本。
更新時只清除此應用的舊快取，不清空同來源其他資料。
新版等待啟用時，提供明確的更新方式，避免未告知就強制重載。
回報如何驗證 waiting、啟用與重新載入後的控制版本。

執行相關檢查、npm run typecheck、npm run build，
回報實際可用的指令與結果；若專案沒有某個 script，明確列出。
提供使用 production build 的本機啟動方式，
確認 Blade 未繼續指向 Vite dev server。
Android 模擬器可用 adb reverse tcp:8000 tcp:8000 連回本機，
請先核對實際埠號與裝置；沒有可用環境時列出阻礙。
模擬器結果與實體手機結果分開記錄，不宣稱已完成真機驗證。

不部署、不開公開 tunnel、不改防火牆或正式環境。
不自動 commit 或 push。
完成後列出修改檔案、實際測試網址、
已驗證項目及仍需瀏覽器或真機驗證的項目。

3. 用建置後的版本檢查 Manifest

等 Agent 完成實作與建置，再依回報的方式開啟 Laravel 網站。這次驗證使用 production build，不使用仍連著 Vite HMR 的頁面。
首頁載入後，我在瀏覽器的 Manifest 面板確認名稱與簡稱都是 WorkCafe，啟動網址為 /，顯示模式為 standalone。192px 與 512px 的圖示也都有顯示。這一步確認的是瀏覽器讀到了設定，安裝與離線功能仍要分開測。

📸 圖片 1｜瀏覽器讀取到的 Manifest 與 WorkCafe 圖示

4. 確認 Service Worker，再測離線

接著檢查 Service Worker。畫面顯示 sw.js 已啟用並執行中，Clients 也列出目前的 localhost 頁面。
再看 workcafe-static-v1 快取，共有六筆：offline.html、manifest.webmanifest、favicon.ico，以及三個圖示檔。這份清單沒有店家查詢結果、地圖圖磚或本機測試資料；畫面中的另一個 explicit-blocklist 快取尚未核對，不納入這次結論。

📸 圖片 2-1｜Service Worker 已啟用並控制頁面

📸 圖片 2-2｜離線頁與必要靜態資源的快取清單

在線上載入首頁後，我勾選 Offline，再重新整理。這次出現了 WorkCafe 的離線提示與「重新連線嘗試」按鈕，沒有直接落到瀏覽器的斷線錯誤頁。
這張圖確認了斷網後的提示畫面，還不能證明恢復連線也正常。接下來要取消 Offline，檢查自動返回或按鈕重試是否能回到首頁；恢復流程目前保留待驗證。

📸 圖片 2-3｜斷網重新載入後的離線提示

5. 在 Android 模擬器確認加入主畫面與啟動

桌機的 Manifest、Service Worker 與離線提示確認後，接著測 Android 模擬器。先確認模擬器的 Chrome 能開啟 WorkCafe，再加入主畫面。
這次主畫面已出現 WorkCafe 圖示。點開後，先顯示應用名稱與圖示，再載入探索首頁。畫面沒有一般 Chrome 的網址列，地圖、店家卡片與示範資料標示都有顯示。
這裡記錄的是 Android 模擬器的啟動結果，不是實體手機測試。搜尋、篩選與安全區的完整操作檢查，也不能只靠首頁截圖判定通過。

📸 圖片 3-1｜Android 模擬器主畫面上的 WorkCafe 圖示

📸 圖片 3-2｜啟動 WorkCafe：顯示應用名稱與圖示

📸 圖片 3-3｜Android 模擬器啟動後的首頁：地圖與店家卡片正常顯示

6. 接著要驗證的事：更新與恢復連線

保留已安裝的版本，再準備一個可辨識的測試更新，例如離線頁的版本文字。重新建置，透過同一個測試網址提供新版，依實作的更新方式啟用。
更新後確認 Service Worker 與離線頁都已切到新版，再重新測一次離線與恢復。不要先清掉所有網站資料，否則只能證明重新安裝成功，無法確認舊版能正常更新。
版本更新目前尚未有實測紀錄。後續會和恢復連線一起確認，並另外記錄搜尋、篩選與實體手機的測試結果。

先讓入口與斷網狀態說得清楚

昨天檢查的是每一分怎麼算，今天檢查的是使用者怎麼進來，以及沒網路時會看到什麼。
這次已看到瀏覽器讀取 Manifest 與圖示、Service Worker 啟用，以及斷網後的離線提示。Android 模擬器也能從主畫面圖示啟動，載入地圖與店家卡片。
入口與離線畫面有了實際結果，接下來還要確認恢復連線、版本更新與操作流程。Work Score 仍留在原本的本機測試頁，這次沒有把它接進首頁。

參考：MDN：PWA 安裝條件、Chrome：PWA 除錯、Apple：將網站加入 iPhone 主畫面。