[Sendbird를 활용한 웹 채팅] 14. Electron tray(트레이)

1. Electron에서 창을 닫았을 때 트레이로 숨기기

public/electron.js

function createWindow() {
  ...
  initTrayIconMenu(win);

  win.on("close", (e) => {
    if (win.isVisible()) {
      win.hide();
      e.preventDefault();
    }
  });

  ...
}

let tray;
function initTrayIconMenu(win) {
    //임시 아이콘
  const iconPath = path.join(__dirname, "/../build/logo192.png");
  tray = new Tray(nativeImage.createFromPath(iconPath));

  //트레이 아이콘 오른쪽 버튼 클릭 시 보여줄 메뉴 설정
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "열기",
      type: "normal",
      click() {
        win.show();
      },
    },
    {
      label: "닫기",
      type: "normal",
      role: "quit",
    },
  ]);

  tray.setToolTip("채팅");
  tray.setContextMenu(contextMenu);
  tray.on("click", () => (win.isVisible() ? win.hide() : win.show()));
}

 

결과

닫기버튼을 눌러 모든 창을 닫아도 앱이 종료되는 것이 아니라 트레이에 숨는다. 이런 상태에서 알림이 오면 창은 닫혀있지만 정상적으로 알림을 받을 수 있다!

 

Reference

• https://bug41.tistory.com/86
• https://web-front-end.tistory.com/100