Electron Desktop App Development · 강의

트레이 애플리케이션 및 배지

시스템 트레이나 독에서 실행되며 빠른 액세스를 제공하고 읽지 않은 알림의 배지를 표시하는 애플리케이션을 만듭니다.

레슨 2/411개 단계

트레이 애플리케이션 및 배지은(는) CoddyKit의 무료 Electron Desktop App Development 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 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.

무료로 시작

AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
12
레슨
47

자주 묻는 질문

“트레이 애플리케이션 및 배지” 강의는 무료인가요?

네 — “트레이 애플리케이션 및 배지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Electron Desktop App Development 강의 전체를 잠금 해제할 수 있습니다. Electron Desktop App Development 강의에는 총 4개의 강의가 포함되어 있습니다.

“트레이 애플리케이션 및 배지”에서 뭘 배우나요?

시스템 트레이나 독에서 실행되며 빠른 액세스를 제공하고 읽지 않은 알림의 배지를 표시하는 애플리케이션을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Electron Desktop App Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Electron Desktop App Development을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Electron Desktop App Development은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“트레이 애플리케이션 및 배지” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Electron Desktop App Development 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Electron Desktop App Development 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 네이티브 모듈 사용
  2. 트레이 애플리케이션 및 배지
  3. 화면 캡처 및 미디어
  4. 전원과 하드웨어 모니터링
← Electron Desktop App Development(으)로 돌아가기