Add notification to Windows notification center without displaying it on screen

user_6405175 0
Viewed 355

I am building an Electron app featuring a custom Notification feature where html5 divs appear and disappear as needed on a frameless, transparent, always-on-top window.

It works great, but: I still like the Windows notification center itself, and would like to have the option to see the past notifications there, without actually displaying them on screen with the HTML5 api.

I have tried:

  • Looking into the HTML5 api for an option to not show a notification, or to .hide() it right away: no luck. The only method that comes close is .close(), and it removes the notification from the center as well.
  • Looking into packages like node-notifier, but none of the used notification dependencies offer a way to completely hide a notification.

While I mentioned Node, I will also accept any lower-level API/binding that would allow me to do this.

Thanks in advance.

reactjs node.js notifications windows html
2 Answers

With the help of @treckstar in comments, I have found a way to do what I wanted using:

Despite a handful of troubles building NodeRT and using electron-rebuild, here's a working PoC:

const { XmlDocument } = require('@nodert-win10-rs4/windows.data.xml.dom');
const {
  ToastNotification,
  ToastNotificationManager
} = require('@nodert-win10-rs4/windows.ui.notifications');

const localImage = path.join(__dirname, 'icon.png');
const template = `
  <toast launch="app-defined-string">
    <visual>
      <binding template="ToastGeneric">
        <image id="1" placement="appLogoOverride" hint-crop="circle" src="${localImage}"/>
      </binding>
    </visual>
  </toast>
`;

const xml = new XmlDocument();
xml.loadXml(template);

const toast = new ToastNotification(xml);
const notifier = ToastNotificationManager.createToastNotifier("com.myapp.testnotif");
toast.suppressPopup = true;
notifier.show(toast);

May this help whoever comes across the same highly-specific problem.

user_64051750

In addition to what @MadWard shows in the PoC, the suppressPopup key is really the main player of the solution.

As I was going through tons of examples and electron code I kept hitting roadblocks due to random SDK versions and libraries of things I had installed. For example, the package electron-windows-notifications, which uses NodeRT was failing to load my preload.js because the Windows 10 SDK I had installed (build 15063) needed nodert-win10-cu instead of what was being used in most solutions by default nodert-wind10-au.

SDK Known As Windows Version npm Scope
Windows 10, Build 17134 April 2018 Update (Redstone 4) 1803 npmjs.com/org/nodert-win10-rs4
Windows 10, Build 16299 Fall Creators Update (Redstone 3) 1709 npmjs.com/org/nodert-win10-rs3
Windows 10, Build 15063 Creators Update (Redstone 2) 1703 npmjs.com/org/nodert-win10-cu
Windows 10, Build 14393 Anniversary Update (Redstone 1) 1607 npmjs.com/org/nodert-win10-au
Windows 10, Build 10586 Threshold 2 1511 npmjs.com/~nodert-win10

EDIT: I forgot to include the more specific steps I took getting electron-windows-notifications dependency files on this GitHub issue here. Basically everything from Python, broken node-gyp, and missing .winmd files.

Lastly Electron 14+ and NodeRT have an issue where you will need to make sure to have app.allowRendererProcessReuse = false and like the readme file says, to make sure this is running in the main.js file.

Hopefully this helps someone along the way, as I had never used Electron before until today and had learned a ton thanks to other peoples help.

user_17123450
Related