Notifications on Windows

[Subash]

webkitNotifications api seems to be implemented in mac build but not in windows build.

[island205]

How about is this now？

[zcbenz]

Since there is no standard notification API on Windows <= 7, the implementation will be much more complicated than on Linux and Mac, so it may not be finished recently.

[island205]

Get it, tks.

[Subash]

How about implementing skip taskbar and show inactive apis from node-webkit that would make creating notification windows easy.

[Subash]

@zcbenz
Implemented in node-webkit
nwjs/nw.js@39e0731

[FLasH3r]

+1

[shripathee]

Any roadmap for resolution of this issue? This is a pretty big deterrent for using Electron.

[JonathanPierce]

Agreed. Native notifications are a big deal, they are even advertised on the Electron homepage. The fact that they don't work on Windows is hugely disappointing.

[anaisbetts]

I mean, it's hugely disappointing that Windows makes it a total PITA to implement notifications, sooooooooooo

[Glavin001]

What about using the Windows Toast Notifications support from Node-Notifier?

[anaisbetts]

@Glavin001 You have to create a dummy shortcut in users' start menus to use that, it's a pretty big drawback

[Glavin001]

@paulcbetts Oh wow. Thanks for letting me know. Bummer.

I am usually not a Windows user, let alone Windows app developer, however I recently won a Microsoft Surface and realize I really miss not being able to receive SMS notifications on my Surface from my iPhone, like my Macbook does. I hope to develop this project with Electron, although this lack of Windows notification support puts a speed bump in that plan.

[hleumas]

Hi guys,

my app is using web notifications but it does not work on windows (because of this ticket). Can I shim notification API somehow, so it does tray bubble instead?

The thing is, I can't change the clientside code, cause I am loading it from public url. The app is just packaged webapp.

However, if I were able to shim Notification API from the main script, it would be awesome. Do you know whether something like that is possible?

Thanks a lot!

[iSuslov]

+1 for this. Any workaround without end-user troubles?

[hleumas]

Ok, it works this way:

webContents.executeJavascript(`
  ipc = require('ipc');
  Notification = function(title, options) {
    ipc.send('notify', {title: title, options: options});
  }
  Notification.permission = 'granted'
`

This way I can listen in main thread on notify messages and do whatever I want with them.

[xenyou]

+1

[s-a]

Hi,
I am experimenting with a toaster at https://github.com/s-a/electron-toaster.
It aims to work with electron tools and to have an identical look across different platforms.

I tried to design it close the chrome rich text notifications, but i' am not the best designer 😄 Regardless to restrictions and features of different native notification systems we could build something that mimics chrome rich text notifications.

So far it fits my needs. If any one is interested. Would be cool to hear your thoughts about this.

[clay-morgan]

I'm interested in where that is going for sure. This is a definite roadblock to us using Electron at the moment.

[jmesquita]

@s-a that's nice! but... I am not a windows user but I am assuming it is not able to detect that other notifications are in place and therefore it would be placed on top of other notifications creating a kinda weird user experience? Just asking...

[s-a]

@jmesquita ty for your feedback. When I remember back I cannot remember such a situation, but in fact you are absolutely right.

[felixrieseberg]

Something really simple that should work: Download electron.exe, run, open up dev tools, run new Notification('Hi!'). If you're not seeing anything, it's very likely that notifications on your system or for your user are somehow disabled.

[zhenchaoli]

Not seeing anything with electron.exe

I'm interested to knowing how notification is implemented on Windows 8.1, since it doesn't have a notification center as Win 10..

[zhenchaoli]

Oh I do see a Notifications section in Settings, they are all enabled though..

[felixrieseberg]

Hold on, we might have a regression here.

[felixrieseberg]

Upon inspection, we don't have a regression, but getting 8.1 setup to accept notifications is a bit tricky and the documentation I wrote is not nearly as detailed as it has to be. I'll add some docs there, but in the meantime, here are the important steps:

• Your app needs a shortcut in the start menu
• The shortcut needs a the property system.appusermodel.id set to your AppId
• Your appId needs to be set

The good news: Squirrel handles that all for you.

[zhenchaoli]

That's weird, I think I'm doing these correctly. My update.exe file verison is '1.2.5.0', I think it's pretty new..

[zhenchaoli]

Is it possible to test things out with electron.exe?

Here's my attempt at getting notification to work for it:

1. I downloaded electron from https://github.com/atom/electron/releases
2. I created a shortcut by 'right click on electron.exe -> create shortcut'
3. I edited the app UserModelId to com.squirrel.electron.electron (I used the trick here to edit the property: http://winaero.com/blog/how-to-show-more-details-for-shortcuts-in-windows-8-1-windows-8-and-windows-7/)
4. I dragged the shortcut to windows start menu (literally dragged the shortcut on to the windows start icon at bottom left..)
5. I clicked open the shortcut from start screen to launch electron.exe
6. I opened devtool and typed in this:
   electron = require('electron'); electron.remote.app.setAppUserModelId('com.squirrel.electron.electron');
7. I typed in
   var n = new window.Notification('hi');
8. I wasn't able to see notification : - |

Is it because by the time I setAppUserModelId it was too late? Does it matter?

[anaisbetts]

@fantasticsid You can't set the app user model ID via remote, you need to call it before you open a window

[felixrieseberg]

And the shortcut has to be inside the Start Menu folder inside the user's appdir. It's a horrible system (which is why it's no longer in Windows 10), and my documentation isn't great.

Once //build is over, I'll make another pass at the docs and make this stuff more clear.

[zhenchaoli]

I rebuilt my app to call app.setAppUserModelId before a window is created.

I'm using squirrel.windows to generate installer (noMsi, it generates a Setup.exe).

I did find a shortcut to my app under %APPDATA%/Roaming/Microsoft/Windows/Start Menu/Programs/Myapp/Myapp.lnk, which points to Update.exe

Notification still does not show from my app, I also used dev console to confirm this.

I'm running Windows 8.1 in vmware, if that matters.

At this point just a screenshot of notification working on Windows 8 would make me so much better..

Seriously though does it matter that the lnk file points to squirrel binary?

[zhenchaoli]

Also according to this https://msdn.microsoft.com/en-us/library/dn449300(v=winembedded.82).aspx

I did not see my app's Application User Model ID listed, perhaps it needs to register during installation, and squirrel somehow did not do that?

[felixrieseberg]

In addition to all this mess: #4973

[zhenchaoli]

I'm gonna try 0.35.0 where notification support is first implemented..
Remember the bug where if notification fails brightray crashes? I think there must be something wrong/missing that makes the OS to deny the notification request.

Unfortunately I only have a VM for windows 8 so it's gonna be a PITA to build brightray & electron in the VM.

[rubencodes]

To everyone who might be looking to do notifications in Windows 7:
I had good success using electron-notification-shim in conjunction with electron-toaster.
In my main file, I had:

import { app, BrowserWindow, ipcMain } from 'electron';
import Toaster from 'electron-toaster';
const toaster = new Toaster();

app.on('ready', function () {
    var mainWindow = new BrowserWindow({
        width: 1000,
        height: 600 
    });
    toaster.init(mainWindow);

    // Listen for notification events.
    ipcMain.on('notification-shim', (e, msg) => {
        mainWindow.webContents.executeJavaScript(`
            ipc.send('electron-toaster-message', {
                title: '${msg.title}',
                message: '${msg.options.body}',
                width: 440
            });
        `);
    });
});

And in the browser, I ran:

require('electron-notification-shim')();
ipc = require('electron').ipcRenderer;

(FWIW: I also tried this all using node-notifier with success)
And voila! Thanks for all your hard work guys/gals.
(Note: this doesn't only run when the app is on Windows <= 7; for that you'll need to check the windows version and wrap some of this stuff in an if-statement).

[hsz]

I have created a notification on Windows 10 and it works correctly except one thing - when it disapears after a few seconds it's not available in the notifications list.
When notification is still visible - icon next to the system clock is fully white - after it hides - icon is again transparent...

When notification is visible and I click the system notifications icon - it's on the list. But after I close the list and open again - it's gone.

[rubencodes]

Update on Windows <=7 notifications: The above code works, but we're currently having issues with it causing a change of the active window (e.g. if the Electron app is in the background and I'm in a different app, receiving a custom notification on Windows <= 7 seems to make the Electron app active without any user input). Wondering if it's something with mainWindow.webContents.executeJavaScript making the window active... Will update if I find out anything.

[seriema]

@rubencodes is the solution you're trying related to electron-notification-shim? Feel free to log an issue there and I'll take a look.

[akashnimare]

Does anyone know how to override the default native notifications with node-notifier or electron-notification-shim? I am using electron-notification-shim with electron-notify and both works perfectly. The only problem is I am not able to hide/override the native notifications.

[MarshallOfSound]

@akashnimare If you want to disable the built in Notification implementation simply doing something like

class NullNotification {

}
window.Notification = NullNotification

Will make it not work (just override the Notification constructor)

[lbenitez3000]

@MarshallOfSound I'm assuming that's in the renderer process?

[alkuzad]

@akashnimare maybe this will shed light on this problem ? RocketChat/Rocket.Chat.Electron#199

We switched to Rocket.Chat and it's working in there with some custom notification layout.