メインコンテンツへ飛ぶ

通知

オペレーティングシステムにはそれぞれ、ユーザに通知を表示する独自のメカニズムがあります。 Electron の通知 API はクロスプラットフォームですが、プロセスの種類ごとに異なります。

メインプロセスでレンダラープロセス API を使用する場合やその逆であっても、プロセス間通信 の使用をご検討ください。

使い方​

以下の 2 つのサンプルでは、それぞれのプロセスの種類において通知を表示する方法を示しています。

メインプロセスで通知を表示する​

Main process notifications are displayed using Electron's Notification module. このモジュールを使用して作成された通知オブジェクトは、 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()

Electron Fiddle で開ける完全なサンプルをこちらに示します。

docs/fiddles/features/notifications/main (45.3.3)Open in Fiddle
const { app, BrowserWindow, Notification } = require('electron/main')

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

レンダラープロセスで通知を表示する​

レンダラープロセスからの通知は ウェブの 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)

Electron Fiddle で開ける完全なサンプルをこちらに示します。

docs/fiddles/features/notifications/renderer (45.3.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 }

プラットフォームの考慮事項​

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

Windows​

Windows で通知を表示するときは、スタート メニューに Electron アプリのショートカットが AppUserModelID と対応する ToastActivatorCLSID で作成されている必要があります。

Electron は AppUserModelID と ToastActivatorCLSID の作業を自動化しようとしています。 Electron を Squirrel.WIndows と共に使用して (すなわち electron-wnstaller を使用して) いれば、ショートカットは正しく自動設定されます。

本番環境では、Electron は Squirrel が使用されたことも検出し、正しい値で自動的に app.setAppUserModelId() を呼び出します。 During development, you may have to call app.setAppUserModelId() yourself.

開発環境での通知

開発中に通知を素早くセットアップするには、スタート メニューに node_modules\electron\dist\electron.exe を追加してもうまくいきます。エクスプローラーでそのファイルを開き、右クリックして 'スタート メニューにピン留めする' を選択します。そして、メインプロセスで app.setAppUserModelId(process.execPath) を呼び出すと通知が表示されます。

通知の発展的な使用方法​

Windows allows for advanced notifications with custom templates, images, inputs, and action buttons.

To send advanced notifications from the main process on Windows, use the toastXml option of the Notification constructor. This property accepts an XML string conforming to the Microsoft Toast XML Schema and supersedes other notification options.

Main Process
const { Notification } = require('electron')

const xml = `
<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Notification Title</text>
      <text>Notification body text</text>
    </binding>
  </visual>
  <actions>
    <action content="Confirm" arguments="action=confirm" />
    <action content="Dismiss" arguments="action=dismiss" />
  </actions>
</toast>`

const notification = new Notification({ toastXml: xml })
notification.show()

Important considerations when using Toast XML on Windows:

  • AppUserModelID: You must call app.setAppUserModelId() before showing notifications. Windows uses this ID to associate toast notifications with your application in the notification center.
  • Image paths: When including local images in <image src="..." />, paths must be absolute and formatted as file:/// URLs (for example, using url.pathToFileURL(imagePath).toString()).
  • XML escaping: Dynamic strings placed inside XML elements or attributes must be XML-escaped (&amp;, &lt;, &gt;, &quot;, &apos;) to prevent XML parsing failures.
  • Error handling: If the XML string is malformed or invalid according to the Windows toast schema, the notification will not appear and the failed event will be emitted on the Notification instance.
  • Handling action buttons: Action buttons specify an arguments attribute. When clicked, Electron emits the action event with the action index. For deep-linking or custom protocol activation, specify activationType="protocol" on the <action> element.

通知の状態をクエリする​

通知の送信が許可されているかどうかを検出するには、ユーザーランドのモジュールである windows-notification-state を使用してください。

これにより、Windows が通知を出さないかどうかを事前に判断できます。

macOS​

For notifications on macOS, your application will need to be code-signed in order for notification events to emit correctly. This requirement stems from the underlying UNNotification API provided by Apple. Unsigned binaries will emit a failed event when notification APIs are called.

Additionally, you should be aware of Apple's Human Interface guidelines regarding notifications.

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

通知の状態をクエリする​

通知の送信が許可されているかどうかを検出するには、ユーザーランドのモジュールである macos-notification-state を使用してください。

このモジュールにより、通知が表示されるかどうかを事前に検出できます。

Linux​

通知は、Cinnamon、Enlightenment、Unity、GNOME、KDE を含む デスクトップ通知仕様 に従ってデスクトップ環境の通知を表示できる libnotify を使用して送信されます。