メインコンテンツへ飛ぶ

通知

Each operating system has its own mechanism to display notifications to users. Electron's notification APIs are cross-platform, but are different for each process type.

If you want to use a renderer process API in the main process or vice-versa, consider using inter-process communication.

使い方​

Below are two examples showing how to display notifications for each process type.

Show notifications in the main process​

Main process notifications are displayed using Electron's Notification module. Notification objects created using this module do not appear unless their show() instance method is called.

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

Here's a full example that you can open with Electron Fiddle:

docs/fiddles/features/notifications/main (23.2.0)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()
  }
})

Show notifications in the renderer process​

Notifications can be displayed directly from the renderer process with the web Notifications API.

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

Here's a full example that you can open with Electron Fiddle:

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

Platform considerations​

オペレーティングシステム間でのコードとユーザエクスペリエンスは似ていますが、微妙な違いがあります。

Windows​

For notifications on Windows, your Electron app needs to have a Start Menu shortcut with an AppUserModelID and a corresponding ToastActivatorCLSID.

Electron attempts to automate the work around the AppUserModelID and ToastActivatorCLSID. When Electron is used together with Squirrel.Windows (e.g. if you're using electron-winstaller), shortcuts will automatically be set correctly.

In production, Electron will also detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. 開発中では、app.setAppUserModelId() を自身で呼び出す必要があります。

Notifications in development

To quickly bootstrap notifications during development, adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. エクスプローラーでそのファイルを開き、右クリックして 'スタート メニューにピン留めする' を選択します。 Then, call app.setAppUserModelId(process.execPath) in the main process to see notifications.

Use advanced notifications​

Windows also allow for advanced notifications with custom templates, images, and other flexible elements.

To send those notifications from the main process, you can use the userland module electron-windows-notifications, which uses native Node addons to send ToastNotification and TileNotification objects.

ボタンを含む通知は electron-windows-notifications で機能しますが、返信を処理するには electron-windows-interactive-notifications を使用する必要があります。これにより、必要な COM コンポーネントを登録し、入力したユーザーデータを使用して Electron アプリを呼び出すことができます。

Query notification state​

To detect whether or not you're allowed to send a notification, use the userland module windows-notification-state.

This module allows you to determine ahead of time whether or not Windows will silently throw the notification away.

macOS​

Notifications are straightforward on macOS, but you should be aware of Apple's Human Interface guidelines regarding notifications.

注意として、通知サイズは 256 バイトまでに制限されており、それを超えると切り捨てられます。

Query notification state​

To detect whether or not you're allowed to send a notification, use the userland module macos-notification-state.

This module allows you to detect ahead of time whether or not the notification will be displayed.

Linux​

Notifications are sent using libnotify, which can show notifications on any desktop environment that follows Desktop Notifications Specification, including Cinnamon, Enlightenment, Unity, GNOME, and KDE.