일렉트론 Main process 의 메소드

app

어플리케이션의 라이프사이클을 컨트롤하는 모듈

🎇 Event

• will-finish-launching
• 앱이 기본시작을 완료했을때 발생

• ready
• 일렉트론이 초기화를 완료했을때 한 번 발생

• window-all-closed
• 모든 창이 닫혔을 때 발생

• before-quit
• 앱 창을 닫기 전에 발생한다. 호출 시 event.preventDefault()로 종료동작을 방지한다.
• 프로그램 종료 시 모든 창의 이벤트를 멈추고 닫은 후에 창이 닫힌다.
• 사용자 로그아웃이나 시스템 재시작으로 인한 close 일 경우 before-quit은 발생하지 않는다.

• will-quit
• 모든 창이 닫히고 앱이 종료된다. 호출 시 event.preventDefault()로 종료동작을 방지한다
• 사용자 로그아웃이나 시스템 재시작으로 인한 close 일 경우 before-quit은 발생하지 않는다.

• quit
• 앱이 종료될 때 발생한다.
• 사용자 로그아웃이나 시스템 재시작으로 인한 close 일 경우 before-quit은 발생하지 않는다.

• open-file
• 사용자가 앱에서 파일을 오픈할 때 발생.
• 일반적으로 응용프로그램이 열려있는 상태 혹은 Dock 에서 재사용하려고 할 때 발생된다.

• open-url
• 사용자가 앱에서 URL 열때 발생.

• activate
• 앱이 활성화 될 때 발생

• new-window-for-tab
• 사용자가 기본 macOS 의 새 탭 버튼을 클릭하면 발생한다.
• 새 탭 버튼은 BrowserWindow의 tabbingIdentifier 으로 사용할 수 있다.

• browser-window-blur / focus
• BrowserWindow 가 흐려지고 / 포커스를 받으면 발생한다.

• certificate-error
• 인증확인이 실패했을때 발생.
• url 인증서를 신뢰하려면 event.preventDefault() 로 동작 방지를 하고 콜백을 호출해야한다.

// 모든 창이 닫혔을 때 앱이 종료한다는 의미이다.
const { app } = require('electron')
app.on('window-all-closed', () => {
  app.quit()
})

// 인증확인이 실패했을 경우 
app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
  if (url === 'https://github.com') {
    // Verification logic.
    event.preventDefault()
    callback(true) //인증서를 신뢰할 수 있는 것으로 간주할지 여부
  } else {
    callback(false)
  }
})

🎇 Method

• app.quit()
• 모든 창을 닫는 메소드. before-quit 이벤트가 먼저 호출되고 모든창이 성공적으로 닫히면 will-quit 이벤트가 발생되면서 앱이 종료된다.

• app.exit([exitCode])
• before-quit 이벤트와 will-quit 이벤트가 발생하지 않고 즉각 닫히는 메소드.
• exitCode 는 optional 한 정수로 default 값은 0이다.

• app.relaunch([options])
• options 는 {args:string,execPath:string} 객체로 이루어진 optional 한 값이다.
• 현재 인스턴스가 종료되면 앱을 재시작한다.

app.relaunch({ args: process.argv.slice(1).concat(['--relaunch']) })
app.exit(0)

• app.focus([options])
• options 는 steal:boolean 으로 이루어진 optional 한 값이다.
• 윈도우는 앱의 첫번째 창에 초점을 맞누게 되는데, 포커스메소드를 이용하면 해당 앱을 활성에 초점을 맞추고 활성화 한다.
• steal 옵션은 가능한 적게 사용해야 한다고 공식문서에 나와있다.

• app.hide()
• 모든 앱 창을 숨긴다.

• app.show()
• 어떠한 이벤트가 발생했을 때 앱 창을 표시하며 자동으로 초점을 맞추지 않는다.

autoUpdater

앱이 자동으로 업데이트 되도록 도와주는 모듈 맥과 윈도우만 지원이 된다.

BrowserWindow & BrowserView

브라우저의 창을 만들고 제어하는 모듈 BrowserWindow의 하위개념인 BrowserVIew

BrowserWindow

• ready-to-show
• 페이지를 로드하는 동안 렌더러 프로세스가 처음 페이지 렌더링 했을때 이벤트 발생
• show 메소드와 함께 사용할 경우 렌더러가 false 임에도 “보이는”것으로 간주된다.
• 해당 이벤트 후 창을 표시하게 되면 유저는 매끄러운 사용성을 경험할 수 있다.

• backgroundColor
• 복잡한 앱의 경우 ready-to-show 이벤트또한 늦게 발생하여 앱이 느리게느껴질 수 있다.
• 백그라운드 컬러를 사용할 경우 창을 즉시 표시할 수 있기 때문에 앱의 배경에 가까운색을 선정하는것이 좋다.

const { BrowserWindow } = require('electron')
// ready-to-show
const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})
//backgroundColor
const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')

• new BrowserWindow([options])
• options에는다음과 같은 optional 속성을 사용할 수 있다.
• width / height : 창의 너비/높이 픽셀 단위로 defualt는 800/600 이다.
• x / y : 각각 y/x가 사용되는 경우에 필수이며 창의 오프셋을 지정한다. 기본값은 창의 중앙이다.
• minWidth / minHeight / maxWidth / maxHeight : 창의 최소/최대 너비와 높이
• resizable : 창의 크기 조정여부. 기본값은 true 이다. 리눅스 구현불가
• movable : 창의 이동 가능여부. 기본값은 true 이다. 리눅스 구현불가
• alwaysOnTop : 항상 다른 창 위에 있어야 하는지 여부. 기본값은 false
• fullscreen : 전체화면 표시여부. 기본값은 false
• skipTaskbar : 작업표시줄에 창 표시 여부. 기본값은 false
• kiosk : 창이 키오스크 모드인지 아닌지 여부. 기본값은 false
• title : 기본 창 제목으로 기본값은 ‘Electron’ 이다. <title>에서 로드한 HTML 파일에 태그가 정의되어 있으면 loadURL() 속성은 무시된다.
• icon : 이미지 혹은 스트링 값의 창 아이콘
• frame: 프레임 없는 창 여부. 기본값은 true
• webPreferences : 웹페이지의 기능설정
• devTools : DevTools 활성화 여부 ex - BrowserWindow.webContents.openDevTools()
• nodeIntegration : 노드 통합이 활성화 되었는지 여부
• nodeIntegrationInWorker : 웹에서 노드 통합이 활성화 되었는지 여부 (멀티스레드)

//background.ts
const mainWindow = createWindow("main", {
    width: 1000,
    height: 600,
  });

//create_window.ts
const browserOptions: BrowserWindowConstructorOptions = {
    ...state,
    ...options,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      ...options.webPreferences,
    },
  };
  win = new BrowserWindow(browserOptions);

Dialog

파일 열기 및 저장, 경고를 위한 대화상자 표시

• dialog.showOpenDialog

• dialog.showOpenDialogSync

const { dialog } = require('electron')
console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))

IpcMain

메인 프로세스에서 렌더러 프로세스로 비동기식으로 통신하는 모듈

• ipcMain.on(channel , listener)
• channel 로 새 메시지가 도착하면 listener 로 호출된다.

• ipcMain.removeListener(channel , listener)
• 리스너 배열에서 지정된 리스너를 제거한다.

• ipcMain.handle(channel , listener)
• ipc 에 대한 핸들러 추가.

ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
  const result = await somePromise(...args)
  return result
})

//renderer
async () => {
  const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
  // ...
}

결론

참조