本篇重點
- 簡潔、無需付費的跑步配速工具
- 自訂配速目標與語音回報
- 即時配速與時間儀表板
- 訓練總結，平均配速分、每公里分段數據表格
- 跑步配速助手使用教學
- web app 的背景執行限制
當初在練習跑步時，想找一款能夠單純專注在配速和語音回報的工具作輔助，但實際使用市面上的跑步 APP 後，發現幾個問題：
- 語音播報內容與節奏不符合需求
- 功能過於複雜，例如社群、課程、排行榜等元素
- 部分關鍵功能需要付費才能使用
所以決定自行製作一個專注於「配速控制」的 Web App，並嘗試使用 Gemini Canvas 進行開發，打造一個簡潔、可安裝、無需付費的跑步配速工具。
功能介紹
| 功能 | 說明 |
|---|---|
| 自訂目標距離與時間 | 設定總距離與預期完成時間 |
| 自訂語音回報間隔 | 設定語音回報距離間隔 |
| 即時配速儀表板 | 顯示時間、距離、平均配速 |
| 語音回報 | 依距離間隔設定自動播報目前成績 |
| 訓練總結 | 提供總里程、平均配速及每公里分段數據分析 |
使用步驟
設定跑步目標
- 設定目標距離和目標時間，設定後會顯示目標配速
- 設定語音回報間隔，設定後會依距離間隔自動播報目前成績
開始跑步
- 點擊 開始跑步
- 開啟 GPS 定位權限
- 即時儀表板開始計算時間與距離
語音播報
- 每完成指定距離自動語音回報
- 播報內容包含：
- 目前總距離
- 平均配速
- 與目標配速的差距（領先或落後幾秒）
訓練總結
跑步結束後，會產生完整統計資料：
第一部分：總覽數據
- 🏃 總公里
- ⏱ 訓練時間
- ⚡ 平均配速
第二部分：每公里分段數據分析
- 每公里的時間
- 每公里的平均配速
- 每公里與目標配速的差距
背景執行的限制
關閉螢幕或離開瀏覽器後無法持續計算距離與時間
- 關閉螢幕
- 切換到其他 App
- 最小化瀏覽器
原因：
- 行動瀏覽器會暫停背景分頁的 JavaScript 執行
- Web App 無法在背景取得 GPS 權限
- iOS 與 Android 對背景定位有安全限制
這也是 Web App 與原生 App 的核心差異。
PWA 應用
目前版本屬於 PWA，優勢在於：
- 無需下載
- 無需註冊
- 可快速迭代
可使用 Chrome 或 Safari 開啟，再點選「加入主畫面」獲得最佳體驗。
| 項目 | Web App (PWA) | 原生 App |
|---|---|---|
| 安裝方式 | 可直接透過瀏覽器安裝 | 需透過 App Store / Play 商店 |
| 開發成本 | 單一前端即可完成 | 需分平台開發 |
| 背景運作 | 受瀏覽器限制 | 完整權限，背景執行最穩定 |
| 更新方式 | 即時更新 | 需重新上架審核 |
| 語音與硬體控制 | 支援有限 | 完整支援 |
未來優化方向
後續若有時間，會考慮以下改進：
- 訓練結算：增加訓練步數、消耗的卡路里數的數據。
- 數據圖表：使用 SVG 繪製配速曲線，數據視覺化。
- 多語系支持：增加多語言的配置。
線上體驗
建議在行動裝置上開啟，並允許定位權限，獲得完整使用體驗。
