Notifications
Vue d'ensemble
Les trois systèmes d'exploitation permettent aux applications d'envoyer des notifications à l'utilisateur. La technique d’affichage des notifications est différente pour les processus Main et Renderer.
Pour les processus de rendu (Renderer), Electron permet aux développeurs d’envoyer des notifications avec l’API de notification HTML5 , en utilisant pour les afficher les API de notification natives du système d’exploitation en cours d’exécution .
Pour afficher les notifications à partir du processus principal, vous devez utiliser le module Notification .
Exemple
Affichage de notifications à partir du processus de rendu
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
Après avoir lancé l’application Electron, vous devrez voir la notification:
De plus, si vous cliquez sur la notification, le DOM se mettra à jour pour afficher "Notification cliquée!".
Affichage de notifications à partir du processus principal
À 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 devrez voir la notification système :
Informations complémentaires
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. Mais cela peut être un peu trop compliqué pour le développement et l'ajout de
node_modules\electron\dist\electron.exeau menu de démarrage fait tout aussi bien l'affaire. Naviguez vers le fichier dans l'explorateur, cliquez avec le bouton droit de la souris et Épinglez le au menu de démarrage. 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.