Уведомления
Обзор
Все три операционные системы предоставляют средства для приложений, чтобы отправлять уведомления пользователю. Техника отображения уведомлений отличается для процессов Main и Renderer.
Для процесса Renderer Electron удобно позволяет разработчикам отправлять уведомления с помощью API уведомлений HTML5, используя родные API уведомлений текущей операционной системы для их отображения.
Для отображения уведомлений в процессе Main необходимо использовать модуль Notification.
Пример
Отображение уведомлений в процессе Renderer
Начиная с работающего приложения из Руководства по быстрому запуску, добавьте следующую строку в файл index.html перед закрывающим </body> тегом:
<script src="renderer.js"></script>
…и добавьте файл 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
После запуска приложения Electron вы должны увидеть уведомление:
Кроме того, если вы нажмёте на уведомление, DOM обновится, отобразив «Уведомление нажато!».
Отображение уведомлений в процессе Main
Начиная с работающего приложения из Руководства по быстрому запуску, обновите файл main.js следующими строками:
- 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>
После запуска приложения Electron вы должны увидеть системное уведомление:
Дополнительная информация
Хотя код и пользовательский интерфейс в разных операционных системах похожи, существуют незначительные различия.
Windows
- В Windows 10 для доступа к вашему приложению с помощью ID модели пользователя приложения должен быть установлен ярлык в меню «Пуск». Во время разработки это может быть излишним, поэтому добавление
node_modules\electron\dist\electron.exeв меню «Пуск» также сработает. Перейдите к файлу в проводнике, щелкните правой кнопкой мыши и выберите «Закрепить в меню Пуск». Затем вам необходимо добавить строкуapp.setAppUserModelId(process.execPath)в ваш основной процесс, чтобы увидеть уведомления. - В Windows 8.1 и Windows 8 для доступа к вашему приложению с помощью ID модели пользователя приложения должен быть установлен ярлык на экране «Пуск». Однако его не нужно закреплять на экране «Пуск».
- В Windows 7 уведомления работают с помощью специальной реализации, визуально напоминающей родные уведомления в более новых системах.
Electron пытается автоматизировать обход ID модели пользователя приложения. Когда Electron используется вместе с системой установки и обновления Squirrel, ярлыки будут автоматически установлены правильно. Кроме того, Electron определит, что использовался Squirrel, и автоматически вызовет app.setAppUserModelId() с правильным значением. Во время разработки вам может потребоваться самостоятельно вызвать app.setAppUserModelId().
Кроме того, в Windows 8 максимальная длина тела уведомления составляет 250 символов, при этом команда Windows рекомендует, чтобы уведомления содержали не более 200 символов. Однако это ограничение было снято в Windows 10, и команда Windows просит разработчиков соблюдать разумность. Попытка отправки API огромного количества текста (тысячи символов) может привести к нестабильности.
Расширенные уведомления
Более поздние версии Windows позволяют использовать расширенные уведомления с настраиваемыми шаблонами, изображениями и другими гибкими элементами. Для отправки этих уведомлений (как из основного процесса, так и из процесса рендеринга) используйте модуль пользовательского уровня electron-windows-notifications, который использует родные плагины Node для отправки ToastNotification и TileNotification объектов.
Хотя уведомления с кнопками работают с electron-windows-notifications, обработка ответов требует использования electron-windows-interactive-notifications, что помогает в регистрации необходимых компонентов COM и вызове вашего приложения Electron с введенными пользователем данными.
Режим «Не беспокоить»/Режим презентации
Чтобы определить, разрешено ли отправлять уведомление, используйте модуль пользовательского уровня electron-notification-state.
Это позволит определить заранее, будет ли Windows молча игнорировать уведомление.
macOS
Уведомления в macOS простые, но вы должны быть знакомы с руководством Apple по пользовательскому интерфейсу, касающимся уведомлений.
Обратите внимание, что уведомления ограничены размером 256 байт и будут усечены, если вы превысите этот предел.
Режим «Не беспокоить»/Состояние сессии
Чтобы определить, разрешено ли отправлять уведомление, используйте модуль пользовательского уровня electron-notification-state.
Это позволит вам определить заранее, будет ли отображено уведомление.
Linux
Уведомления отправляются с помощью libnotify, что может показывать уведомления в любой среде рабочего стола, которая соответствует Спецификации уведомлений рабочего стола, включая Cinnamon, Enlightenment, Unity, GNOME, KDE.
© GitHub Inc.
Licensed under the MIT license.
https://www.electronjs.org/docs/latest/tutorial/notifications
