Push Notifications in Electron Apps
I’ve been writing Electron apps for about four years, and one of the problems I’ve encountered many times is sending push notifications in Electron.
If you’ve used Push on the web or on any mobile platform like Android or iOS, you know how useful and important it is. But Electron (as of writing) does not have web push APIs and so services like Firebase and Pusher also don’t work with it.
Push Vs. Notification
When it comes to Push, a common confusion found in developers is about the difference between push, and notifications.
Push, as the name suggests, is a term used for a method where a server can push some data to client.
Normally, a client needs to constantly ping a server for any data updates. But having the ability to send data from server is always better because it saves us from unnecessary calls to the server. WebSocket, Server-Sent-Events, and MQTT are also good candidates for this purpose.
Notification, is sometimes used as an alternate term for Push. But along with push, it is used for user interface component which alerts the user about the change in data. E.g. Toast, Alerts, Native Notifications.
Push and Notifications don’t have to be used together, but they generally are.
Simply put, Push is a mechanism and the term Notification is used for UI alerts.
How Push Services Work
The following figure illustrates how push services work.
- Client, a device or an app, receives a unique token from the push service.
- Client transmits that token to server which then stores it.
- When needed, server uses that token and sends a payload to the client via push service.
For example, when you install an app on your iPhone, the app receives a token from Apple Push Services (APS). App then sends this token to its server, which stores it against your ID. Later, when someone sends you a message in the app, server will find the token associated with your ID and send a push request with the content of the message (payload) to APS. APS will deliver that payload to the app. App can decide to show a Notification, if say you’re not using the app to get your attention. Or if you’re using the app then simply ignore the payload.
How to Send Push Notifications in Electron
To scratch my own itch, I built a a little side project called Electrolytic, to send push to Electron apps. This example below uses it to push data to an app.
First, we’ll sign up on Electrolytic and get ourselves some API credentials. Signing up is free.
Next, you can simply clone this repo which has all the code needed for this demo. Once you’ve cloned, do npm i in it to download Electron and Electrolytic’s SDK. Open main.js file in a code editor of your choice and around the line #5 replace <Your-API-Key> with the API key you received after signing up.
Run npm start after that and a Hello World window should appear with a User token.
For the sake of this demo, we’ll copy this token. But in a real-world app, this token should be securely sent to app’s server and stored in a database.
To send a push, we need to send a POST request to https://api.electrolytic.app/push/send
For that, we’ll use an app like Insomnia to send the request with a payload and the user token.
Here’s a snippet that you can copy and use:
If all went well, you should see a notification showing the payload we sent via Push API.
Notice we only used API Key in the app and used the API Secret when calling the Push API. This is because secrets are always meant to be used from server-side. Never add them to client-side code, treat them like passwords.
Now that push is working for you, you can implement it in any way and any app you like. I’m still working on it to add more features like the ability to send Push even when app is closed, etc.
Let me know if you have any questions or suggestions for improvements.
👉🏼 Follow me on Twitter for more technical stuff.
This article was written and optimized in INK
