firebase-electron
v1.1.0
Published
Receive a Firebase notifications in your Electron app
Downloads
95
Maintainers
Readme
firebase-electron
Receive Firebase push notifications in your Electron app.
Installation
npm i firebase-electron
Usage
Usage is similar to the electron-push-receiver
package.
In the main process (main.js/.ts
)
import { setup: setupPushReceiver } from 'firebase-electron';
// Call it before 'did-finish-load' with mainWindow a reference to your window
setupPushReceiver(mainWindow.webContents);
In the renderer process (renderer.js/.ts
)
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 });
Where to find appId
, apiKey
, projectId
and vapidKey
- Go to Firebase Console & login to your account
- Select your project
- Click on the
Project Settings
cog icon - Click on
Project Settings
- Make sure you're on the
General
tab - Scroll down to the
Your apps
section - If you don't have an app, click on
Add app
- Select
Web
- Fill in the required fields
- Click on
Register
- Select
- Copy the
appId
,apiKey
,projectId
listed under theSDK setup and configuration
section - (Optional) Copy the
vapidKey
listed under theCloud Messaging
tab andWeb Configuration > Web Push certificates
section - (Optional) Generate a new
key pair
and use the value in theKey pair
column as yourvapidKey
Moving from electron-push-receiver
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.
What's new
- 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 provideappId
,apiKey
,projectId
and optionally avapidKey
. 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)
Development
- Make sure you have the right Node.js version installed (specified in
.nvmrc
file) - Install dependencies with
npm install
- Duplicate
.env.template
to.env
and fill in the required fields - Run tests with
npm run test
- Everything should works :)