只要有了 Service Worker (昨天的進度) 的加持,我們就能利用 Firebase Cloud Messaging (FCM) 讓網頁在關閉狀態下,依然能跳出像原生 App 一樣的通知(例如:「嘿bro,練腿了別混了,該去健身房報到了!」)。
AI Prompt:
我的 Vibe Fitness PWA 已經配置了 Firebase 與基礎的 Service Worker (sw.js)。
請幫我完成 Firebase Cloud Messaging (FCM) 的推播功能實作:
獲取推播權限與 Token: 請寫一段 JavaScript 邏輯,在使用者登入後向瀏覽器請求 Notification.requestPermission(),獲取推播權限,並利用 Firebase getToken 取得這台裝置的專屬 Token 存入 Firestore 裡。
背景接收推播: 請修改我的 sw.js,加入 firebase-messaging-sw.js 的背景接收邏輯,確保即使 PWA 沒開著,手機或電腦依然能跳出自訂的健身提醒通知。
輸出結果:
遇到了一些困難,包括了拿了金鑰,卻沒辦法推波通知,但也很難確認到底是哪一個環節出了問題,所以只能一步步排查

在這之後,我們的vibe coding 迎來了最大的問題,AI擅作主張把我們的檔案大改,如同畫面中的那樣,因而導致今日的成果以失敗告終.....