Receive a Firebase notifications in your Electron app
npm install firebase-electronReceive Firebase push notifications in your Electron app.
``bash`
npm i firebase-electron
Usage is similar to the electron-push-receiver package.
`typescript
import { setup: setupPushReceiver } from 'firebase-electron';
// Call it before 'did-finish-load' with mainWindow a reference to your window
setupPushReceiver(mainWindow.webContents);
`
`typescript
import { ipcRenderer } from 'electron';
import {
START_NOTIFICATION_SERVICE,
NOTIFICATION_SERVICE_STARTED,
NOTIFICATION_SERVICE_ERROR,
NOTIFICATION_RECEIVED,
TOKEN_UPDATED,
} from 'firebase-electron/dist/electron/consts';
// Listen for service successfully started
ipcRenderer.on(NOTIFICATION_SERVICE_STARTED, (_, token) => {
// do something
});
// Handle notification errors
ipcRenderer.on(NOTIFICATION_SERVICE_ERROR, (_, error) => {
// do something
});
// Send FCM token to backend
ipcRenderer.on(TOKEN_UPDATED, (_, token) => {
// Send token
});
// Display notification
ipcRenderer.on(NOTIFICATION_RECEIVED, (_, notification) => {
// display notification
});
// Start service
ipcRenderer.send(START_NOTIFICATION_SERVICE, { appId, apiKey, projectId, vapidKey });
// or
window.ipc.send(START_NOTIFICATION_SERVICE, { appId, apiKey, projectId, vapidKey });
`
1. Go to Firebase Console & login to your account
2. Select your project
3. Click on the Project Settings cog iconProject Settings
4. Click on General
5. Make sure you're on the tabYour apps
6. Scroll down to the sectionAdd app
7. If you don't have an app, click on Web
- Select Register
- Fill in the required fields
- Click on appId
8. Copy the , apiKey, projectId listed under the SDK setup and configuration sectionvapidKey
9. (Optional) Copy the listed under the Cloud Messaging tab and Web Configuration > Web Push certificates sectionkey pair
10. (Optional) Generate a new and use the value in the Key pair column as your vapidKey
electron-push-receiver library stopped working because it depends on the Legacy FCM API which was deprecated on June 21st, 2024 by Google.
This package is a fork of the electron-push-receiver package that has been updated to work with the new Firebase Cloud Messaging (FCM) protocol.
I'm giving all credits to Matthieu Lemoine for the initial work and all the contributors for the electron-push-receiver package. I only updated the package to work with the new FCM protocol.
- Uses the new FCM protocol (HTTP v1 API)
- Uses updated dependencies (without any critical vulnerabilities)
- Remove unnecessary, deprecated and vulnerable dependencies (e.g. request-promise, electron-config)
- Simplified the codebase
- Latest Node.js (v22)
- Refactor tests and use vitest for testing
- Completely written in TypeScript
> [!CAUTION]
> Breaking changes - Instead of providing just a senderId, you now must provide appId, apiKey, projectId and optionally a vapidKey. See the updated usage example.
>
> > Google deprecated https://fcm.googleapis.com/fcm/connect/subscribe (/send too), which is slated for full removal on June 22, 2024. (Source: https://firebase.google.com/docs/cloud-messaging/migrate-v1)
1. Make sure you have the right Node.js version installed (specified in .nvmrc file)npm install
2. Install dependencies with .env.template
3. Duplicate to .env and fill in the required fieldsnpm run test`
4. Run tests with
5. Everything should works :)