electron-updater を追加し、自動更新を行えるように

package.json

@@ -35,6 +35,7 @@
     "dotenv": "16.0.0",
     "electron-log": "4.4.1",
     "electron-store": "8.0.0",
+    "electron-updater": "4.6.1",
     "electron-window-state": "5.0.3",
     "encoding-japanese": "1.0.30",
     "immer": "9.0.2",

src/background.ts

@@ -39,6 +39,7 @@ import {
   SplitterPosition,
 } from "./type/preload";
 
+import { autoUpdater } from "electron-updater";
 import log from "electron-log";
 import dayjs from "dayjs";
 import windowStateKeeper from "electron-window-state";
@@ -62,6 +63,9 @@ if (isDevelopment) {
   );
 }
 
+autoUpdater.logger = log;
+autoUpdater.autoDownload = false;
+
 let win: BrowserWindow;
 
 // 多重起動防止
@@ -219,6 +223,7 @@ const store = new Store<{
   experimentalSetting: ExperimentalSetting;
   acceptRetrieveTelemetry: AcceptRetrieveTelemetryStatus;
   acceptTerms: AcceptTermsStatus;
+  isAutoUpdateCheck: boolean;
   splitTextWhenPaste: SplitTextWhenPasteType;
   splitterPosition: SplitterPosition;
 }>({
@@ -348,6 +353,10 @@ const store = new Store<{
       type: "string",
       default: "Default",
     },
+    isAutoUpdateCheck: {
+      type: "boolean",
+      default: false,
+    },
     experimentalSetting: {
       type: "object",
       properties: {
@@ -1056,6 +1065,22 @@ ipcMainHandle("ACTIVE_POINT_SCROLL_MODE", (_, { newValue }) => {
   return store.get("activePointScrollMode", "OFF");
 });
 
+ipcMainHandle("IS_AUTO_UPDATE_CHECK", (_, { newValue }) => {
+  if (newValue !== undefined) {
+    store.set("isAutoUpdateCheck", newValue);
+  }
+
+  return store.get("isAutoUpdateCheck", false);
+});
+
+ipcMainHandle("UPDATE_CHECK", async () => {
+  try {
+    await autoUpdater.checkForUpdatesAndNotify();
+  } catch (err: unknown) {
+    return;
+  }
+});
+
 ipcMainHandle("IS_AVAILABLE_GPU_MODE", () => {
   return hasSupportedGpu();
 });
@@ -1310,6 +1335,10 @@ app.on("ready", async () => {
   }
 
   createWindow().then(() => runEngineAll());
+  const isAutoUpdateCheck = store.get("isAutoUpdateCheck");
+  if (isAutoUpdateCheck) {
+    await autoUpdater.checkForUpdatesAndNotify();
+  }
 });
 
 app.on("second-instance", () => {
@@ -1333,3 +1362,36 @@ if (isDevelopment) {
     });
   }
 }
+
+//-------------------------------------------
+// 自動アップデート関連のイベント処理
+//-------------------------------------------
+// アップデートをチェック開始
+autoUpdater.on("checking-for-update", () => {
+  log.info(process.pid, "checking-for-update...");
+});
+// アップデートが見つかった
+autoUpdater.on("update-available", () => {
+  log.info(process.pid, "Update available.");
+  const dialogOpts = {
+    type: "info",
+    buttons: ["はい", "いいえ"],
+    message: "アップデート",
+    detail: "新しいバージョンをがありました。公式サイトを開きますか？",
+  };
+  // ダイアログを表示しすぐに再起動するか確認
+  dialog.showMessageBox(win, dialogOpts).then((returnValue) => {
+    if (returnValue.response === 0) {
+      shell.openExternal("https://voicevox.hiroshiba.jp/");
+      log.info(process.pid, "Open Official Site.");
+    }
+  });
+});
+// アップデートがなかった（最新版だった）
+autoUpdater.on("update-not-available", () => {
+  log.info(process.pid, "Update not available.");
+});
+// エラーが発生
+autoUpdater.on("error", (err) => {
+  log.error(process.pid, err);
+});

src/components/MenuBar.vue

@@ -361,6 +361,16 @@ export default defineComponent({
               });
             },
           },
+          { type: "separator" },
+          {
+            type: "button",
+            label: "アップデート確認",
+            onClick() {
+              store.dispatch("IS_UPDATE_CHECK_DIALOG_OPEN", {
+                isUpdateCheckDialogOpen: true,
+              });
+            },
+          },
         ],
       },
       {

src/components/SettingDialog.vue

@@ -573,6 +573,24 @@
                 >
                 </q-select>
               </q-card-actions>
+              <q-card-actions class="q-px-md q-py-none bg-grey-3">
+                <div>自動アップデートチェック</div>
+                <q-space />
+                <q-toggle
+                  :model-value="isAutoUpdateCheck"
+                  @update:model-value="changeIsAutoUpdateCheck($event)"
+                >
+                  <q-tooltip
+                    :delay="500"
+                    anchor="center left"
+                    self="center right"
+                    transition-show="jump-left"
+                    transition-hide="jump-right"
+                  >
+                    起動時にアップデートチェックを行います
+                  </q-tooltip>
+                </q-toggle>
+              </q-card-actions>
             </q-card>
             <q-card flat class="setting-card">
               <q-card-actions>
@@ -779,6 +797,8 @@ export default defineComponent({
 
     const experimentalSetting = computed(() => store.state.experimentalSetting);
 
+    const isAutoUpdateCheck = computed(() => store.state.isAutoUpdateCheck);
+
     const currentThemeNameComputed = computed({
       get: () => store.state.themeSetting.currentTheme,
       set: (currentTheme: string) => {
@@ -890,6 +910,11 @@ export default defineComponent({
       });
     };
 
+    const changeIsAutoUpdateCheck = async (isAutoUpdateCheck: boolean) => {
+      if (store.state.isAutoUpdateCheck === isAutoUpdateCheck) return;
+      store.dispatch("SET_IS_AUTO_UPDATE_CHECK", { isAutoUpdateCheck });
+    };
+
     const restartEngineProcess = () => {
       store.dispatch("RESTART_ENGINE", {
         engineKey: store.state.engineInfos[0].key,
@@ -966,6 +991,8 @@ export default defineComponent({
       availableAudioOutputDevices,
       changeinheritAudioInfo,
       changeExperimentalSetting,
+      isAutoUpdateCheck,
+      changeIsAutoUpdateCheck,
       restartEngineProcess,
       savingSetting,
       handleSavingSettingChange,

src/electron/preload.ts

@@ -166,6 +166,14 @@ const api: Sandbox = {
     return ipcRendererInvoke("ACTIVE_POINT_SCROLL_MODE", { newValue });
   },
 
+  isAutoUpdateCheck: (newValue) => {
+    return ipcRendererInvoke("IS_AUTO_UPDATE_CHECK", { newValue });
+  },
+
+  updateCheck: () => {
+    return ipcRendererInvoke("UPDATE_CHECK");
+  },
+
   isAvailableGPUMode: () => {
     return ipcRendererInvoke("IS_AVAILABLE_GPU_MODE");
   },

src/store/type.ts

@@ -891,6 +891,7 @@ export type UiStoreState = {
   isHelpDialogOpen: boolean;
   isSettingDialogOpen: boolean;
   isCharacterOrderDialogOpen: boolean;
+  isUpdateCheckDialogOpen: boolean;
   isDefaultStyleSelectDialogOpen: boolean;
   isHotkeySettingDialogOpen: boolean;
   isToolbarSettingDialogOpen: boolean;
@@ -899,6 +900,7 @@ export type UiStoreState = {
   isDictionaryManageDialogOpen: boolean;
   isMaximized: boolean;
   isPinned: boolean;
+  isAutoUpdateCheck: boolean;
   isFullscreen: boolean;
 };
 
@@ -949,6 +951,11 @@ type UiStoreTypes = {
     action(payload: { isSettingDialogOpen: boolean }): void;
   };
 
+  IS_UPDATE_CHECK_DIALOG_OPEN: {
+    mutation: { isUpdateCheckDialogOpen: boolean };
+    action(payload: { isUpdateCheckDialogOpen: boolean }): void;
+  };
+
   IS_HOTKEY_SETTING_DIALOG_OPEN: {
     mutation: { isHotkeySettingDialogOpen: boolean };
     action(payload: { isHotkeySettingDialogOpen: boolean }): void;
@@ -1021,6 +1028,11 @@ type UiStoreTypes = {
     action(payload: { activePointScrollMode: ActivePointScrollMode }): void;
   };
 
+  SET_IS_AUTO_UPDATE_CHECK: {
+    mutation: { isAutoUpdateCheck: boolean };
+    action(payload: { isAutoUpdateCheck: boolean }): void;
+  };
+
   DETECT_UNMAXIMIZED: {
     mutation: undefined;
     action(): void;