【Electron】「electron-fcm-push-receiver」ライブラリを使ってFCMのプッシュ通知を受け取る

タイトル通り、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 のプッシュ通知を受け取る方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG