痛點
跑步社團的訓練工具散落在各種 App 與網頁:配速換算開一個、訓練區間查另一個、補給計算又是一個,練跑現場手機訊號差還常打不開。
解法
一支單檔靜態 PWA、無框架無 build step,六個分頁把跑者的日常算完:
- PACE — 單圈換算每公里、五個距離的成績預測、目標反推
- WORKOUT — fartlek 表示法的解析器 + 手動表單,算出距離/時間/強度
- ZONES — VDOT 計算(Daniels 公式)+ Karvonen 心率區間
- FUEL — 台灣補給品資料庫(45 項),碳水/鈉/咖啡因目標,用 branch-and-bound 解出成本最佳的補給組合
- ROAD — GPX 上傳、坡度校正配速(GAP)分段、配速手環匯出(PDF/PNG)
- TRAIL — 越野完賽時間預測(Naismith 法則)、自補給策略
技術選型理由
- 單檔靜態 + 離線優先:練跑場景網路不穩,stale-while-revalidate 的 Service Worker 讓它一次載入永遠打得開
- 資料準確性是底線:補給用三層信心模型,沒有資料就標示「需自行確認」,絕不編造數值
- Cloudflare D1 記錄使用:理解大家實際怎麼用,但有隱私控制
成果
- 社團 ~5–20 人實際使用中,迭代來自真實回饋
- 約 200 個測試(9 個測試檔,涵蓋公式、安全、邊界情況)
- 安全強化:XSS escape、CSP 標頭、
/api/log同源檢查——這也讓它可以安全地嵌在這個頁面上給你直接玩