Awesome Running Toolkit

跑步訓練 PWA 工具,給我與小範圍跑團夥伴用。離線可用、加到主畫面像 App、使用紀錄自動寫進 Cloudflare D1。配速、訓練、補給、GPX 一站搞定。

Vanilla JSPWACloudflare PagesCloudflare D1GitHub Actions
running-toolkit.longbia.com LIVE · try it
Open fullscreen ↗

痛點

跑步社團的訓練工具散落在各種 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 同源檢查——這也讓它可以安全地嵌在這個頁面上給你直接玩
← All projects