好用 JavaScript 套件推薦 —— 做瀏覽器 Push Notification 功能的 Push.js

現在 Desktop 版本的 Browser 幾乎(Chrome, Firefox, Safari, Edge 等等)都有提供 Notification API ,這個 API 可以讓開發者發出類似手機推播的訊息到使用者的桌面,使用 Push Notification 的好處是:

使用者就算沒有與你的網站分頁互動,使用者也可以收到由你的網站發出的通知,很適合長時間執行的工作,譬如同步資料、較耗時的運算等等,讓使用者可以離開正在工作的分頁,轉去做其他事情,等到收到通知再回來。

也由於 Push Notification 屬於侵入極強的通知,所以瀏覽器開發商為了防止大家濫用,在能夠發送 Push Notification 之前是需要使用者授予權限的,而通常使用者授予權限的意願也不太高,畢竟在沒有任何說明用途的情況下,就粗暴地要求權限是很無禮的行為(就不舉是哪些網站當例子了⋯⋯),所以瀏覽器開發商也建議必須充分向使用者說明 Push Notification 的用途以提高同意率。

Push Notification 也分 2 種做法:

  • 1 種是純用前端 JavaScript 發出訊息,優點是很好實作,缺點是分頁關掉就無法發 Push Notification
  • 1 種是透過 Service Worker, Service Worker 是可以在瀏覽器背景執行的 JavaScript 程式碼,就算分頁關掉它還是能夠執行,不過它能夠用的功能也有所受限,例如它不能存取 local storage 就是其中 1 個限制,但這種關掉分頁還能執行的特性,讓它能夠做到使用者沒打開你的網站也能夠收到你發的 Notification, 不過實作上需要把使用者瀏覽器的金鑰等資料存在後端伺服器,發送訊息時需要用這組金鑰作加密後,傳送到瀏覽器開發商的 Push Service, 再由該 Push Service 幫你轉送到使用者的瀏覽器,最後由你的 Service Worker 接到資料後,再觸發顯示 Notification, 詳見 Push notifications overview

p.s. 想知道 Chrome 有哪些 Service Worker 正在執行,可以在網址列輸入 chrome://serviceworker-internals/

解釋這麼多,還是要介紹一下好用的套件。

如果你有需要做瀏覽器的 Push Notification 需求,可以使用 Push.js 套件,這個套件把前端要求權限、檢查權限、發送訊息等功能包裝得很簡單,甚至可以客製 Plugin, 不過如果是要做 Service Worker 版的 Push Notification 就還是得自己花力氣整合了⋯⋯XD

Push.js

延伸閱讀

Push notifications overview

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!