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​

Les notifications de processus principaux sont affichées en utilisant le module de notification d'Electron. 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')

const NOTIFICATION_TITLE = 'Basic Notification'
const NOTIFICATION_BODY = 'Notification from the Main process'

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

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

docs/fiddles/features/notifications/main (27.1.3)Open in Fiddle
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()
  }
})

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
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)

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

docs/fiddles/features/notifications/renderer (27.1.3)Open in Fiddle
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 }

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. Pendant le développement, vous pouvez avoir pour appeler app.setAppUserModelId() vous-même.

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​

Les notifications sont émises en utilisant libnotify, qui peut afficher les notifications sur n’importe quel environnement de bureau suivant les Specifications des Notifications de bureau, y compris Cinnamon, Enlightenment, Unity, GNOME et KDE.