{"id":2132,"date":"2016-10-30T17:00:00","date_gmt":"2016-10-31T00:00:00","guid":{"rendered":"https:\/\/www.microsoft.com\/reallifecode\/index.php\/2016\/10\/30\/showing-native-windows-notifications-from-electron-using-nodert\/"},"modified":"2020-03-18T12:08:02","modified_gmt":"2020-03-18T19:08:02","slug":"showing-native-windows-notifications-from-electron-using-nodert","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/ise\/showing-native-windows-notifications-from-electron-using-nodert\/","title":{"rendered":"Showing Native Windows Notifications from Electron Using NodeRT"},"content":{"rendered":"

Electron<\/a> enables JavaScript developers to easily develop cross-platform apps using existing JavaScript and Node.js libraries. While the main premise of Electron is the ability to run the same JavaScript code on different desktop platforms, in certain scenarios, developers might find it necessary to use native and specific OS capabilities to improve the user experience of their app.<\/p>\n

We recently engaged with Slack<\/a>, who develop their desktop app using Electron, to enable better integration of Windows native toast notifications<\/a>.<\/p>\n

The Problem<\/h2>\n

Currently, Electron supports basic toast notifications on Windows<\/a>. However, the current implementation is limited to the general multi-platform notifications API<\/a> and does not support deeper native integration with the notification center and the latest Windows 10 notifications features.<\/p>\n

For instance, the existing Electron notifications API does not support the ability to use the new adaptive notification layout or show interactive notifications with action buttons, as seen in the image below:<\/p>\n

\"Interactive<\/p>\n

While the Univeral Windows Platform (UWP) APIs can be called from JavaScript UWP apps and Node Chakra via the node-uwp module<\/a><\/em>, until very recently, there was no way to access them directly from the standard Node.js and Electron implementations.<\/p>\n

The Solution<\/h2>\n

We have re-published NodeRT<\/a>, which enables Node.js and Electron devs to access the entire UWP API stack directly from JavaScript.<\/p>\n

NodeRT exposes the UWP APIs by automatically generating native add-ons via reflection over the UWP metadata (WinMD) files:<\/p>\n

\"NodeRT<\/p>\n

We can then use the windows.ui.notifications<\/a><\/em> NodeRT module to call the full UWP notifications API from Electron or any JavaScript application that supports node.js modules. (In general, NodeRT modules are available in npm under the nodert-win10<\/a><\/em> scope)<\/p>\n

To make the UWP notifications APIs more accessible to Electron devs and to encapsulate some of the UWP-specific semantics, the electron-windows-notifications<\/a><\/em> module was developed.<\/p>\n

With this module, native Windows notifications can be shown by using only few lines of JavaScript:<\/p>\n

\n
const appId = 'electron-windows-notifications'\r\nconst {ToastNotification} = require('electron-windows-notifications')\r\n\r\nlet notification = new ToastNotification({\r\n    appId: appId,\r\n    template: `%s`,\r\n    strings: ['Hi!']\r\n})\r\n\r\nnotification.on('dismissed', () => console.log('Dismissed!'))\r\nnotification.show()\r\n<\/code><\/pre>\n<\/div>\n
The sample code results in a simple text notification and logging when the user dismisses the notification by pressing the X<\/code> button.<\/p>\n
The appId, or AppUserModelIDs<\/a><\/em>, parameter is the application identifier that Windows uses to link the notification to the app. You can easily set it from Electron by calling the app.setAppUserModelId<\/em><\/strong> method.<\/p>\n
The template parameter defines the visual look of the notification and should contain a string in the format of an XML toast notification<\/a>.<\/p>\n
The template may contain Node.js string format symbols (like %s<\/code>,%d<\/code>,%j<\/code>), which are replaced using the util.format<\/a><\/em> function according to the contents of the strings<\/em><\/strong> param.<\/p>\n
Electron sample app<\/h2>\n
Alongside the module, we also provide an Electron sample app<\/a> which demonstrates how different notification types can be called and handled.<\/p>\n
To run the app, you can follow the instructions<\/a> in the repository.<\/p>\n
Tile Notifications<\/h2>\n
In addition to supporting notifications, electron-windows-notifications<\/em><\/strong> also supports Tile Notifications<\/a>, as well as Secondary Tile Notifications<\/a>, using a similar API to the toast notifications API.<\/p>\n
Since tile notifications are currently only available for UWP\/Windows Store apps, you\u2019ll need to run your Electron app using the Windows Store Electron bridge<\/a>.<\/p>\n
Alternative Solution<\/h2>\n
An alternative solution would be to use the popular Edge.js<\/a> module to call the notifications using the Universal Windows Platform (UWP) C# API from Node.js. While this approach will certainly work, it does have some drawbacks. For instance, this will cause the app to host an instance of the CLR which might increase the memory footprint of the app. Additionally, the Edge.js module evaluates and compiles C# code during the execution of the app, a process that can fail when there is an issue with the local environment\u2019s CLR.<\/p>\n
Opportunities for Reuse<\/h2>\n
The electron-windows-notifications<\/a><\/em> module leverages NodeRT modules and provides developers with an easy and intuitive way to create toast notifications on Windows.<\/p>\n
The module was designed to run in Electron and provides developers with the full capabilities of the Windows UWP APIs, and the ability to deliver a great user experience with Electron on Windows.<\/p>\n
We hope that you will find this work useful, and we\u2019ll be happy to hear any feedback or issues<\/a> that you find regarding the module.<\/p>\n","protected":false},"excerpt":{"rendered":"
Leveraging NodeRT modules to provide developers with an easy and intuitive way to create toast notifications on Windows.<\/p>\n","protected":false},"author":21372,"featured_media":12569,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[165,220,275,329,357,386],"class_list":["post-2132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frameworks","tag-electron","tag-javascript","tag-node","tag-slack","tag-toast-notifications","tag-windows"],"acf":[],"blog_post_summary":"
Leveraging NodeRT modules to provide developers with an easy and intuitive way to create toast notifications on Windows.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/2132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/users\/21372"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/comments?post=2132"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/2132\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media\/12569"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media?parent=2132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/categories?post=2132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/tags?post=2132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}