本頁要驗證什麼
- 線上載入後離線，再重新打開，能否讀到最後看到的網頁。
- A. 切到其他 app 再切回前景。
- B. 把 tab / 瀏覽器從 task switcher 滑掉再重開。
- C. 完全離線後從桌面 PWA icon 啟動。
- 已閱讀過的 N 篇文章是否都能離線閱讀（預設 N=5，可在狀態列調整 1–20）。
- 讀第 (N+1) 篇後，第 1 篇應該從「離線可讀」列表被踢出（LRU）。
- 圖片是否一併離線可見。圖片來自
picsum.photos，SW 用 cache-first 策略，預設保留最近 30 張。
建議測試流程（手機）
- 在有網路時打開本站。
- 在狀態列確認
SW: active與shell / data / images三個 cache 都有內容。 - 逐一點開 5 篇文章（往下捲動，等內容與圖片載入完）。
- 開啟飛航模式（或在狀態列按「強制離線」）。
- 重新整理列表頁：應該還能看見全部 20 篇文章卡片。
- 已讀過的 5 篇都應該能再次開啟，並顯示「離線可讀」徽章。
- 按 背景 → 前景 切換；再試 task switcher 滑掉 → 重開；都記錄結果。
若按下「強制離線」後，飛航模式關閉但 SW 仍會擋下所有網路請求 — 這個 toggle 是 SW 內模擬，不依賴 DevTools，所以手機也能用。
加到主畫面（iOS）
- 用 Safari 開啟本站。
- 下方分享按鈕 → 「加入主畫面」。
- 之後從桌面 icon 啟動會以 standalone 模式打開。
加到主畫面（Android）
- 用 Chrome（或 Samsung Internet / Edge）開啟本站。
- 選單 → 「加入主畫面」/「安裝應用程式」。
- 之後從桌面 icon 啟動會以 standalone 模式打開。
狀態列各項解讀
- 線上 / 離線：
navigator.onLine+ 主動 ping/ping.txt的綜合結果。 - 強制離線：SW 內 flag，會擋所有 fetch（即使實際有網路）。
- SW：Service Worker 狀態（installing / waiting / active）。
- 顯示模式：
standalone代表是從主畫面 icon 啟動的 PWA；browser代表還在瀏覽器分頁裡。 - shell / data / images：Cache Storage 中各 bucket 的檔案數。
- 已讀文章（IDB）：IndexedDB 中保存的「離線可讀」文章；達到上限會自動踢最舊的。
- 最近 fetch：來自 SW 的 broadcast。
cache-*代表從快取出貨；network-*代表從網路出貨；fail-*代表都拿不到。
清理與重設
- 狀態列「清快取」會清掉所有 Cache Storage（不含 IDB）。
- 狀態列「重設 IDB」會清掉已讀文章紀錄。
- 狀態列「重新註冊 SW」會 unregister 後重新註冊，會強制下載新版 SW。
已知限制
- iOS 上 Service Worker 可能被系統 evict（特別是長時間不開或記憶體吃緊時）。
- 跨瀏覽器在 iOS 上底層都是 WebKit，行為與 Safari 一致。
- Picsum 圖片以 opaque response 快取，瀏覽器估算的容量會偏高。