Web Push (GCM/FCM)

送信のみにFCMを利用した場合の実装方法 Firefox のみの話でいうと FCM を利用しないためFCM周りの設定は省略できる (Chromeを考えると必須ではあるが) ### Set gcm_sender_id Firebase project を作成して `送信者 ID` を指定 `manifest.json` ``` { : "gcm_sender_id": "SENDER_ID" } ``` ### register service worker `app.js` ``` navigator.serviceWorker.register('/sw.js') .then((registration) => { swRegistration = registration }) ``` ### subscribe `app.js` ``` swRegistration.pushManager.subscribe({ userVisibleOnly: true }) .then((subscription) => { // send subscription to server }) ``` `userVisibleOnly` は現状必須だが Firefox だと省略できる ### receive push `sw.js` ``` self.addEventListener('push', (e) => { console.log('[Service Worker] Push Received', e) const title = 'Title' const options = { body: e.data ? e.data.text() : 'Empty payload' } e.waitUntil(self.registration.showNotification(title, options)) }) ``` ### send push #### without data payloads ペイロードなしの通知は endpoint と サーバーキーの指定のみで送信できる サーバーキー は Firebase project に記載されているものを使用 ``` curl "END_POINT" --request POST --header "TTL: 60" --header "Content-Length: 0" --header "Authorization: key=SERVER_KEY" ``` #### with data payloads ペイロードありの通知は暗号化周りが面倒なので `web-push` を利用 `'SUBSCRIPTION'` は購読時に取得したものを指定 `main.js` ``` const webPush = require('web-push') const payload = 'Here is a payload!' const options = { gcmAPIKey: 'SERVER_KEY', TTL: 60 }; webPush.sendNotification( 'SUBSCRIPTION', payload, options ) ``` 送信 ``` node main.js ```