Electron Desktop App Development · บทเรียน

แอปพลิเคชันถาดระบบและป้ายแจ้งเตือน

สร้างแอปพลิเคชันที่ทำงานอยู่ในถาดระบบหรือด็อก เพื่อให้เข้าถึงได้อย่างรวดเร็วและแสดงป้ายแจ้งเตือนที่ยังไม่ได้อ่าน

บทเรียน 2 จาก 411 ขั้นตอน

แอปพลิเคชันถาดระบบและป้ายแจ้งเตือน เป็นบทเรียน Electron Desktop App Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Electron Desktop App Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Intro to Tray & Dock Apps

Welcome! In this lesson, you'll learn how to make your Electron apps live in the system tray or macOS dock. These are great spots for apps that run in the background or need quick access.

The system tray (also known as the notification area) is usually found near the clock on Windows and Linux. On macOS, apps often have icons in the dock or the menu bar at the top.

Why Use Tray/Dock Features?

Integrating with the system tray or dock offers several benefits for your Electron application:

  • Quick Access: Users can interact with your app without opening its main window.
  • Background Tasks: Ideal for apps that run continuously, like chat clients or utility tools.
  • Status Updates: Display simple status indicators or unread notification counts.
  • Resource Efficiency: Allows the main window to be hidden, reducing screen clutter.

Creating a Basic Tray Icon

Electron's Tray module allows you to add icons to the system's notification area. You'll need an image file for your icon.

Here's how you initialize a basic tray icon:

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

let tray = null;
app.whenReady().then(() => {
  const iconPath = path.join(__dirname, 'icon.png');
  tray = new Tray(iconPath);
  tray.setToolTip('My First Electron Tray App');
});

Tray Icon in Action

Try running this example. Remember to place an icon.png file in the same directory as your main.js. After launching, look for your app's icon in the system tray (Windows/Linux) or menu bar (macOS).

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

let tray = null;

app.whenReady().then(() => {
  // IMPORTANT: For this code to run, place an 'icon.png' file
  // in the same directory as your main.js file.
  const iconPath = path.join(__dirname, 'icon.png');
  tray = new Tray(iconPath);
  tray.setToolTip('My Simple Tray App');
  console.log('Tray icon created. Check your system tray/dock!');
});

app.on('window-all-closed', () => {
  // For a tray app, you might want it to stay running even if windows close.
  // This example quits if no windows are open and not on macOS.
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('before-quit', () => {
  if (tray) tray.destroy(); // Clean up tray icon before quitting
});

Interacting with the Tray Icon

A static tray icon isn't very useful! You can make it interactive by listening for events like clicks.

Common actions include showing/hiding the main window or opening a context menu.

You can use tray.on('click', () => { /* action */ }); to handle left-clicks.

Adding a Context Menu

Often, users expect a right-click on a tray icon to open a menu with options. Electron's Menu module is perfect for this.

You define a menu template and then attach it to the tray icon using tray.setContextMenu().

const { Menu } = require('electron');

const contextMenu = Menu.buildFromTemplate([
  { label: 'Option One', type: 'normal', click: () => console.log('Option One clicked!') },
  { label: 'Option Two', type: 'normal', click: () => console.log('Option Two clicked!') },
  { type: 'separator' }, // A visual separator
  { label: 'Quit', role: 'quit' } // Standard quit option
]);

tray.setContextMenu(contextMenu);

Tray Menu in Action

This example combines a tray icon with a context menu. Right-click the tray icon to see options to show, hide, or quit the app. Left-click will toggle the window visibility.

Remember to place an icon.png file in the same directory.

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

let mainWindow;
let tray;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    show: false, // Start hidden
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // A very simple HTML content for the window
  mainWindow.loadURL(`data:text/html;charset=utf-8,
    <h1>Hello from Electron!</h1>
    <p>This is a hidden window. Click the tray icon or use its menu.</p>
    <button onclick="window.close()">Close Window</button>
  `);
}

app.whenReady().then(() => {
  createWindow();

  const iconPath = path.join(__dirname, 'icon.png'); // Place 'icon.png' here
  tray = new Tray(iconPath);
  tray.setToolTip('Electron Tray App with Menu');

  const contextMenu = Menu.buildFromTemplate([
    { label: 'Show Window', click: () => mainWindow.show() },
    { label: 'Hide Window', click: () => mainWindow.hide() },
    { type: 'separator' },
    { label: 'Quit', click: () => app.quit() }
  ]);
  tray.setContextMenu(contextMenu);

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });

  // Ensure app doesn't quit when window is closed
  mainWindow.on('close', (event) => {
    if (!app.isQuitting) { // Only hide if not explicitly quitting
      event.preventDefault();
      mainWindow.hide();
    }
  });

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

app.on('window-all-closed', () => {
  // If not macOS, and no tray icon, then quit
  if (process.platform !== 'darwin' && !tray) {
    app.quit();
  }
});

app.on('before-quit', () => {
  app.isQuitting = true; // Set a flag
  if (tray) tray.destroy();
});

Dock Badges (macOS Only)

On macOS, applications can display a 'badge' on their dock icon. This is typically used to show a count of unread items or notifications.

Electron provides the app.setBadgeCount(count) method for this. Set count to 0 to clear the badge. This feature is specific to macOS.

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

// To set a badge:
if (process.platform === 'darwin') {
  app.setBadgeCount(5);
}

// To clear a badge:
if (process.platform === 'darwin') {
  app.setBadgeCount(0);
}

Dock Badge in Action

This example demonstrates setting and clearing a dock badge. Run this application on macOS and observe its dock icon. It will set a badge after 3 seconds, then clear it after 8 seconds.

This feature will not work on Windows or Linux.

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

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL(`data:text/html;charset=utf-8,
    <h1>Electron Dock Badge Demo</h1>
    <p>Check your macOS dock icon for a badge!</p>
    <p>The badge will appear shortly after launch.</p>
  `);
}

app.whenReady().then(() => {
  createWindow();

  if (process.platform === 'darwin') {
    // Set a badge count after a short delay
    setTimeout(() => {
      app.setBadgeCount(5);
      console.log('Dock badge set to 5. Look at your macOS dock icon!');
    }, 3000); // 3 seconds delay

    // Clear the badge after another delay
    setTimeout(() => {
      app.setBadgeCount(0);
      console.log('Dock badge cleared. Icon should be normal.');
    }, 8000); // 8 seconds total delay
  } else {
    console.log('Dock badges are a macOS-specific feature and will not appear on this OS.');
  }

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

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

Quick Check: Tray Icons

You've learned about creating tray icons and setting dock badges. Let's quickly review!

Recap: Tray & Badges

Great job! You've learned how to integrate your Electron app more deeply with the native OS:

  • The Tray module lets you add an icon to the system tray or macOS menu bar.
  • You can attach a Menu to your tray icon for right-click options.
  • On macOS, app.setBadgeCount() allows you to display notification badges on the dock icon.

These features enhance the user experience by providing quick access and status updates.

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
12
บทเรียน
47

คำถามที่พบบ่อย

บทเรียน “แอปพลิเคชันถาดระบบและป้ายแจ้งเตือน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แอปพลิเคชันถาดระบบและป้ายแจ้งเตือน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Electron Desktop App Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แอปพลิเคชันถาดระบบและป้ายแจ้งเตือน”

สร้างแอปพลิเคชันที่ทำงานอยู่ในถาดระบบหรือด็อก เพื่อให้เข้าถึงได้อย่างรวดเร็วและแสดงป้ายแจ้งเตือนที่ยังไม่ได้อ่าน คุณปฏิบัติ Electron Desktop App Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Electron Desktop App Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Electron Desktop App Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “แอปพลิเคชันถาดระบบและป้ายแจ้งเตือน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Electron Desktop App Development นี้ได้ไหม

ได้ บทเรียน Electron Desktop App Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การทำงานกับโมดูลเนทีฟ
  2. แอปพลิเคชันถาดระบบและป้ายแจ้งเตือน
  3. การจับภาพหน้าจอและสื่อ
  4. การตรวจสอบพลังงานและฮาร์ดแวร์
← กลับไปที่ Electron Desktop App Development