メインコンテンツへスキップ

通知

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

メインプロセスでレンダラープロセスのAPIを使用したい場合、またはその逆の場合、プロセス間通信を使用することを検討してください。

使い方​

以下に、各プロセスタイプで通知を表示する方法を示す2つの例を示します。

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

メインプロセスの通知は、ElectronのNotificationモジュールを使用して表示されます。このモジュールを使用して作成された通知オブジェクトは、そのshow()インスタンスメソッドが呼び出されない限り表示されません。

メインプロセス
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 (33.0.1)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()
  }
})

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

通知は、web Notifications APIを使用して、レンダラープロセスから直接表示できます。

レンダラープロセス
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 (33.0.1)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-winstallerを使用している場合）と一緒に使用される場合、ショートカットは自動的に正しく設定されます。

本番環境では、ElectronはSquirrelが使用されたことを検出し、正しい値でapp.setAppUserModelId()を自動的に呼び出します。開発中は、app.setAppUserModelId()を自分で呼び出す必要がある場合があります。

開発中の通知

開発中に通知をすばやくブートストラップするには、node_modules\electron\dist\electron.exeをスタートメニューに追加することでも可能です。エクスプローラーでファイルに移動し、右クリックして「スタートメニューにピン留め」します。次に、メインプロセスでapp.setAppUserModelId(process.execPath)を呼び出して、通知を確認します。

高度な通知を使用する​

Windowsでは、カスタムテンプレート、画像、およびその他の柔軟な要素を備えた高度な通知も許可されています。

メインプロセスからこれらの通知を送信するには、ネイティブNodeアドオンを使用してToastNotificationオブジェクトとTileNotificationオブジェクトを送信するユーザーランドモジュールelectron-windows-notificationsを使用できます。

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

通知状態をクエリする​

通知を送信できるかどうかを検出するには、ユーザーランドモジュールwindows-notification-stateを使用します。

このモジュールを使用すると、Windowsが通知をサイレントに破棄するかどうかを事前に判断できます。

macOS​

macOSでの通知は簡単ですが、通知に関するAppleのヒューマンインターフェースガイドラインに注意する必要があります。

通知はサイズが256バイトに制限されており、その制限を超えると切り捨てられることに注意してください。

通知状態をクエリする​

通知を送信できるかどうかを検出するには、ユーザーランドモジュールmacos-notification-stateを使用します。

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

Linux​

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