メインコンテンツへ飛ぶ

通知

オペレーティングシステムにはそれぞれ、ユーザに通知を表示する独自のメカニズムがあります。 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 (36.4.0)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 (36.4.0)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 ではカスタムテンプレート、画像、その他の柔軟な要素を使用した高度な通知が可能です。

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

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

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

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

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

macOS​

macOS 上での通知は簡単ですが、通知に関する Apple のヒューマンインタフェースガイドライン を理解しておく必要があります。

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

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

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

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

Linux​

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