收不到訊號也要能用：PWA 離線優先設計的實戰筆記

台灣步道守護網是一個讓山友回報步道狀況的平台。它有一個很特別的需求：主要使用場景在山上，而山上常常沒有訊號。如果網站離線就不能用，這個產品就失去意義。所以從第一天起，架構就是「離線優先」（offline-first）——把離線當成常態而不是例外。

Service Worker 是核心

PWA 的離線能力來自 Service Worker：一個攔在網頁與網路之間的代理層。頁面外殼、樣式、腳本與步道基礎資料在使用者有網路時預先快取，之後不管有沒有訊號，網站都能立刻開起來。快取策略依資源性質分流——靜態資源用 cache-first，會變動的資料用 stale-while-revalidate，回報的提交則進佇列等待網路恢復後送出。

離線時的使用者體驗

離線不該是一個錯誤畫面。使用者在山上填好的回報會先存在本機，介面明確告知「已儲存，將於恢復連線後送出」；回到訊號區，背景同步自動把佇列裡的回報送出。這裡的設計重點是誠實——讓使用者隨時知道資料現在在哪裡、什麼狀態，信任感就是這樣建立的。

圖表與後台

步道狀況的統計用 D3.js 繪製，資料先在 server 端整理成精簡的 JSON，前端只負責呈現，圖表在低階手機上也能順跑。後台則用 Drupal 10——內容審核、權限分級、編輯流程這些 CMS 的強項不需要重造輪子，工程資源集中在前端的離線體驗上。

心得

離線優先不是加一個快取就完事，它影響資料流的每一層：什麼先快取、什麼進佇列、衝突怎麼解、介面怎麼說實話。但做對了，產品就能到達一般網站到不了的地方——字面意義上的。