使用 Electron 調用基本或附帶圖像的通知

使用 Electron 調用基本或附帶圖像的通知

此係列文章的應用示例已發佈於 GitHub: electron-api-demos-Zh_CN. 能夠 Clone 或下載後運行查看. 歡迎 Star .

使用 Electron 中的 notification 模塊能夠容許你增長基本的桌面通知.

Electron 容許開發者使用 HTML5 Notification API 發送通知, 並使用當前操做系統的原生通知 API 來顯示.

注意: 因爲這是一個 HTML5 API, 它只能在渲染器進程中使用.

在瀏覽器中查看 完整 API 文檔 .

基本通知

支持: Win 7+, macOS, Linux (支持 libnotify) | 進程: 渲染器

此示例演示了一個基本的通知. 只含有文字.

渲染器進程

const notification = {
  title: '基本通知',
  body: '短消息部分'
}
const notificationButton = document.getElementById('basic-noti')

notificationButton.addEventListener('click', function () {
  const myNotification = new window.Notification(notification.title, notification)

  myNotification.onclick = () => {
    console.log('Notification clicked')
  }
})

附帶圖像的通知

支持: Win 7+, macOS, Linux (支持 libnotify) | 進程: 渲染器

此示例演示了一個基本的通知. 同時含有文字和圖像.

渲染器進程

const path = require('path')

const notification = {
  title: '附帶圖像的通知',
  body: '短消息附帶自定義圖片',
  icon: path.join(__dirname, '../../../assets/img/programming.png')
}
const notificationButton = document.getElementById('advanced-noti')

notificationButton.addEventListener('click', function () {
  const myNotification = new window.Notification(notification.title, notification)

  myNotification.onclick = () => {
    console.log('Notification clicked')
  }
})

若是這邊文章對您有幫助, 感謝 下方點贊 或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.