Push notifications not supported on Electron

[jasonpang]

This is not an issue, but opening this for future search result utility.

From https://github.com/electron/electron/issues/3095:

Current we don't have Google Cloud Message supported, and we probably won't in future since the work to support this is relatively heavy. Google's private services are not included in Chromium's content module, so we don't get them in Electron by default.

I'm closing this since we are not likely to fix this, however pull requests will be welcomed.

The expected error users should receive is:

DOMException: Registration failed - push service not available

Local notifications (new Notification()) work, and other Electron plugins that hook into the OS' desktop notifications work, but push notifications are not supported.

[ptrwtts]

Hey Jason. Do the changes that arrived in Chrome 52, to support the official Web Push protocol and move away from GCM, impact this at all?

[jasonpang]

Hey Peter,

Unfortunately I'm not too sure how Chrome's additional support for the official Web Push protocol will play out for Electron support. I've opened an issue in Electron asking about this, so let's find out what they have to say about it!

[CydeSwype]

I know this is a very old thread, but in case this is valuable, there's a push notification technique for electron described here (using Firebase as the messaging arch): https://github.com/MatthieuLemoine/electron-push-receiver

I built a sample implementation of this that you can clone here: https://github.com/CydeSwype/electron-fcm-demo

I use this in my electron app. I'm just about to see if I can use OneSignal with this (setting up with the custom API since I don't think the other SDKs will work). I have custom notification bubbles that I use to allow for extra styling (the native styling on Windows notifications are horrible).

[maxfadeev]

Hi @CydeSwype Did you manage to use OneSignal with electron-push-receiver ?

[CydeSwype]

Yes I was. OneSignal ended up working well in combination with this push-receiver library. You have to use the API though. When I "created an app" I just selected the Android option (because you have to select iOS, Android, Web Push, etc.). It may work if you select another type... but there's no "electron" or "generic" app type. Then follow the references here: https://documentation.onesignal.com/reference

You'll need to ignore the prominent "Don't use this" message and dig into the "add a device" section. Add a device to register your client with OneSignal and pass the FCM token as the "identifier" value. This is the core connection needed to have OneSignal send messages to your client app. Then you can use that other electron-push-receiver library to receive and display the push message (or handle it silently if appropriate).

Important note: when you get the response from creating the device in OneSignal you'll want to store that OneSignal device ID (they refer to it as a Player ID) in some storage on your side (i.e. a device-to-user database table) so you know how to augment the device record and refer back to an existing device.

I wrote this code awhile ago, but I mostly remember how it works =^) Let me know if you need help.

[maxfadeev]

Wow, thanks for the quite quick and detailed response! Yeah, I skipped that part in docs, and now I feel like I'm doing something illegal 😄 I've followed your instruction and added a new device, then received a playerId. That playerId now appeared in the users list. But I still don't receive messages from OneSignal using electron-push-receiver. Probably I'm doing something wrong.

BTW, thanks for the electron-fcm-demo 👍.

[maxfadeev]

I finally managed to receive OneSignal messages 💪. My mistake was that I set device_type to 5(CHROME WEB PUSH), and I have to set it to 1(ANDROID) . So my code looks like this

// Listen for service successfully started
ipcRenderer.on(NOTIFICATION_SERVICE_STARTED, (_, token) => {
  fetch('https://onesignal.com/api/v1/players', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      app_id: 'xxxxx-xxxxx-xxxxx-xxxxx-xxxxx',
      identifier: token,
      device_model: 'Electron',
      device_type: 1
    })
  })
    .then(res => {
      return res.json();
    })
    .then(body => {
      console.log(body);
    });
});

@CydeSwype thank you so much.

[CydeSwype]

Yeah you got it! Between my response and yours I hope others will be able to use this as a workaround. There are clearly lots of devs who need a solution here for sending push campaigns and receiving them on electron apps!

[mehthabt]

Yeah got it!!!!. Thanks @CydeSwype for helping us to sort it out.

[CydeSwype]

@jasonpang please consider promoting this workaround (possibly with some better, consolidated documentation) for the developers that need this until a proper solution is offered. We have been using it for some time and really like it.

[Aarbel]

@maxfadeev could you show us a bigger preview of your implementation inside Electron ?

How and why do you trigger NOTIFICATION_SERVICE_STARTED ? How do you display the notifications popups ?

Thanks for your help !

[maxfadeev]

@Aarbel that is a message sent to renderer process by the electron-push-receiver module. Take a look at comment above. There is an example that shows how it works. When a new notification comes, you can use Electron's Notifications to show it up.

[Aarbel]

Thank you @maxfadeev

[David-Melo]

@CydeSwype Hello, just dusting off this old topic. Hoping I could get some help. So I got the registration with one signal working and I see my Electron "device" registered with OneSignal. I'm a bit confused about the rest of the process. And looking at the sample app you posted, I wasn't able to fully understand.

Do I need to have Firebase set up in addition to OneSignal? Is Firebase actings as a middleman for the OneSignal Notifications or do they come in directly to the OneSignal App?

Thanks

[CydeSwype]

@david-melo It's been a long time since I worked on this, so my memory is foggy, but I think you don't need Firebase if you have OneSignal. I started with Firebase and ended up moving to OneSignal. OneSignal is better set up for "campaign" push messages (a la "big sale this weekend" to some segment of your audience). Firebase is better for transactional push messages (i.e. you got a new message from SoAndSo). My Github example (https://github.com/CydeSwype/electron-fcm-demo) uses Firebase because that's where I started. But you can use either one (or both).

[David-Melo]

@CydeSwype Thanks for your help. I was able to get it working. Just going to leave my process on getting it working here just in case anybody in the future stumbles into this again.

1. I used the example on https://github.com/CydeSwype/electron-fcm-demo the get Electron setup.
2. I used the snippet in @maxfadeev's Comment to get electron registered as a device with OneSignal.
3. In the OneSignal App Settings, I added Android as a native platform, to set this up you will need a FireBase Server Key and Sender ID.
4. I created a FireBase Project on Google with this guide to get the ServerKey and Sender ID to input into OneSignal.
5. I used the SenderID from Firebase inside the START_NOTIFICATION_SERVICE Line in the electron renderer

The only thing I noticed is that my notification payload was different from what was expected in the example code. This might be something with my configuration, or it is possible that the payload structure has changed in the years since. Either way, it is an easy fix for who ever is implementing this in the future to just refactor that small part.

Thanks again to @CydeSwype and @maxfadeev

[jkasten2]

Re-opening this issue for better visibility

[pooranoayaw]

Is this possible now in latest version?

[shahketul11]

Is push notification supported in electron??

[Salmankhan033]

Is push notification supported in electron??

Do you find any solution ?

[shahketul11]

@Salmankhan033 I have used the following package available. https://www.npmjs.com/package/electron-push-receiver

[joshua-redmond]

Since OneSignal OneSignal switched to FCM's new API, electron-push-receiver stopped receiving the notification payload 😞

To be clear electron-push-receiver still pings when a notification's received but has nothing about the notification's text. So now I can't send my own notification with that text.

See the issue I raised here: Sending using the new FCM HTTP v1. Missing notification key