Aller au contenu principal

Notifications

Chaque système d'exploitation dispose de son propre mécanisme pour afficher les notifications aux utilisateurs. Les API de notification d'Electron sont multi-plateforme, mais sont différentes pour chaque type de processus.

Si vous désrirez utiliser une API d'un processus de rendu à partir du processus principal ou vice versa, vous devez utiliser la communication inter-processus.

Utilisation

Voici deux exemples montrant comment afficher les notifications pour chaque type de processus.

Affichage de notifications à partir du processus principal

Main process notifications are displayed using Electron's Notification module. Les objets de notification créés à l'aide de ce module ne s'affichent qu'apès l'appel à leur méthode d'instance show().

Main Process

const{Notification}=require('electron')

constNOTIFICATION_TITLE='Basic Notification'
constNOTIFICATION_BODY='Notification from the Main process'

newNotification({
title:NOTIFICATION_TITLE,
body:NOTIFICATION_BODY
}).show()

Voici un exemple complet que vous pouvez ouvrir avec Electron Fiddle:

docs/fiddles/features/notifications/main (39.0.0) UTF-8">
<title>Hello World!</title>
<metahttp-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>

Afficher les notifications dans le processus de rendu

Les notifications peuvent être affichées directement à partir du processus de rendu avec l'API des notifications web.

Renderer Process

constNOTIFICATION_TITLE='Title'
constNOTIFICATION_BODY=
'Notification from the Renderer process. Click to log to console.'
constCLICK_MESSAGE='Notification clicked'

newNotification(NOTIFICATION_TITLE,{body:NOTIFICATION_BODY}).onclick=
()=>console.log(CLICK_MESSAGE)

Voici un exemple complet que vous pouvez ouvrir avec Electron Fiddle:

docs/fiddles/features/notifications/renderer (39.0.0) UTF-8">
<title>Hello World!</title>
<metahttp-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>
<pid="output">Click it to see the effect in this interface.</p>

<scriptsrc="renderer.js"></script>
</body>
</html>

constNOTIFICATION_TITLE='Title'
constNOTIFICATION_BODY='Notification from the Renderer process. Click to log to console.'
constCLICK_MESSAGE='Notification clicked!'

newwindow.Notification(NOTIFICATION_TITLE,{body:NOTIFICATION_BODY})
.onclick=()=>{document.getElementById('output').innerText=CLICK_MESSAGE}

Considérations relatives aux plate-formes

Le code et l’expérience utilisateur sur les différents systèmes d’exploitation sont semblables, mais il y a des différences.

Windows

Pour les notifications sous Windows, votre application Electron a besoin d'un raccourci du Menu Démarrer avec un AppUserModelID et un ToastActivatorCLSID correspondant.

Electron tente d'automatiser le travail autour de l'AppUserModelID et ToastActivatorCLSID. Quand Electron est utilisé avec Squirrel.Windows (par ex. si vous utilisez electron-winstaller), les raccourcis seront automatiquement définis correctement.

En production, Electron détectera également si Squirrel a été utilisé et appellera automatiquement app.setAppUserModelId() avec la valeur correcte. During development, you may have to call app.setAppUserModelId() yourself.

Notifications en développement

Afin de démarrer rapidement pendant le développement avec les notifications , vous pouvez également ajouter node_modules\electron\dist\electron.exe au menu Démarrer. Naviguez vers le fichier dans l'explorateur, cliquez avec le bouton droit de la souris et Épinglez le au menu de démarrage. Ensuite, appelez app.setAppUserModelId(process.execPath) dans le processus principal pour voir les notifications.

Utilisation de notifications avancées

Windows permet également des notifications avancées avec des modèles personnalisés, des images et d'autres éléments flexibles.

Pour envoyer ces notifications à partir du processus principal, vous pouvez utiliser le module userland electron-windows-notifications, qui utilise des addons Node natifs pour envoyer des objets ToastNotification et TileNotification.

Bien que les notifications incluant des boutons fonctionnent avec electron-windows-notifications, la gestion des réponses nécessite l'utilisation de electron-windows-interactive-notification, qui aide à l'enregistrement des composants COM requis et fait l'appel à votre application Electron avec les données saisies par l'utilisateur.

Requête de l'état des notification

Pour détecter si vous êtes autorisé ou non à envoyer une notification, utilisez le module utilisateur windows-notification-state.

Ce module vous permet de déterminer à l’avance si oui ou non Windows lancera silencieusement le Ce module vous permet de déterminer à l’avance si oui ou non Windows affichera silencieusement le notification.

macOS

Les notifications sont simples sur macOS, mais vous devez d'abord vous informer des Directives relatives à l’interface d’Apple concernant les notifications.

Notez que les notifications sont limitées à 256 octets de taille et risque d’être tronquées si vous dépassez cette limite.

Requête de l'état des notification

Pour détecter si vous êtes autorisé ou non à envoyer une notification, utilisez le module userland macos-notification-state.

Ce module vous permet de détecter à l’avance si la notification sera affichée ou non.

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.

Utilisation
- Affichage de notifications à partir du processus principal
- Afficher les notifications dans le processus de rendu
Considérations relatives aux plate-formes