node-notifier
node-notifier copied to clipboard
Notifications like Slack (Windows)
Hey!
On windows, it's very likely that the user does not have notifications enabled. As a workaround, slack creates a custom notification window (see screenshot). I was wondering if anyone knows how to approach making this type of notification (other than creating a smaller browser window located at the bottom right of the screen). Ideally wouldn't have to spin up a custom notification window -- the slack window does not appear on the windows taskbar when visible (I don't think there is an electron setting to prevent showing a visible browser window in the taskbar).
Thanks in advance!
I also looking for the same, like colors and other stuff. any luck?
@Nealsoni00 do those notifications only exist in the Electron app? I believe what they're doing is creating a transparent window to emulate a notification window - so the actual window is larger than what is shown but the transparent area ignores clicks. Does that sound accurate?
@Nealsoni00 do those notifications only exist in the Electron app? I believe what they're doing is creating a transparent window to emulate a notification window - so the actual window is larger than what is shown but the transparent area ignores clicks. Does that sound accurate?
The notifications exist outside a main slack window (and are displayed from a background toolbar task). A transparent browser window would work but slack's icon does not appear on the taskbar as a transparent browser window would — so either there is a configuration variable to prevent that from happening or they have a new way to do it. It also enters from the right of the screen like a normal notification.
slack's icon does not appear on the toolbar as a transparent browser window would
I'm confused by what you mean.
It also enters from the right of the screen like a normal notification.
Once you have a transparent window in place that's trivial - just a normal CSS animation moving the div containing the notification within the bounds of the transparent window. I've not done this personally - this is just how I imagine this is being solved by Slack, Discord, etc.
Apologies, meant to say that the slack icon does not appear on the Windows 10 taskbar — a transparent browser window would appear on the taskbar.
That animation makes sense and would be super easy to do — thank you!
@Nealsoni00 actually it need not appear on the taskbar either! Electron is pretty damn cool.