search

mikaelbr / node-notifier

A Node.js module for sending notifications on native Mac, Windows and Linux (or Growl as fallback)
MIT License
5.73k stars 322 forks source link

Notifications like Slack (Windows) #359

Open Nealsoni00 opened 3 years ago

Nealsoni00 commented 3 years ago

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).

Slack Notification

Thanks in advance!

mkgareja commented 3 years ago

I also looking for the same, like colors and other stuff. any luck?

Nantris commented 3 years ago

@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 commented 3 years ago

@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.

Nantris commented 3 years ago

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.

Nealsoni00 commented 3 years ago

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!

Nantris commented 3 years ago

@Nealsoni00 actually it need not appear on the taskbar either! Electron is pretty damn cool.

Check the skipTaskbar option.