タイトル通り、Electron プロジェクトで FCM のプッシュ通知を受信する方法についてです。
ライブラリは「electron-fcm-push-receiver」を使用しました。
GitHub のページはこちらです。
GitHub – ibrahim-ih/electron-fcm-push-receiver: A module to bring Web Push support to Electron allowing it to receive notifications from Firebase Cloud Messaging (FCM).
https://github.com/ibrahim-ih/electron-fcm-push-receiver
npm install --save electron-fcm-push-receiver
実装するコードは下記のとおりです。
まず、メインプロセスに追加するのがこちら。
const pushReceiver = require('electron-push-receiver'); pushReceiver.setupPushReceiver(mainWindow.webContents);
レンダラープロセスに追加するのが下記のコードです。
import { ipcRenderer } from 'electron'; import { START_NOTIFICATION_SERVICE, NOTIFICATION_SERVICE_STARTED, NOTIFICATION_SERVICE_ERROR, NOTIFICATION_RECEIVED, TOKEN_UPDATED, } from 'electron-fcm-push-receiver/src/constants'; ipcRenderer.on(NOTIFICATION_SERVICE_STARTED, (_, token) => { // サービスが正常に開始した時の処理 }); ipcRenderer.on(NOTIFICATION_SERVICE_ERROR, (_, error) => { // エラーが発生した時の処理 }); ipcRenderer.on(TOKEN_UPDATED, (_, token) => { // プッシュ通知用のトークンを取得した際の処理 }); ipcRenderer.on(NOTIFICATION_RECEIVED, (_, notification) => { // プッシュ通知を受信した時の処理 }); // サービスを開始する ipcRenderer.send(START_NOTIFICATION_SERVICE, [FCM の senderId]);
上記が正しく実行されれば、プッシュ通知用のデバイストークンを取得でき、かつプッシュ通知を受信した際には 22~24行目の処理が呼び出されます。
また、Electron プロジェクトにログイン・ログアウト処理がある場合、ログアウトの際に設定をリセットする必要があるかと思います。
その際は、下記を実行すればリセットの処理が実行できます。
// リセットする pushReceiver.reset();
まだ使い始めたばかりなので、細かい部分が間違っているしれませんが、とりあえず意図した通りに動作しています!
以上、Electron プロジェクトに「electron-fcm-push-receiver」ライブラリを導入して FCM のプッシュ通知を受け取る方法についてでした。
ご参考になれば幸いです。