閱讀(1.1k) 書(shū)簽贊(0) 我要糾錯(cuò)

Electron 通知（Notifications）

2023-02-16 17:15 更新

概覽?

這三個(gè)操作系統(tǒng)都為應(yīng)用程序向用戶發(fā)送通知提供了手段。在主進(jìn)程和渲染進(jìn)程中，顯示通知的技術(shù)不同的。

對(duì)于渲染進(jìn)程，Electron 方便地允許開(kāi)發(fā)者使用 HTML5 通知 API 發(fā)送通知，然后使用當(dāng)前運(yùn)行中的系統(tǒng)的原生通知 API 來(lái)進(jìn)行顯示。

要在主進(jìn)程中顯示通知，您需要使用 Notification 模塊。

示例?

在渲染進(jìn)程中顯示通知

從 快速入門(mén) 示例的應(yīng)用程序開(kāi)始，將以下行添加到 index.html 文件：

<script src="renderer.js"></script>

并添加 renderer.js 文件：

main.js index.html renderer.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>After launching this application, you should see the system notification.</p>
    <p id="output">Click it to see the effect in this interface.</p>

    <script src="renderer.js"></script>
</body>
</html>

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 = () => document.getElementById("output").innerText = CLICK_MESSAGE

DOCS/FIDDLES/FEATURES/NOTIFICATIONS/RENDERER (22.0.3)

Open in Fiddle

啟動(dòng) Electron 應(yīng)用程序后，您應(yīng)該能看到通知：

此外，如果您點(diǎn)擊通知，DOM將更新以顯示“Notification clicked!”

在主進(jìn)程中顯示通知

從 快速入門(mén) 中的應(yīng)用開(kāi)始，將以下內(nèi)容更新到 main.js。

main.js index.html

const { app, BrowserWindow, Notification } = require('electron')

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>After launching this application, you should see the system notification.</p>
</body>
</html>

DOCS/FIDDLES/FEATURES/NOTIFICATIONS/MAIN (22.0.3)

Open in Fiddle

啟動(dòng) Electron 應(yīng)用程序后，您應(yīng)該能看到系統(tǒng)通知：

更多信息?

雖然操作系統(tǒng)的代碼和用戶體驗(yàn)相似，但依然存在微妙的差異。

Windows

在 Windows 10 上，您的應(yīng)用程序的快捷方式必須安裝到啟動(dòng)菜單中，包含一個(gè) Application User Model ID. 這在開(kāi)發(fā)過(guò)程中可能是多余的，因?yàn)閷?node_modules\electron\dist\electron.exe 添加到您的開(kāi)始菜單也可以解決問(wèn)題。導(dǎo)航到資源管理器中的文件，右鍵單擊并選擇 “固定到開(kāi)始菜單”。然后您需要添加 app.setAppUserModelId(process.execPath) 到主進(jìn)程才能看到通知。
在 Windows 8.1 和 Windows 8 上，帶有應(yīng)用程序用戶模型ID（Application User Model ID）的應(yīng)用程序快捷方式必須被添加到開(kāi)始屏幕上。但是請(qǐng)注意，它不需要被固定到開(kāi)始屏幕。
在 Windows 7 上, 通知通過(guò)視覺(jué)上類(lèi)似于較新系統(tǒng)原生的一個(gè)自定義的實(shí)現(xiàn)來(lái)工作。

Electron嘗試將應(yīng)用程序用戶模型 ID 的相關(guān)工作自動(dòng)化。 Electron在和安裝和更新框架 Squirrel 協(xié)同使用的時(shí)候，快捷方式將被自動(dòng)正確的配置好。更棒的是，Electron 會(huì)自動(dòng)檢測(cè) Squirrel 的存在，并且使用正確的值來(lái)自動(dòng)調(diào)用app.setAppUserModelId()。在開(kāi)發(fā)的過(guò)程中, 你可能需要自己調(diào)用app.setAppUserModelld()

此外，在Windows 8中，通知正文的最大長(zhǎng)度為250個(gè)字符，Windows團(tuán)隊(duì)建議將通知保留為200個(gè)字符。然而，Windows 10中已經(jīng)刪除了這個(gè)限制，但是Windows團(tuán)隊(duì)要求開(kāi)發(fā)人員合理使用。嘗試將大量文本發(fā)送到API(數(shù)千個(gè)字符) 可能會(huì)導(dǎo)致不穩(wěn)定。

高級(jí)通知

Windows 的更高版本允許高級(jí)通知，自定義模板，圖像和其他靈活元素。要發(fā)送這些通知(來(lái)自主進(jìn)程或渲染器進(jìn)程)，請(qǐng)使用用戶區(qū)模塊 electron-windows-notifications 來(lái)用原生節(jié)點(diǎn)附件發(fā)送 ToastNotification 和 TileNotification 對(duì)象。

當(dāng)包括按鈕在內(nèi)的通知使用 electron-windows-notifications 時(shí)，處理回復(fù)需要使用 electron-windows-interactive-notifications 幫助注冊(cè)所需的 COM 組件并調(diào)用您的 Electron 應(yīng)用程序和輸入的用戶數(shù)據(jù)。

免打擾模式 / 演示模式

如果要檢測(cè)是否允許發(fā)送通知，請(qǐng)使用 electron-notification-state 模塊。

這樣，您可以提前確定 Windows 是否會(huì)將通知忽略。

macOS

MacOS上的通知是最直接的，但你應(yīng)該注意蘋(píng)果關(guān)于通知的人機(jī)接口指南（Apple's Human Interface guidelines regarding notifications）.

請(qǐng)注意，通知的大小限制為256個(gè)字節(jié)，如果超過(guò)該限制，則會(huì)被截?cái)唷?/p>

勿擾 / 會(huì)話狀態(tài)

要檢測(cè)是否允許發(fā)送通知，請(qǐng)使用用戶區(qū)模塊 electron-notification-state。

這樣可以提前檢測(cè)是否顯示通知。

Linux

通知是通過(guò)libnotify發(fā)送的，libnotify可以在任何實(shí)現(xiàn)了桌面通知規(guī)范（Desktop Notifications Specification）的桌面環(huán)境中發(fā)送通知，包括Cinnamon、Enlightenment、Unity、GNOME、KDE

以上內(nèi)容是否對(duì)您有幫助：

← Electron 原生文件拖 & 放

Electron 離屏渲染 →

寫(xiě)筆記

我要補(bǔ)充