Electron のプロセスと IPC 入門

リリースされて 10 年くらい経ってだいぶ枯れてそうなので入門する気になった。

プロセスモデル

Electron アプリケーションは 3 種類プロセスを立てて実行される。(プリロードスクリプトは Chromium のプロセスの一部かも)

• メインプロセス
  • nodejs のプロセスなので OS の機能にひととおりアクセスできる
• レンダラープロセス
  • chromium のプロセスなので、OS の機能にはアクセスできない
  • html/css/js で UI を表示するのはこのプロセス
• プリロードスクリプト
  • レンダラープロセスとメインプロセスの橋渡しをするためのプロセス
  • nodejs の機能の一部分だけ使えるようになっている
  • Chrome 拡張の content_scripts あたりに雰囲気が近い

「基本的にはクラサバで、Chromium を表で動かして、その裏で Nodejs を動かすんだよね」と思ってたが、セキュリティのためのアレでもう 1 つ緩衝材になるプロセス(プリロードスクリプト)があるんですって。

IPC

プロセス間通信(Inter-Process Communication)で情報やイベントをやりとりする。

やりとりの実装は最小構成だとこんな感じ。

mainProcess.ts

import { ipcMain } from "electron";
ipcMain.on("drop-file", (event, fileinfo) => {
  console.log(JSON.stringify(fileinfo));
});

preload.ts

import { contextBridge, ipcRenderer } from "electron";
contextBridge.exposeInMainWorld("electron", {
  dropFile: (filename: string) => ipcRenderer.send("drop-file", filename),
});

renderer.ts

IPC だが、文字列でなくとも(js のオブジェクトでも) send することができた。

window.electron.dropFile({ filename });

参考

• プロセスモデル | Electron
• プロセス間通信 | Electron