今天是第一階段的最後一天，目標很單純：把專案跑起來，並實際在瀏覽器上「安裝」它。
在 syncetalite-pwa/ 資料夾下執行：
npm run dev
Vite 會啟動一個本機開發伺服器（通常是 http://localhost:5173），用 Chrome 打開這個網址。
編輯 index.html，讓畫面上至少有標題與一個容器，之後每天的元件都會掛載進去：
<!-- index.html -->
<body>
<div id="app">
<h1>SyncETA Lite</h1>
<p>你的智慧出發時間推薦助手</p>
<div id="arrival-list"></div>
<div id="map"></div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
打開 Chrome 開發者工具（F12），切到 Application 分頁，左側選單點選 Manifest，可以檢查：
如果一切正確，網址列右側會出現一個「安裝」圖示（一個帶加號的螢幕圖案），點下去就能把 SyncETA Lite 加到你的桌面或手機主畫面。
小提醒：圖示準備
public/icons/icon-192.png 與 icon-512.png 記得先放兩張任意的正方形 PNG 圖片進去（之後可以再換成正式設計），沒有圖示的話，Chrome 的可安裝檢查會失敗。
第一階段完成
到這裡，我們已經完成了：
- 專案初始化與資料夾結構
- Manifest、Service Worker、HTTPS 三要素
- 一個可以實際安裝到主畫面的 PWA 空殼
雖然現在裡面還沒有真正的資料，但架子已經穩了。從明天開始的第二階段，我們要正式串接 TDX 運輸資料流通服務平台，把真實的公車 / 捷運到站資料抓進來。
iThome鐵人賽
看影片追技術