Skip to main content

알림 시스템

각 운영체제는 사용자에게 알림을 표시하는 고유한 방식을 갖추고 있다. Electron의 알림 API는 크로스플랫폼을 지원하지만, 프로세스 타입에 따라 동작이 다르다.

메인 프로세스에서 렌더러 프로세스의 API를 사용하거나 그 반대의 경우를 원한다면, 프로세스 간 통신을 활용하는 것을 고려해보자.

사용 방법​

아래 예제에서는 각 프로세스 타입에 대한 알림을 표시하는 방법을 보여준다.

메인 프로세스에서 알림 표시하기​

메인 프로세스에서 알림은 Electron의 Notification 모듈을 사용해 표시한다. 이 모듈로 생성한 Notification 객체는 show() 인스턴스 메서드를 호출하기 전까지 화면에 나타나지 않는다.

메인 프로세스
const { Notification } = require('electron')

const NOTIFICATION_TITLE = '기본 알림'
const NOTIFICATION_BODY = '메인 프로세스에서 보내는 알림'

new Notification({
  title: NOTIFICATION_TITLE,
  body: NOTIFICATION_BODY
}).show()

다음은 Electron Fiddle로 열어볼 수 있는 전체 예제이다:

docs/fiddles/features/notifications/main (34.1.1)Open in Fiddle
const { app, BrowserWindow, Notification } = require('electron/main')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

const NOTIFICATION_TITLE = 'Basic Notification'
const NOTIFICATION_BODY = 'Notification from the Main process'

function showNotification () {
  new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
}

app.whenReady().then(createWindow).then(showNotification)

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

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

렌더러 프로세스에서 알림 표시하기​

렌더러 프로세스에서 직접 알림을 표시하려면 웹 Notifications API를 사용할 수 있다.

Renderer Process
const NOTIFICATION_TITLE = 'Title'
const NOTIFICATION_BODY =
  '렌더러 프로세스에서 보낸 알림입니다. 클릭하면 콘솔에 로그가 출력됩니다.'
const CLICK_MESSAGE = '알림이 클릭되었습니다.'

new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }).onclick =
  () => console.log(CLICK_MESSAGE)

Electron Fiddle에서 열어볼 수 있는 전체 예제는 다음과 같다:

docs/fiddles/features/notifications/renderer (34.1.1)Open in Fiddle
const NOTIFICATION_TITLE = 'Title'
const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
const CLICK_MESSAGE = 'Notification clicked!'

new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
  .onclick = () => { document.getElementById('output').innerText = CLICK_MESSAGE }

플랫폼 고려사항​

코드와 사용자 경험은 운영체제 간에 유사하지만 미묘한 차이가 존재한다.

윈도우 환경에서의 알림 설정​

윈도우에서 알림을 사용하려면 Electron 앱이 AppUserModelID와 ToastActivatorCLSID가 설정된 시작 메뉴 바로가기가 필요하다.

Electron은 AppUserModelID와 ToastActivatorCLSID 설정을 자동화하려고 시도한다. Squirrel.Windows와 함께 Electron을 사용하는 경우(예: electron-winstaller 사용 시), 바로가기가 자동으로 올바르게 설정된다.

프로덕션 환경에서 Electron은 Squirrel이 사용되었음을 감지하고, app.setAppUserModelId()를 올바른 값으로 자동 호출한다. 개발 중에는 app.setAppUserModelId()를 직접 호출해야 할 수도 있다.

개발 중 알림 설정

개발 중 빠르게 알림을 설정하려면, node_modules\electron\dist\electron.exe를 시작 메뉴에 추가하면 된다. 파일 탐색기에서 해당 파일을 찾아 우클릭한 후 '시작 메뉴에 고정'을 선택한다. 그런 다음 메인 프로세스에서 app.setAppUserModelId(process.execPath)를 호출하면 알림을 확인할 수 있다.

고급 알림 활용하기​

윈도우는 커스텀 템플릿, 이미지, 그리고 다양한 유연한 엘리먼트를 포함한 고급 알림 기능을 제공한다.

메인 프로세스에서 이러한 알림을 보내려면, 사용자 영역 모듈인 electron-windows-notifications를 사용할 수 있다. 이 모듈은 네이티브 Node 애드온을 활용해 ToastNotification과 TileNotification 객체를 전송한다.

버튼이 포함된 알림은 electron-windows-notifications로 처리할 수 있지만, 사용자 응답을 처리하려면 electron-windows-interactive-notifications를 사용해야 한다. 이 모듈은 필요한 COM 컴포넌트를 등록하고, 사용자가 입력한 데이터와 함께 Electron 앱을 호출하는 데 도움을 준다.

알림 상태 확인하기​

사용자에게 알림을 보낼 수 있는지 여부를 확인하려면, windows-notification-state 모듈을 사용한다.

이 모듈을 통해 윈도우가 알림을 무시하고 버릴지 여부를 미리 판단할 수 있다.

macOS​

macOS에서 알림은 직관적이지만, Apple의 알림 관련 Human Interface 가이드라인을 숙지하는 것이 좋다.

알림은 256바이트로 크기가 제한되며, 이를 초과하면 잘릴 수 있다는 점을 유의해야 한다.

알림 상태 확인하기​

알림을 보낼 수 있는지 여부를 확인하려면 사용자 모듈인 macos-notification-state를 사용한다.

이 모듈을 사용하면 알림이 표시될지 여부를 미리 확인할 수 있다.

Linux​

리눅스에서는 libnotify를 사용해 알림을 보낸다. 이 라이브러리는 데스크톱 알림 스펙을 따르는 모든 데스크톱 환경에서 알림을 표시할 수 있다. Cinnamon, Enlightenment, Unity, GNOME, KDE 등이 여기에 포함된다.