Kakao FE Team Shares Electron Desktop App Development Experience and Key Issues

Thomas and Judy from the Kakao FE Platform Team shared their experience and technical issues while developing a desktop application using Electron v11.2.2. They addressed major problems and solutions encountered while building a cross-platform desktop app by leveraging frontend development knowledge.

Authentication and Screen Composition Issues

Since desktop apps run in a local environment, the REDIRECT_URL required for social login does not exist. To resolve this, they utilized the will-navigate event detected by the webContents of BrowserWindow, capturing the moment of navigation to a specific URL after authentication completion to handle the auth process.

Additionally, when using multiple BrowserView instances within a single window, state sharing between views must go through the main process. As the number of views increases, the number of renderer processes also increases, which can lead to rendering failures on low-spec devices. To address this, they applied strategies such as removing unnecessary views and lazy generation, and handled failures by detecting the render-process-gone event to redraw the screen.

Implementing Updates and Notifications

Using electron-updater, automatic updates can be implemented via GitHub Releases, S3, or a proprietary server. checkForUpdates performs silent updates, while checkForUpdatesAndNotify displays a notification to the user for confirmation.

Desktop notifications face significant OS-specific constraints. The HTML5 Notification API has limited button customization due to serviceWorker issues, and the Notification API in the main process only supports custom buttons on macOS. node-notifier also presents UI consistency issues, so creating a separate window for notifications proved to be the most stable approach.

Window Control and Printer Integration

To move a frameless window, one can use CSS -webkit-app-region: drag or calculate mouse events to update the position via setWindowBounds. The latter is more flexible as it supports both clicks and drags.

For printer integration, serialport must be built with electron-rebuild to correctly retrieve information about connected desktop devices. Since output may fail due to incorrect connection speed settings, it is important to allow users to select an appropriate speed or provide guidance.