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

package.json

@@ -34,6 +34,7 @@
     "dayjs": "1.10.7",
     "electron-log": "4.4.1",
     "electron-store": "8.0.0",
+    "electron-updater": "4.6.1",
     "encoding-japanese": "1.0.30",
     "immer": "9.0.2",
     "lodash.debounce": "4.0.8",

src/background.ts

@@ -36,6 +36,7 @@ import {
   ActivePointScrollMode,
 } from "./type/preload";
 
+import { autoUpdater } from "electron-updater";
 import log from "electron-log";
 import dayjs from "dayjs";
 
@@ -58,6 +59,9 @@ if (isDevelopment) {
   );
 }
 
+autoUpdater.logger = log;
+autoUpdater.autoDownload = false;
+
 let win: BrowserWindow;
 
 // 多重起動防止
@@ -184,6 +188,7 @@ const store = new Store<{
   experimentalSetting: ExperimentalSetting;
   acceptRetrieveTelemetry: AcceptRetrieveTelemetryStatus;
   acceptTerms: AcceptTermsStatus;
+  isAutoUpdateCheck: boolean;
 }>({
   schema: {
     useGpu: {
@@ -298,6 +303,10 @@ const store = new Store<{
       type: "string",
       default: "Default",
     },
+    isAutoUpdateCheck: {
+      type: "boolean",
+      default: false,
+    },
     experimentalSetting: {
       type: "object",
       properties: {
@@ -783,6 +792,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();
 });
@@ -1005,6 +1030,10 @@ app.on("ready", async () => {
   }
 
   createWindow().then(() => runEngine());
+  const isAutoUpdateCheck = store.get("isAutoUpdateCheck");
+  if (isAutoUpdateCheck) {
+    await autoUpdater.checkForUpdatesAndNotify();
+  }
 });
 
 app.on("second-instance", () => {
@@ -1028,3 +1057,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

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

src/components/SettingDialog.vue

@@ -341,6 +341,24 @@
                   </q-tooltip>
                 </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>
@@ -534,6 +552,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) => {
@@ -689,6 +709,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");
     };
@@ -749,6 +774,8 @@ export default defineComponent({
       availableAudioOutputDevices,
       changeinheritAudioInfo,
       changeExperimentalSetting,
+      isAutoUpdateCheck,
+      changeIsAutoUpdateCheck,
       restartEngineProcess,
       savingSetting,
       handleSavingSettingChange,

src/electron/preload.ts

@@ -156,6 +156,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");
   },