在桌面應用中，通知 和 系統 Tray（系統托盤）是提升使用者體驗的常見功能。通知可以用來提示使用者重要的訊息，而系統 Tray 則能提供便捷的操作方式，讓應用即使在視窗最小化或關閉的情況下仍然能夠在後台運行。

本文將介紹如何在 Electron 中實作通知功能，並建立一個系統 Tray 應用，讓你的桌面應用更具互動性與實用性。

建立桌面通知功能

桌面通知 是一種常見的提示方式，能夠即時向使用者展示訊息。Electron 提供了簡單的 new Notification() API 來實現通知功能，這與瀏覽器的通知 API 相似。

基本通知範例

你可以通過以下程式碼快速建立一個通知，並顯示在桌面上：

function showNotification() {
  new Notification({
    title: '新通知',
    body: '這是一條桌面通知！',
    icon: 'path/to/icon.png' // 可以設置通知的圖標
  }).show();
}

在應用啟動時顯示通知

你可以讓應用在啟動時顯示一條歡迎通知，這樣可以告知使用者應用已經準備好開始工作：

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

app.whenReady().then(() => {
  new Notification({
    title: '應用啟動成功',
    body: '歡迎使用這個應用程式！'
  }).show();
});

回應使用者的點擊操作

你可以讓通知回應使用者的點擊事件，從而觸發一些操作。例如，當使用者點擊通知時，可以讓應用打開某個視窗或執行某些行為：

const notification = new Notification({
  title: '點擊回應',
  body: '點擊此通知以查看更多訊息。'
});

notification.on('click', () => {
  console.log('通知已被點擊');
  // 可以在這裡打開應用視窗或執行其他操作
});

notification.show();

建立系統 Tray（托盤）應用

系統 Tray 是桌面應用的一個常見特性，特別是在應用需要在後台運行並且能夠快速提供操作時非常有用。使用系統 Tray，你可以在使用者的任務欄（Windows）、菜單欄（macOS）或系統通知區（Linux）中顯示應用的圖標。

建立一個簡單的 Tray 應用

在 Electron 中，你可以使用 Tray 類來建立托盤圖標，並將應用常見的操作項目整合進一個右鍵菜單中。

const { app, Menu, Tray } = require('electron');
let tray = null;

app.whenReady().then(() => {
  tray = new Tray('path/to/tray-icon.png'); // 設定托盤圖標
  
  const contextMenu = Menu.buildFromTemplate([
    { label: '顯示應用', click: () => { /* 打開應用程式的視窗 */ } },
    { label: '退出', click: () => { app.quit(); } }
  ]);
  
  tray.setToolTip('這是我的 Electron 應用');
  tray.setContextMenu(contextMenu);
});

托盤與應用的互動

當應用最小化或關閉時，你可以讓應用繼續運行並顯示在系統托盤中。這樣使用者可以通過托盤圖標快速打開或退出應用。

以下是範例，應用在被最小化時隱藏主視窗，但仍然在系統 Tray 中顯示，並允許使用者通過托盤圖標再次打開應用：

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

let mainWindow;
let tray = null;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  
  // 當視窗最小化時，隱藏視窗並保持托盤圖標
  mainWindow.on('minimize', (event) => {
    event.preventDefault();
    mainWindow.hide();
  });

  // 當使用者關閉視窗時，只隱藏視窗而不退出應用
  mainWindow.on('close', (event) => {
    if (!app.isQuitting) {
      event.preventDefault();
      mainWindow.hide();
    }
  });

  // 建立托盤圖標和右鍵選單
  tray = new Tray('path/to/tray-icon.png');
  const contextMenu = Menu.buildFromTemplate([
    { label: '顯示應用', click: () => { mainWindow.show(); } },
    { label: '退出', click: () => {
      app.isQuitting = true;
      app.quit();
    } }
  ]);

  tray.setToolTip('這是我的應用');
  tray.setContextMenu(contextMenu);
});

隱藏視窗並顯示托盤

你可以讓應用的主要視窗在啟動時最小化，並且只有通過系統托盤圖標才能將其顯示出來。這對於一些需要長期在後台運行的應用（如音樂播放器、下載器）非常有用。

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({ width: 800, height: 600, show: false });

  // 在應用啟動時隱藏視窗
  mainWindow.once('ready-to-show', () => {
    mainWindow.hide();
  });

  tray = new Tray('path/to/tray-icon.png');
  const contextMenu = Menu.buildFromTemplate([
    { label: '顯示應用', click: () => { mainWindow.show(); } },
    { label: '退出', click: () => {
      app.isQuitting = true;
      app.quit();
    } }
  ]);

  tray.setToolTip('背景應用正在運行');
  tray.setContextMenu(contextMenu);
});

使用通知與 Tray 進行整合

為了讓通知與系統 Tray 更加靈活，我們可以將兩者進行整合。舉例來說，當應用在後台運行並接收到某個事件時，通過通知來提醒使用者，並提供系統 Tray 中的快捷操作來處理這些事件。

例如，當收到新消息時，可以在通知中顯示，並在 Tray 中提供快速打開應用來查看詳細訊息：

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

let mainWindow;
let tray = null;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({ width: 800, height: 600, show: false });

  tray = new Tray('path/to/tray-icon.png');
  const contextMenu = Menu.buildFromTemplate([
    { label: '顯示應用', click: () => { mainWindow.show(); } },
    { label: '退出', click: () => {
      app.isQuitting = true;
      app.quit();
    } }
  ]);

  tray.setToolTip('這是我的應用');
  tray.setContextMenu(contextMenu);

  // 模擬收到新消息的情況
  setTimeout(() => {
    showNotification('新消息', '你有一條新的消息！');
  }, 5000); // 5 秒後顯示通知
});

function showNotification(title, body) {
  const notification = new Notification({
    title: title,
    body: body
  });

  notification.on('click', () => {
    mainWindow.show(); // 點擊通知時打開應用視窗
  });

  notification.show();
}

總結

通過使用 Electron 的通知和系統 Tray 功能，你可以讓應用變得更加互動且高效。通知能夠及時提示使用者重要資訊，而 Tray 則讓應用能夠長時間在後台運行，提供便捷的操作入口。這些功能非常適合需要長時間運行的應用，例如聊天工具、音樂播放器、下載器等。通過靈活地組合這些功能，你可以顯著提升應用的使用體驗。