iT邦幫忙

2026 iThome 鐵人賽

DAY 21
0
Vibe Coding

以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。系列 第 21 篇

[Day 21 ] Vibe Coding 實戰:主動出擊——導入 FCM 網頁推播通知

  • 分享至 

  • xImage
  •  

只要有了 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 沒開著,手機或電腦依然能跳出自訂的健身提醒通知。

輸出結果:
遇到了一些困難,包括了拿了金鑰,卻沒辦法推波通知,但也很難確認到底是哪一個環節出了問題,所以只能一步步排查
https://ithelp.ithome.com.tw/upload/images/20261005/20184339vFN9vAW7TH.png

https://ithelp.ithome.com.tw/upload/images/20261005/20184339XofTuKi2KB.jpg

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


上一篇
[Day 20] Vibe Coding 實戰:PWA 效能優化與離線快取(Service Worker)
下一篇
[Day 22] Vibe Coding 實戰:核心功能就位——打造組間休息計時器與自訂動作選單
系列文
以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。 共 22 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言