Javascript 實作 Browser Notification with firebase or web push

Browser Notification 近期被許多電商網站使用,作為推播優惠訊息的工具,甚至讓手機不用 APP 也可以實現推播功能,但要使用者點擊允許大概是最困難的障礙了XD

觀念

觀念部分可以參考這系列鐵人賽的文章:https://ithelp.ithome.com.tw/articles/10196486 ,先講觀念再用 node.js 實作前後端,後端使用 web push 套件,因此前端要使用 public key 來將訊息加密。另外 Browser Notification 可以由 DOM中發出通知,也可以改用 Service Worker發通知 ,事實上,Service Worker 監聽 Push API 才能串接後端 push server。

關於 Service Worker 觀念可以參考這篇文章:https://pjchender.github.io/2018/03/05/pwa-%E6%9C%8D%E5%8B%99%E5%B7%A5%E4%BD%9C%E7%B7%9A%E7%A8%8B%EF%BC%88service-workers%EF%BC%89/

實作

使用 vallina JS 實作可以參考這篇十分詳細,後端也是使用 web push 套件:https://itnext.io/an-introduction-to-web-push-notifications-a701783917ce ,另外還有用 react hook 實作的版本:https://itnext.io/react-push-notifications-with-hooks-d293d36f4836,如果只想做純前端,可以用文章裡面的 push server API :https://push-notification-demo-server.herokuapp.com/api-docs/#/

專注純前端也可以參考 Google 寫的這篇教學文:https://developers.google.com/web/fundamentals/codelabs/push-notifications?hl=zh-tw ,對於每一步講解詳細且搭配 console.log() ,把動作一步步印出來,有助於了解流程。

另外也可以用 firebase 套件的 Firebase Cloud Messaging 功能來實作,前端工作會大幅簡化! https://www.freecodecamp.org/news/how-to-add-push-notifications-to-a-web-app-with-firebase-528a702e13e1/ ,要注意新版不只要放上 serverID 要把全部資訊都貼上去。

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on twitter
Twitter

More to explorer

Close Menu