Notifications
Vue d'ensemble
All three operating systems provide means for applications to send notifications to the user. The technique of showing notifications is different for the Main and Renderer processes.
For the Renderer process, 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.
To show notifications in the Main process, you need to use the Notification module.
Exemple
Show notifications in the Renderer process
En partant d'une application fonctionnelle du Guide de démarrage rapide, ajoutez les lignes suivantes au fichier index.html avant la balise de fermeture </body> :
<script src="renderer.js"></script>
... et ajoutez le fichier renderer.js :
- main.js
- index.html
- renderer.js
const { app, BrowserWindow } = require('electron')
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 Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
.onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE
After launching the Electron application, you should see the notification:
De plus, si vous cliquez sur la notification, le DOM se mettra à jour pour afficher "Notification cliquée!".
Show notifications in the Main process
À partir d’une application fonctionnelle du Guide de démarrage rapide, mettez à jour le fichier main.js avec les lignes suivantes :
- main.js
- index.html
const { app, BrowserWindow, Notification } = require('electron')
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>
Après avoir lancé l'application Electron, vous devriez voir la notification système :
Additional information
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
- Sous Windows 10, un raccourci vers votre application avec un ID de modèle d’utilisateur d’application doit être installé sur le Menu Démarrer. This can be overkill during development, so adding
node_modules\electron\dist\electron.exeto your Start Menu also does the trick. Naviguez vers le fichier dans l'explorateur, cliquez avec le bouton droit de la souris et 'Épingler pour démarrer le menu'. Vous devrez ensuite ajouter la ligneapp.setAppUserModelId(process.execPath)à votre processus principal pour voir les notifications. - Sous Windows 8.1 et Windows 8, un raccourci vers votre application avec un Utilisateur de l'application ID modèle doit être installé sur l'écran de démarrage. Notez, cependant, qu’il n’a pas besoin d’être épinglée à l’écran de démarrage.
- Sur Windows 7, les notifications fonctionnent via une implémentation personnalisée qui ressemble visuellement au natif sur les systèmes plus récents.
Electron tente d'automatiser le travail autour de l'ID du modèle utilisateur de l'application. Quand Electron est utilisé conjointement avec l'installation et la mise à jour du framework Squirrel, raccourcis seront automatiquement configurés correctement. De plus, Electron détectera que Squirrel a été utilisé et appellera automatiquement app.setAppUserModelId() avec la valeur correcte. Pendant le développement, vous pouvez avoir pour appeler app.setAppUserModelId() vous-même.
En outre, dans Windows 8, la longueur maximale pour le corps de notification est de 250 caractères, l'équipe Windows recommande que les notifications fassent jusqu'à 200 caractères. Cela dit, la limitation a été retiré sur Windows 10. L'équipe Windows demandant aux développeurs de rester raisonnable. Essayer d'envoyer des quantités gigantesques de textes à l'API (milliers de caractères) peut entraîner une instabilité.
Notifications enrichies
Les versions ultérieures de Windows permettent aux notifications enrichies, avec des modèles personnalisés, des images et autres éléments. Pour envoyer ces notifications (depuis processus principal ou le processus de rendu), utilisez le "userland" module electron-windows-notifications, qui utilise un addons natif de Node 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.
Ne pas déranger / Mode présentation
Utilisez le module userland electron-notification-state afin de détecter si vous êtes autorisé à envoyer une notification, .
Cela permet de déterminer à l'avance si Windows supprimera silencieusement la notification.
macOS
Les notifications sont simples sur macOS, mais vous devriez être au courant de Directives de l'interface humaine 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.
Ne pas déranger / État de la session
Pour détecter si oui ou non vous êtes autorisé à envoyer une notification, utilisez module "userland" electron-notification-state.
Cela vous permettra de détecter si la notification sera affichée ou pas.
Linux
Les notifications sont envoyées à l'aide de libnotify qui permet l'affichage de notifications sur n'importe quel environnement bureau suivant Desktop Notifications Specification, comme Cinnamon, Enlightenment, Unity, GNOME et KDE.