Electron - Notifications
Electron fournit une API de notifications native uniquement pour MacOS. Nous n'allons donc pas utiliser cela, nous utiliserons plutôt un module npm appelé node-notifier . Cela nous permet d'avertir les utilisateurs sous Windows, MacOS et Linux.
Installez le module node-notifier dans votre dossier d'application à l'aide de la commande suivante dans ce dossier -
$ npm install --save node-notifierCréons maintenant une application dotée d'un bouton qui générera une notification à chaque fois que nous cliquons sur ce bouton.
Créer un nouveau main.js fichier et entrez le code suivant -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)Créons maintenant notre page Web et notre script qui déclencheront la notification. Créer un nouveauindex.html fichier avec le code suivant -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Menus</title>
</head>
<body>
<button type = "button" id = "notify" name = "button">
Click here to trigger a notification!</button>
<script type = "text/javascript">
const notifier = require('node-notifier')
const path = require('path');
document.getElementById('notify').onclick = (event) => {
notifier.notify ({
title: 'My awesome title',
message: 'Hello from electron, Mr. User!',
icon: path.join('','/home/ayushgp/Desktop/images.png'), // Absolute path
(doesn't work on balloons)
sound: true, // Only Notification Center or Windows Toasters
wait: true // Wait with callback, until user action is taken
against notification
}, function (err, response) {
// Response is response from notification
});
notifier.on('click', function (notifierObject, options) {
console.log("You clicked on the notification")
});
notifier.on('timeout', function (notifierObject, options) {
console.log("Notification timed out!")
});
}
</script>
</body>
</html>le notify méthode nous permet de lui passer un objectwithdes informations telles que le titre, le message, la vignette, etc. qui nous aident à personnaliser la notification. Nous pouvons également définir certains écouteurs d'événements sur la notification.
Maintenant, exécutez l'application à l'aide de la commande suivante -
$ electron ./main.jsLorsque vous cliquez sur le bouton que nous avons créé, vous verrez une notification native de votre système d'exploitation comme indiqué dans la capture d'écran suivante -
Nous avons également géré les événements dans lesquels l'utilisateur clique sur la notification ou la notification expire. Ces méthodes nous aident à rendre l'application plus interactive si elle s'exécute en arrière-plan.