Electronでメインプロセスと通信し、アプリケーションのUI自体をリロードする【Electron React Boilerplate】

本記事は、以下ボイラープレートを使用しています。
https://github.com/electron-react-boilerplate/electron-react-boilerplate
また、Electronのレンダラープロセスとメインプロセスの通信方法の具体例でもあります。

以下の処理をメインプロセスに記述します。
この処理をレンダラープロセス（UI側）から呼び出すことで、アプリケーションのUI自体のリロードを実現します。

src/main/main.ts

ipcMain.on('reload', (event) => {
  mainWindow?.reload(); // リロードを行う処理のそのもの
});

次に、上記処理をUI側から呼び出せるようにします。

src/main/preload.ts

import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';

// 'reload'ををChannlesのtypeに追加
- export type Channels = 'ipc-example'; 
+ export type Channels = 'ipc-example' | 'reload'; 

contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: {
    sendMessage(channel: Channels, args: unknown[]) {
      ipcRenderer.send(channel, args);
    },
    on(channel: Channels, func: (...args: unknown[]) => void) {
      const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>
        func(...args);
      ipcRenderer.on(channel, subscription);

      return () => {
        ipcRenderer.removeListener(channel, subscription);
      };
    },
    once(channel: Channels, func: (...args: unknown[]) => void) {
      ipcRenderer.once(channel, (_event, ...args) => func(...args));
    },
  },
});

最後に、レンダラープロセスから実際に呼び出します。

src/App.tsx

import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';

const reload = () => {
  // 実際にメインプロセスを通信して、登録したリロード処理を呼び出している
  window.electron.ipcRenderer.sendMessage('reload', []);
};

const Hello = () => {
  return (
    <div>
      <button onClick={reload}>Reload</button>
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

Reloadボタンをクリックすると、アプリケーションのUI自体がリロードできます。

リロードできました😄