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

Electron 通知（Notifications）

2023-02-16 17:15 更新

概覽?

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

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

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

示例?

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

從 快速入門 示例的應(yīng)用程序開始，將以下行添加到 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)程中顯示通知

從 快速入門 中的應(yīng)用開始，將以下內(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)通知：

Electron 通知（Notifications）

概覽?

示例?

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

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

更多信息?

Windows

高級(jí)通知

免打擾模式 / 演示模式

macOS

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

Linux