回歸 PWA 主場,打造即使斷網也能使用的極致體驗
雖然昨天的目標看似成功,實則好像還是有點問題,所以最後決定,重新回到最一開始的目標,繼續開發我的網頁應用程式。
既然 Vibe Fitness 的本體是個輕量、隨開即用的網頁應用程式,那麼讓它具備「離線瀏覽」與「極速載入」的能力,就是讓它從普通網頁蛻變成真正 App 的關鍵一步。
用自然語言寫出強大的離線快取機制
AI Prompt:
目前有一個使用 Firebase Firestore 的 Vibe Fitness PWA 專案。
請協助我完成以下優化:
Service Worker 實作: 請幫我寫一個 sw.js,將我們的核心靜態檔案(如 index.html, style.css, 主程式 JS)快取起來,確保使用者在離線狀態下也能打開 App 介面。
Firestore 離線持久化: 示範如何在前端初始化 Firebase 時,啟用 enableIndexedDbPersistence()(或最新的離線設定),讓使用者在沒網路時輸入的重訓紀錄能暫存於本機,等恢復網路時自動同步回雲端。
輸出成果:
Service Worker (快取代理人): 它就像是一個站在網頁和網路之間的「快取管理員」。當初次載入後,之後每次打開 App,它就會直接從手機本機把畫面「秒開」秀出來,大幅提升載入速度。
Offline Persistence (離線資料庫): 對於健身房這種常常收訊不好的環境來說至關重要。即使當下沒有網路,使用者依然可以新增重訓紀錄,Firebase 會在背景默默幫你把資料顧好,連線恢復時自動對齊雲端。