跳至主要內容

通知

每個作業系統都有其向使用者顯示通知的機制。Electron 的通知 API 是跨平台的，但對於每種進程類型來說都有所不同。

如果您想在主進程中使用渲染器進程 API，反之亦然，請考慮使用跨進程通訊。

用法​

以下是兩個範例，展示如何顯示每種進程類型的通知。

在主進程中顯示通知​

主進程通知使用 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 (34.0.0)在 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直接從渲染器進程顯示通知。

渲染器進程
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 (34.0.0)在 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 還允許使用自訂範本、圖片和其他彈性元素的進階通知。

若要從主進程傳送這些通知，您可以使用使用者空間模組 electron-windows-notifications，它使用原生 Node 附加元件來傳送 ToastNotification 和 TileNotification 物件。

雖然包含按鈕的通知可以使用 electron-windows-notifications，但處理回覆需要使用 electron-windows-interactive-notifications，這有助於註冊所需的 COM 元件並使用輸入的使用者資料呼叫您的 Electron 應用程式。

查詢通知狀態​

若要偵測您是否被允許傳送通知，請使用使用者空間模組 windows-notification-state。

此模組可讓您提前確定 Windows 是否會靜默丟棄通知。

macOS​

macOS 上的通知非常簡單，但您應該注意Apple 關於通知的人機介面指南。

請注意，通知的大小限制為 256 個位元組，如果超出此限制，將會被截斷。

查詢通知狀態​

若要偵測您是否被允許傳送通知，請使用使用者空間模組 macos-notification-state。

此模組可讓您提前偵測是否會顯示通知。

Linux​

通知是使用 libnotify 傳送的，它可以在任何遵循桌面通知規格的桌面環境中顯示通知，包括 Cinnamon、Enlightenment、Unity、GNOME 和 KDE。