diff --git a/docs/fiddles/native-ui/notifications/index.html b/docs/fiddles/native-ui/notifications/index.html new file mode 100644 index 000000000000..2aae12ee3086 --- /dev/null +++ b/docs/fiddles/native-ui/notifications/index.html @@ -0,0 +1,67 @@ + + + + + Desktop notifications + + +
+

Desktop notifications

+

+ The notification module in Electron allows you to add basic + desktop notifications. +

+ +

+ Electron conveniently allows developers to send notifications with the + HTML5 Notification API, + using the currently running operating system’s native notification + APIs to display it. +

+ +

+ Note: Since this is an HTML5 API it is only available in the + renderer process. +

+ +

+ Open the + + full API documentation(opens in new window) + + in your browser. +

+
+ +
+
+

Basic notification

+
+
+ +
+

This demo demonstrates a basic notification. Text only.

+
+
+
+ +
+
+

Notification with image

+
+
+ +
+

+ This demo demonstrates a basic notification. Both text and a image +

+
+
+
+ + + + diff --git a/docs/fiddles/native-ui/notifications/main.js b/docs/fiddles/native-ui/notifications/main.js new file mode 100644 index 000000000000..4fff6140a0a2 --- /dev/null +++ b/docs/fiddles/native-ui/notifications/main.js @@ -0,0 +1,56 @@ +// Modules to control application life and create native browser window +const { app, BrowserWindow } = require('electron') + +// Keep a global reference of the window object, if you don't, the window will +// be closed automatically when the JavaScript object is garbage collected. +let mainWindow + +function createWindow () { + // Create the browser window. + mainWindow = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + nodeIntegration: true + } + }) + + // and load the index.html of the app. + mainWindow.loadFile('index.html') + + // Open the DevTools. + // mainWindow.webContents.openDevTools() + + // Emitted when the window is closed. + mainWindow.on('closed', function () { + // Dereference the window object, usually you would store windows + // in an array if your app supports multi windows, this is the time + // when you should delete the corresponding element. + mainWindow = null + }) +} + +// This method will be called when Electron has finished +// initialization and is ready to create browser windows. +// Some APIs can only be used after this event occurs. +app.on('ready', createWindow) + +// Quit when all windows are closed. +app.on('window-all-closed', function () { + // On OS X it is common for applications and their menu bar + // to stay active until the user quits explicitly with Cmd + Q + if (process.platform !== 'darwin') { + app.quit() + } +}) + +app.on('activate', function () { + // On OS X it's common to re-create a window in the app when the + // dock icon is clicked and there are no other windows open. + if (mainWindow === null) { + createWindow() + } +}) + +// In this file you can include the rest of your app's specific main process +// code. You can also put them in separate files and require them here. diff --git a/docs/fiddles/native-ui/notifications/renderer.js b/docs/fiddles/native-ui/notifications/renderer.js new file mode 100644 index 000000000000..b4dfdf036460 --- /dev/null +++ b/docs/fiddles/native-ui/notifications/renderer.js @@ -0,0 +1,29 @@ +const basicNotification = { + title: 'Basic Notification', + body: 'Short message part' +} + +const notification = { + title: 'Notification with image', + body: 'Short message plus a custom image', + icon: 'https://via.placeholder.com/150' +} + +const basicNotificationButton = document.getElementById('basic-noti') +const notificationButton = document.getElementById('advanced-noti') + +notificationButton.addEventListener('click', () => { + const myNotification = new window.Notification(notification.title, notification) + + myNotification.onclick = () => { + console.log('Notification clicked') + } +}) + +basicNotificationButton.addEventListener('click', () => { + const myNotification = new window.Notification(basicNotification.title, basicNotification) + + myNotification.onclick = () => { + console.log('Notification clicked') + } +})