Benachrichtigungen | Electron Zum Hauptteil springen Electron Dokumentation API Blog Tools * Electron Forge * Elektro-Fiddle Community * Kontrolle * Showcase * Ressourcen Veröffentlichungen Deutsch * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 Suche * Loslegen * Prozesse in Electron * Bewährte Verfahren * Beispiele * Nachtmodus * Device Access * In-App Purchases * * Tastenkürzel * Deep Links * Desktop Launcher Actions * * Menus * Multithreading * Natives Datei Drag & Drop * Navigationsverlauf * Benachrichtigungen * Offscreen Rendering * Online/Offline Ereigniserkennung * Progress Bars * Kürzliche Dokumente * * * Darstellung von Dateien in einem BrowserWindow * * Rechtschreibprüfung * Web Embeds * Taskbar Customization * * Window Customization * Entwicklung * Native Node Modules * Distribution * Testen und Debuggen * References * Beitragen * * Beispiele * Benachrichtigungen Auf dieser Seite Benachrichtigungen Each operating system has its own mechanism to display notifications to users. Electron's notification APIs are cross-platform, but are different for each process type. If you want to use a renderer process API in the main process or vice-versa, consider using inter-process communication . Beispiel ​ Below are two examples showing how to display notifications for each process type. Show notifications in the main process ​ Main process notifications are displayed using Electron's Notification module . Notification objects created using this module do not appear unless their show() instance method is called. Main Process const { Notification } = require ( 'electron' ) const NOTIFICATION_TITLE = 'Basic Notification' const NOTIFICATION_BODY = 'Notification from the Main process' new Notification ( { title : NOTIFICATION_TITLE , body : NOTIFICATION_BODY } ) . show ( ) Here's a full example that you can open with Electron Fiddle: docs/fiddles/features/notifications/main ( 43.4.0 ) Open in Fiddle * main.js * index.html const { app , BrowserWindow , Notification } = require ( 'electron/main' ) function createWindow ( ) { const win = new BrowserWindow ( { width : 800 , height : 600 } ) win . loadFile ( 'index.html' ) } const NOTIFICATION_TITLE = 'Basic Notification' const NOTIFICATION_BODY = 'Notification from the Main process' function showNotification ( ) { new Notification ( { title : NOTIFICATION_TITLE , body : NOTIFICATION_BODY } ) . show ( ) } app . whenReady ( ) . then ( createWindow ) . then ( showNotification ) app . on ( 'window-all-closed' , ( ) => { if ( process . platform !== 'darwin' ) { app . quit ( ) } } ) app . on ( 'activate' , ( ) => { if ( BrowserWindow . getAllWindows ( ) . length === 0 ) { createWindow ( ) } } ) <! DOCTYPE html > < html > < head > < meta charset = " UTF-8 " > < title > Hello World! </ title > < meta http-equiv = " Content-Security-Policy " content = " script-src 'self' 'unsafe-inline'; " /> </ head > < body > < h1 > Hello World! </ h1 > < p > After launching this application, you should see the system notification. </ p > </ body > </ html > Show notifications in the renderer process ​ Notifications can be displayed directly from the renderer process with the web Notifications API . Renderer Process const NOTIFICATION_TITLE = 'Title' const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.' const CLICK_MESSAGE = 'Notification clicked' new Notification ( NOTIFICATION_TITLE , { body : NOTIFICATION_BODY } ) . onclick = ( ) => console . log ( CLICK_MESSAGE ) Here's a full example that you can open with Electron Fiddle: docs/fiddles/features/notifications/renderer ( 43.4.0 ) Open in Fiddle * main.js * index.html * renderer.js const { app , BrowserWindow } = require ( 'electron/main' ) function createWindow ( ) { const win = new BrowserWindow ( { width : 800 , height : 600 } ) win . loadFile ( 'index.html' ) } app . whenReady ( ) . then ( createWindow ) app . on ( 'window-all-closed' , ( ) => { if ( process . platform !== 'darwin' ) { app . quit ( ) } } ) app . on ( 'activate' , ( ) => { if ( BrowserWindow . getAllWindows ( ) . length === 0 ) { createWindow ( ) } } ) <! DOCTYPE html > < html > < head > < meta charset = " UTF-8 " > < title > Hello World! </ title > < meta http-equiv = " Content-Security-Policy " content = " script-src 'self' 'unsafe-inline'; " /> </ head > < body > < h1 > Hello World! </ h1 > < p > After launching this application, you should see the system notification. </ p > < p id = " output " > Click it to see the effect in this interface. </ p > < script src = " renderer.js " > </ script > </ body > </ html > const NOTIFICATION_TITLE = 'Title' const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.' const CLICK_MESSAGE = 'Notification clicked!' new window . Notification ( NOTIFICATION_TITLE , { body : NOTIFICATION_BODY } ) . onclick = ( ) => { document . getElementById ( 'output' ) . innerText = CLICK_MESSAGE } Platform considerations ​ Während Code und Benutzererfahrung innerhalb der Betriebssysteme ähnlich sind, gibt es leichte Unterschiede. Windows ​ For notifications on Windows, your Electron app needs to have a Start Menu shortcut with an AppUserModelID and a corresponding ToastActivatorCLSID . Electron attempts to automate the work around the AppUserModelID and ToastActivatorCLSID. When Electron is used together with Squirrel.Windows (e.g. if you're using electron-winstaller), shortcuts will automatically be set correctly . In production, Electron will also detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. During development, you may have to call app.setAppUserModelId() yourself. Notifications in development To quickly bootstrap notifications during development, adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. Navigate to the file in Explorer, right-click and 'Pin to Start Menu'. Then, call app.setAppUserModelId(process.execPath) in the main process to see notifications. Use advanced notifications ​ Windows also allow for advanced notifications with custom templates, images, and other flexible elements. To send those notifications from the main process, you can use the userland module electron-windows-notifications , which uses native Node addons to send ToastNotification and TileNotification objects. While notifications including buttons work with electron-windows-notifications , handling replies requires the use of electron-windows-interactive-notifications , which helps with registering the required COM components and calling your Electron app with the entered user data. Query notification state ​ To detect whether or not you're allowed to send a notification, use the userland module windows-notification-state . This module allows you to determine ahead of time whether or not Windows will silently throw the notification away. macOS ​ For notifications on macOS, your application will need to be code-signed in order for notification events to emit correctly. This requirement stems from the underlying UNNotification API provided by Apple. Unsigned binaries will emit a failed event when notification APIs are called. Additionally, you should be aware of Apple's Human Interface guidelines regarding notifications . Note that notifications are limited to 256 bytes in size and will be truncated if you exceed that limit. Query notification state ​ To detect whether or not you're allowed to send a notification, use the userland module macos-notification-state . This module allows you to detect ahead of time whether or not the notification will be displayed. Linux ​ Notifications are sent using libnotify , which can show notifications on any desktop environment that follows Desktop Notifications Specification , including Cinnamon, Enlightenment, Unity, GNOME, and KDE. Diese Seite bearbeiten Vorherige Navigationsverlauf Nächste Offscreen Rendering * Beispiel * Show notifications in the main process * Show notifications in the renderer process * Platform considerations * Windows * Use advanced notifications * Query notification state * macOS * Query notification state * Linux Dokumentation * Erste Schritte * API-Referenz Checklisten * Performance * Sicherheit Tools * Electron Forge * Elektro-Fiddle Community * Kontrolle * Ressourcen * Discord * Bluesky * X * Mastodon * Stack Overflow Mehr * GitHub * Open Collective * Infrastruktur Dashboard Copyright OpenJS Foundation und Electron Mitwirkenden. Alle Rechte vorbehalten. Die OpenJS Foundation hat eingetragene Marken und verwendet Marken. Für eine Liste der Marken der OpenJS Foundation , lesen Sie bitte unsere Markenrichtlinie und Markenliste . Marken und Logos nicht auf der Liste der Marken der OpenJS Foundation sind Marken™ oder eingetragene® Marken ihrer jeweiligen Inhaber. Der Gebrauch von ihnen impliziert keine Zugehörigkeit oder Zustimmung von ihnen. Die OpenJS Foundation | Nutzungsbedingungen | Datenschutzrichtlinie | Satzung | | | Markenrichtlinie | Markenliste | Cookie Policy Hosting and infrastructure graciously provided by