대화 상자 및 알림

Bridging Web and Desktop

Electron's `dialog` Module

Selecting Files with `showOpenDialog`

Code Demo: Open File Dialog

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true
    }
  });

  mainWindow.loadURL('about:blank'); // Load a blank page

  mainWindow.webContents.on('did-finish-load', async () => {
    const result = await dialog.showOpenDialog(mainWindow, {
      title: 'Select a File',
      properties: ['openFile'],
      filters: [
        { name: 'Text Files', extensions: ['txt'] },
        { name: 'All Files', extensions: ['*'] }
      ]
    });
    if (!result.canceled) {
      console.log('Selected file:', result.filePaths[0]);
    } else {
      console.log('File selection canceled.');
    }
  });
}

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

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

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

Saving User Data with `showSaveDialog`

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

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', async () => {
    const result = await dialog.showSaveDialog(mainWindow, {
      title: 'Save Your File',
      defaultPath: app.getPath('documents') + '/my_document.txt',
      filters: [
        { name: 'Text Files', extensions: ['txt'] },
        { name: 'All Files', extensions: ['*'] }
      ]
    });
    if (!result.canceled) {
      console.log('File will be saved to:', result.filePath);
      // In a real app, you'd write content to result.filePath here
    } else {
      console.log('Save operation canceled.');
    }
  });
}

app.whenReady().then(createWindow);

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

Alerting Users with `showMessageBox`

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

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', async () => {
    const result = await dialog.showMessageBox(mainWindow, {
      type: 'question',
      title: 'Exit Application',
      message: 'Do you want to save your changes?',
      detail: 'Unsaved changes will be lost if you proceed without saving.',
      buttons: ['Save', 'Discard', 'Cancel'],
      defaultId: 0,
      cancelId: 2
    });

    if (result.response === 0) {
      console.log('User chose to Save.');
    } else if (result.response === 1) {
      console.log('User chose to Discard.');
    } else {
      console.log('User chose to Cancel.');
    }
  });
}

app.whenReady().then(createWindow);

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

System Notifications with `Notification`

Sending a Simple Notification

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

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', () => {
    if (Notification.isSupported()) {
      new Notification({
        title: 'Electron App Update',
        body: 'A new version is available! Click to install.',
        // icon: path.join(__dirname, 'icon.png') // Optional
      }).show();
      console.log('Notification sent!');
    } else {
      console.log('Notifications are not supported on this system.');
    }
  });
}

app.whenReady().then(createWindow);

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

Interactive Notifications

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

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', () => {
    if (Notification.isSupported()) {
      const myNotification = new Notification({
        title: 'New Message!',
        body: 'You have 3 unread messages.',
        silent: false // Play a sound
      });

      myNotification.on('click', () => {
        console.log('Notification clicked! Opening messages...');
        mainWindow.show(); // Bring the window to front
      });

      myNotification.show();
      console.log('Interactive notification sent.');
    } else {
      console.log('Notifications not supported.');
    }
  });
}

app.whenReady().then(createWindow);

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

Dialogs vs. Notifications: When to Use Which?

Quick Check: Dialogs or Notifications?

Recap & Next Steps