Electron 通知和托盘图标-JavaScript中文网-JavaScript教程资源分享门户

通知功能

在 Electron 中，我们可以使用 Notification API 来创建桌面通知。这个功能可以让用户即使不在应用的窗口中也能接收到消息提示。

创建一个基本的通知

首先，你需要确保你的应用已经启用了通知权限。可以通过调用 Notification.requestPermission() 方法来请求权限。

Notification.requestPermission().then((result) => {
  console.log(result); // "granted", "denied" 或 "default"
});

当权限被授予后，你可以创建一个新的通知：

// www.javascriptcn.com code example
const notification = new Notification('标题', {
  body: '这是通知的内容',
  icon: './path/to/icon.png'
});

notification.onclick = function () {
  window.focus();
  this.close();
};

自定义通知样式

虽然原生的通知样式不能被完全定制，但你可以通过自定义 HTML 和 CSS 来实现更复杂的交互和视觉效果。这通常需要结合 Web Notifications API 和一些自定义代码。

<!-- 示例 HTML -->
<div id="custom-notification">
  <div class="content">
    <h3>自定义通知</h3>
    <p>这里是通知的内容。</p>
  </div>
</div>

// www.javascriptcn.com code example
/* 示例 CSS */
#custom-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none; /* 默认隐藏 */
}

#custom-notification.show {
  display: block;
}

// www.javascriptcn.com code example
// JavaScript
function showCustomNotification() {
  const notificationElement = document.getElementById('custom-notification');
  notificationElement.classList.add('show');

  setTimeout(() => {
    notificationElement.classList.remove('show');
  }, 5000); // 5秒后自动消失
}

document.addEventListener('DOMContentLoaded', () => {
  if (Notification.permission === 'granted') {
    showCustomNotification();
  }
});

托盘图标功能

托盘图标（Tray Icon）是另一种与用户交互的重要方式，它允许用户通过系统托盘区域访问你的应用的功能。

创建托盘图标

首先，你需要安装 electron-tray 模块（如果还没有安装的话）：

npm install electron-tray

然后，在你的主进程中初始化一个托盘图标：

// www.javascriptcn.com code example
const { app, Tray } = require('electron');
const path = require('path');

app.on('ready', () => {
  const tray = new Tray(path.join(__dirname, 'path/to/icon.png'));

  // 设置托盘图标的上下文菜单
  const contextMenu = Menu.buildFromTemplate([
    { label: '显示/隐藏', click: () => {} },
    { label: '退出', click: () => app.quit() }
  ]);

  tray.setToolTip('这是一个 Electron 应用');
  tray.setContextMenu(contextMenu);
});

托盘图标的事件处理

你可以监听托盘图标的点击事件，以执行特定的操作：

tray.on('click', () => {
  // 显示或隐藏应用窗口
  mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
});

Electron 通知和托盘图标