Electron アプリで起動時に真っ白なウィンドウが一瞬出てしまうのを避ける

let win = new BrowserWindow({
  width: 600,
  height: 800,
});
win.loadURL(path_to_html_file);

このようにすると，アプリのサイズが大きい場合に HTML の読み込みが終わるまでウィンドウが真っ白になってしまいます．画面が真っ白になってしまうと見栄えも悪いですし，目にも良くなさそうです．Electron ではこれを抑制する方法があるのですが，ちょっとぐぐった感じあまり知られていなかったようなのでメモしておきます．

これを抑制するために ready-to-show というイベントが BrowserWindow にあります．

これは HTML の描画が終わり，画面が真っ白でなくなったタイミングで起こるイベントで， dom-ready よりも後に発火します．下記のように使います．

let win = new BrowserWindow({
  width: 600,
  height: 800,
  show: false,
});
win.once('ready-to-show', () => { win.show(); });
win.loadURL(path_to_html_file);

注意点として，もちろんアプリ起動までの時間が速くなったりするわけではないです．

起動直後の真っ白いウィンドウが気になってしまった場合はお試しください．

注意

ready-to-show はなるべく BrowserWindow のインスタンスを生成してからすぐにコールバックをセットしてください．当然ですが，コールバックをセットする前に ready-to-show のタイミングが過ぎてしまうと発火しません．