Благодаря webkit вы можете настроить с помощью CSS пользовательский интерфейс вашего приложения, как вы пожелаете. Необычное уведомление может быть создано в окне вашего приложения, однако иногда вы можете захотеть уведомить что-то для своего пользователя, даже если оно не использует приложение в первом простом или свернуто.
Вот почему нам нужно получить доступ к системе уведомлений ОС, которая позволит вам отправлять сообщения пользователю на экране в любой ситуации, хотя они использовали другое приложение.
Но помни, все в избытке плохо. Вы можете быть осторожны, как часто вы показываете эти сообщения пользователю и запрашиваете разрешение на это, поскольку чрезмерное использование собственных уведомлений может раздражать и раздражать.
Возможно, вы спросите себя: почему бы не использовать API webkitNotification? Вы также можете использовать этот API с электронным, но он не доступен для Windows. Он работает с Linux и MacOS, однако он не имеет того же самого внешнего вида, поэтому мы рекомендуем вам использовать node-notifier плагин с вашим приложением Electron.
Node notifier — это модуль Node.js для отправки кроссплатформенных системных уведомлений. Используя Центр уведомлений для Mac, notify-osd / libnotify-bin для Linux, Toasters для Windows 8/10 или панели задач для более ранних версий Windows. Если ни одно из этих требований не выполнено, используется Growl.
Реализация
Для достижения нашей цели мы будем использовать библиотеку Notifier Notifier, которую можно скачать в вашем проекте с помощью следующей команды:
npm install --save node-notifierПосетите официальный репозиторий проекта здесь. После успешной установки вы получите доступ к уведомителю с помощью require('node-notifier'),
Важная заметка : себе электрон (последняя сборка), предлагает вам API уведомлений, который отправляет простое уведомление (так же, как это делает узел-уведомитель) в операционной системе. Вы можете попробовать его, используя следующий фрагмент.
Все три операционные системы предоставляют приложениям средства для отправки уведомлений пользователю. Электрон удобно позволяет разработчикам отправлять уведомления с API уведомления HTML5, использовать для отображения нативные API уведомлений текущей операционной системы.
Замечания: Так как это HTML5 API, он доступен только в процессе рендеринга.
// You can use console.log(notification); to see more available properties
var notification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet',
title:"Hello",
icon:'C:/images/icon.png',
// To prevent sound
//silent:true,
});
notification.addEventListener("click",function(){
alert("Clicked");
},false);
notification.addEventListener("show",function(){
alert("Shown :3");
},false);
notification.addEventListener("error",function(e){
alert("Error :c");
},false);
notification.addEventListener("close",function(){
alert("Closed");
},false);Если вы думаете, что хотите еще больше, тогда продолжайте читать использование node-notifier,
Уведомить всех
Теперь вам просто нужно начать использовать уведомитель, следующий фрагмент показывает простое сообщение со звуком и значком.
Примечание: метод уведомления является кроссплатформенным, более глубокая настройка возможна для каждой платформы, если вы прочитаете документацию.
const notifier = require("node-notifier");
var onError = function(err,response){
console.error(err,response);
};
notifier.notify({
message: "This is the body of the notification.",
title: "This will be the title of the notification",
// Special sound
// Case Sensitive string for location of sound file, or use one of OS X's native sounds
// Only Notification Center or Windows Toasters
sound: true,//"Bottle",
// The absolute path to the icon of the message
// (doesn't work on balloons)
// If not found, a system icon will be shown
icon : "C:/images/ocw-logo.png",
// Wait with callback (onClick event of the toast), until user action is taken against notification
wait:true
},onError);
notifier.on('click', function (notifierObject, options) {
// Triggers if `wait: true` and user clicks notification
alert("Callback triggered");
});Метод notify имеет кроссплатформенное стандартное использование с кросс-платформенными откатами. Этот метод будет работать так или иначе на всех платформах.
Тем не менее, уведомитель позволяет вам настроить в соответствии с каждой платформой, как вы хотите, см. Подробный отчет о настройке в хранилище.
Windows
Модуль тостера работает только в Windows> = 8.
Существуют некоторые ограничения для изображений в родных уведомлениях Windows 8: изображение должно быть изображением PNG и не может превышать 1024×1024 px или более 200Kb. Вам также необходимо указать изображение, используя абсолютный путь. Эти ограничения связаны с системой уведомлений Toast. Хороший совет — использовать что-то вроде path.join или path.delimiter для межплатформенного пути.
Windows 10 Note: Вам может потребоваться активировать баннерное уведомление для показа тоста.
const WindowsToaster = require('node-notifier').WindowsToaster;
var notifier = new WindowsToaster({
withFallback: false, // Fallback to Growl or Balloons?
customPath: void 0 // Relative path if you want to use your fork of toast.exe
});
notifier.notify({
title: "Title",
message: "Message",
icon: "c:/path/image.png", // Absolute path to Icon
sound: true, // true | false.
wait: false, // Wait for User Action against Notification
}, function(error, response) {
console.log(response);
});Для более ранних версий Windows используются всплывающие подсказки панели задач (если не активирован запасной вариант и не запущен Growl).
MacOS
Для Native Notification Center требуется Mac OS X версии 10.8 или выше. Если у вас есть более ранняя версия, Growl станет запасным вариантом. Если Growl не установлен, в обратном вызове будет возвращена ошибка.
const NotificationCenter = require('node-notifier').NotificationCenter;
var notifier = new NotificationCenter({
withFallback: false, // Use Growl Fallback if <= 10.8
customPath: void 0 // Relative path if you want to use your fork of terminal-notifier
});
notifier.notify({
'title': "Hello world",
'subtitle': void 0,
'message': void 0,
'sound': false, // Case Sensitive string for location of sound file, or use one of OS X's native sounds (see below)
'icon': 'Terminal Icon', // Absolute Path to Triggering Icon
'contentImage': void 0, // Absolute Path to Attached Image (Content Image)
'open': void 0, // URL to open on Click
'wait': false // Wait for User Action against Notification
}, function(error, response) {
console.log(response);
});Звук может быть одним из следующих: Basso, Blow, Bottle, Frog, Funk, Glass, Hero, Morse, Ping, Pop, Purr, Sosumi,Submarine, Tink, Если звук просто true, Bottle используется.
Увидеть конкретный пример Центра уведомлений.
Известные проблемы с электроном
Внутри упаковки Electron Если вы упакуете ваше приложение Electron как asar, вы обнаружите, что узел-уведомитель не сможет загрузиться. Из-за того, как работает asar, вы не можете выполнить двоичный файл изнутри asar. В качестве простого решения при упаковке приложения в asar, пожалуйста, убедитесь, что вы распаковали папку vendor узла-уведомителя, чтобы модуль все еще имел доступ к двоичным файлам уведомлений. Для этого вы можете сделать это с помощью следующей команды:
asar pack . app.asar --unpack "./node_modules/node-notifier/vendor/**"Повеселись
