好用 JavaScript 套件推薦 —— 做瀏覽器 Push Notification 功能的 Push.js
覺得我們的內容實用嗎？ MyApollo 電子報讀者募集中！歡迎訂閱電子報!
現在 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
