Typescript×Electron 「閉じる」を行った際に、終了するか、キャンセルするかを確認したい

Question

宜しくお願い致します。
electronの勉強をしています。分からないところがあり教えていただけないでしょうか。

以下の通り基本的なelectronの画面を作成、
終了する処理を入れたコードを作りました。

HTML側は現状Hello worldを表示するだけですが、
window右上の「×」による閉じるを行った際に、
必ず終了するか閉じるをキャンセルするかを入れたいと思っています。

該当箇所以下の通り作成したみたのですが、
app.on("before-quit", () => { ... }
画面を閉じた後にダイアログが表示されるのみで、
画面は閉じてしまい、目的を達することができませんでした。

こういった事をしたい場合は、どういったコードを追加するべきか教えていただけないでしょうか。
以下コード全体と環境を記載致します。
宜しくお願い致します。

【環境】
windows 10 64bit
"electron": "^5.0.1",
"typescript": "^3.4.5",

【コード】

import electron = require("electron");
import dialog = electron.dialog;
import app = electron.app;
import BrowserWindow = electron.BrowserWindow;

let mainWindow: BrowserWindow | null = null;

app.on("before-quit", () => {
 const option = {
  type: "info",
  buttons: ["キャンセル", "終了する"],
  defaultId: 0,
  title: "閉じるボタンを押しました",
  message: "ファイルは保存しましたか？していなければキャンセルを押して下さい。"
 }
 const num: number = dialog.showMessageBox(option);
 if (num === 1) {
  app.quit();
 }
});

app.on("ready", (() => {
 mainWindow = new BrowserWindow({
  width: 1000,
  height: 700,
  minWidth: 500,
  minHeight: 200,
  acceptFirstMouse: true,
 });
 mainWindow.loadURL("file://" + __dirname + "/index.html");
 mainWindow.on("closed", () => {
  mainWindow = null;
 });
}));

Comments

[sansaisoba]

> 【環境】
> windows 10 64bit
> typescript 6.4.1
> electron 6.4.1

typescriptとelectronのバージョンが正しくないと思います。（どっちも6.4.1というバージョンは出てないです…）

[you_19000]

申し訳ありません。
私がバージョンの確認方法を誤っていました。

誤 ... npm electron -v

上記の通りにうって出てきたバージョンを書いておりました。
実際のバージョンは以下になります。

"electron": "^5.0.1",
"typescript": "^3.4.5",

Answer 1

Electronの終了イベント周りはややこしいですよね。
私も毎回動作確認してしまいます（Electronのバージョンによって動作が変わることもあるので）

画面を閉じることも阻止しようとした場合は、
app.on("before-quit")ではそもそも満たせないでしょうか。

before-quitイベントで制御する方法ですと、あくまでapp自体の終了を阻止するだけで、windowのcloseイベントは阻止できていないのかもしれません。
（とはいえ、手元で動作確認したところ、closeより先にbefore-quitが動いているので、確かにbefore-quitでうまくいきそうな気はするのですが…WindowsとMacやElectronのバージョンで異なる可能性もあります）

なお、ご提示されたコードは、before-quitの中でapp.quit()を呼び出していますが、
そもそも、before-quitはapp.quit()などの終了動作が行われた際に呼び出されるイベントなので、終了イベント内で更に終了イベントを実行しようとしている形になり、問題ないかもしれませんがコード的には正しくありません。
before-quit内でpreventDefault()を呼び出さなければ、app.quit()を呼び出さなくてもそのまま終了するはずです。

私の環境では、closeイベントで制御する形の以下のコードで想定するような動作になりました。

OS: MacOS 10.14.4
typescript: 3.4.5
electron: 5.0.1

import {app, dialog, BrowserWindow, Event} from "electron";

let mainWindow: BrowserWindow;

const option = {
  type: "info",
  buttons: ["キャンセル", "終了する"],
  defaultId: 0,
  title: "閉じるボタンを押しました",
  message: "ファイルは保存しましたか？していなければキャンセルを押して下さい。"
};

app.on("ready", (() => {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    minWidth: 500,
    minHeight: 200,
    acceptFirstMouse: true,
  });

  mainWindow.loadURL("file://" + __dirname + "/index.html");
  mainWindow.on("close", (e: Event) => {
    const num: number = dialog.showMessageBox(option);
    if (num === 0) {
      e.preventDefault();
    }
  });
}));

余談ですが、ElectronはWindowsとMacで動作が異なり、WindowsはBrowserWindowが全て閉じられるとappは自動的に終了しますが、Macは自動的に終了しないのでwindow-all-closedイベントで明示的にapp.quit()する必要があります。
Electronの最新版＋Windowsでの動作は未確認なのですが、もしBrowserWindowを全て閉じても終了しないような場合は、window-all-closedイベントでの制御を追加しても良いかもしれません。

Comments

[you_19000]

ご回答大変ありがとうございます。
記載頂いた通りに実行すると問題なく想定の挙動ができました。

Answer 2

before-quitイベント内部で終了を阻止したい場合、e.preventDefault()を行う必要があります。何もせずにイベントハンドラを通過すると、そのまま終了します（参照）。

app.on("before-quit", (e) => {
  /* 中略 */
 if (num === 1) {
  app.quit();
 } else {
   e.preventDefault();
 }
});

Comments

[you_19000]

ご回答大変ありがとうございます。
以下の通りコードを修正してみたところ、アプリが終了しないことを確認しました。
しかし画面は非表示になってしまいます。
※プロセスだけ生きている。

画面を閉じることも阻止しようとした場合は、
app.on("before-quit")ではそもそも満たせないでしょうか。

app.on("before-quit", (e) => {
console.log("Log: success before");

const option = {
type: "info",
buttons: ["キャンセル", "終了する"],
defaultId: 0,
title: "閉じるボタンを押しました",
message: "ファイルは保存しましたか？していなければキャンセルを押して下さい。"
}

const num: number = dialog.showMessageBox(option);
console.log("befor command:" + num);

if (num === 1) {
app.quit();
} else {
e.preventDefault();
}
});