跳到主要內容

通知

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

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

用法​

以下是兩個範例，展示如何為每種處理程序類型顯示通知。

在主處理程序中顯示通知​

主處理程序通知是使用 Electron 的 Notification 模組顯示的。除非呼叫 Notification 物件的 show() 實例方法，否則使用此模組建立的 Notification 物件不會出現。

主處理程序
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 (35.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()
  }
})

在渲染器處理程序中顯示通知​

可以使用 網頁 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 (35.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 也允許使用自訂範本、圖像和其他彈性元素的進階通知。

若要從主處理程序傳送這些通知，您可以使用使用者空間模組 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。