maybe

dev-app-update.yml

@@ -0,0 +1,3 @@
+owner: bluerobotics
+repo: cockpit
+provider: github

electron/main.ts

@@ -1,4 +1,5 @@
-import { app, BrowserWindow, protocol, screen } from 'electron'
+import { app, BrowserWindow, ipcMain, protocol, screen } from 'electron'
+import electronUpdater, { type AppUpdater } from 'electron-updater'
 import { join } from 'path'
 
 export const ROOT_PATH = {
@@ -15,9 +16,9 @@ function createWindow(): void {
   mainWindow = new BrowserWindow({
     icon: join(ROOT_PATH.dist, 'pwa-512x512.png'),
     webPreferences: {
-      webSecurity: false,
-      contextIsolation: false,
-      nodeIntegration: true,
+      preload: join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
       allowRunningInsecureContent: true,
     },
     width,
@@ -62,6 +63,62 @@ protocol.registerSchemesAsPrivileged([
 
 app.whenReady().then(createWindow)
 
+/**
+ * Get auto updater instance
+ * @returns {AppUpdater}
+ * @see https://www.electron.build/auto-update
+ */
+function getAutoUpdater(): AppUpdater {
+  // Using destructuring to access autoUpdater due to the CommonJS module of 'electron-updater'.
+  // It is a workaround for ESM compatibility issues, see https://github.com/electron-userland/electron-builder/issues/7976.
+  const { autoUpdater } = electronUpdater
+  autoUpdater.logger = require('electron-log')
+  // @ts-ignore
+  autoUpdater.logger.transports.file.level = 'info'
+  return autoUpdater
+}
+
+app.whenReady().then(() => {
+  console.log('Electron app is ready.')
+  console.log(`Cockpit version: ${app.getVersion()}`)
+
+  const autoUpdater = getAutoUpdater()
+  autoUpdater.forceDevUpdateConfig = true // TODO: Remove this before merging
+
+  autoUpdater.autoDownload = false // Prevent automatic downloads
+
+  autoUpdater.on('update-available', (info) => {
+    mainWindow?.webContents.send('update-available', info)
+  })
+
+  autoUpdater.on('update-downloaded', (info) => {
+    mainWindow?.webContents.send('update-downloaded', info)
+  })
+
+  // Add handlers for update control
+  ipcMain.on('download-update', () => {
+    autoUpdater.downloadUpdate()
+  })
+
+  ipcMain.on('install-update', () => {
+    autoUpdater.quitAndInstall()
+  })
+
+  ipcMain.on('cancel-update', () => {
+    // Cancel any ongoing download
+    autoUpdater.removeAllListeners('update-downloaded')
+    autoUpdater.removeAllListeners('download-progress')
+  })
+
+  // Check for software updates
+  console.log('Will start update checking routine...')
+
+  autoUpdater
+    .checkForUpdates()
+    .then((e) => console.log(e))
+    .catch((e) => console.log(e))
+})
+
 app.on('before-quit', () => {
   // @ts-ignore: import.meta.env does not exist in the types
   if (import.meta.env.DEV) {

electron/preload.ts

@@ -0,0 +1,11 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  onUpdateAvailable: (callback: (info: any) => void) =>
+    ipcRenderer.on('update-available', (_event, info) => callback(info)),
+  onUpdateDownloaded: (callback: (info: any) => void) =>
+    ipcRenderer.on('update-downloaded', (_event, info) => callback(info)),
+  downloadUpdate: () => ipcRenderer.send('download-update'),
+  installUpdate: () => ipcRenderer.send('install-update'),
+  cancelUpdate: () => ipcRenderer.send('cancel-update'),
+})

src/App.vue

@@ -315,6 +315,7 @@
   <About v-if="showAboutDialog" @update:show-about-dialog="showAboutDialog = $event" />
   <Tutorial :show-tutorial="interfaceStore.isTutorialVisible" />
   <VideoLibraryModal :open-modal="interfaceStore.isVideoLibraryVisible" />
+  <UpdateNotification />
 </template>
 
 <script setup lang="ts">
@@ -324,6 +325,7 @@ import { useRoute } from 'vue-router'
 
 import GlassModal from '@/components/GlassModal.vue'
 import Tutorial from '@/components/Tutorial.vue'
+import UpdateNotification from '@/components/UpdateNotification.vue'
 import VideoLibraryModal from '@/components/VideoLibraryModal.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import {

src/components/UpdateNotification.vue

@@ -0,0 +1,123 @@
+<template>
+  <InteractionDialog
+    v-model="showUpdateDialog"
+    :title="dialogTitle"
+    :message="dialogMessage"
+    :variant="dialogVariant"
+    :actions="dialogActions"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import InteractionDialog from '@/components/InteractionDialog.vue'
+
+const showUpdateDialog = ref(false)
+const dialogTitle = ref('')
+const dialogMessage = ref('')
+const dialogVariant = ref<'error' | 'info' | 'success' | 'warning' | 'text-only'>('info')
+const dialogActions = ref<
+  Array<{
+    /**
+     * The text of the button
+     */
+    text: string
+    /**
+     * The action to perform when the button is clicked
+     */
+    action: () => void
+    /**
+     * The color of the button
+     */
+    color: string
+  }>
+>([])
+
+/**
+ * Interface for the electron API exposed through preload
+ */
+declare global {
+  /**
+   * Extended Window interface with Electron API
+   */
+  interface Window {
+    /**
+     * Electron API for update management
+     */
+    electronAPI: {
+      /**
+       * Register callback for update available event
+       */
+      onUpdateAvailable: (callback: (info: any) => void) => void
+      /**
+       * Register callback for update downloaded event
+       */
+      onUpdateDownloaded: (callback: (info: any) => void) => void
+      /**
+       * Trigger update download
+       */
+      downloadUpdate: () => void
+      /**
+       * Trigger update installation
+       */
+      installUpdate: () => void
+      /**
+       * Cancel ongoing update
+       */
+      cancelUpdate: () => void
+    }
+  }
+}
+
+// Listen for update events
+window.electronAPI.onUpdateAvailable(() => {
+  dialogTitle.value = 'Update Available'
+  dialogMessage.value = 'A new version of the application is available. Would you like to download it now?'
+  dialogVariant.value = 'info'
+  dialogActions.value = [
+    {
+      text: 'Download',
+      action: () => {
+        window.electronAPI.downloadUpdate()
+        showUpdateDialog.value = false
+      },
+      color: 'primary',
+    },
+    {
+      text: 'Not Now',
+      action: () => {
+        window.electronAPI.cancelUpdate()
+        showUpdateDialog.value = false
+      },
+      color: 'error',
+    },
+  ]
+  showUpdateDialog.value = true
+})
+
+window.electronAPI.onUpdateDownloaded(() => {
+  dialogTitle.value = 'Update Ready to Install'
+  dialogMessage.value =
+    'The update has been downloaded. Would you like to install it now? The application will restart during installation.'
+  dialogVariant.value = 'info'
+  dialogActions.value = [
+    {
+      text: 'Install Now',
+      action: () => {
+        window.electronAPI.installUpdate()
+        showUpdateDialog.value = false
+      },
+      color: 'primary',
+    },
+    {
+      text: 'Later',
+      action: () => {
+        showUpdateDialog.value = false
+      },
+      color: 'error',
+    },
+  ]
+  showUpdateDialog.value = true
+})
+</script>

vite.config.ts

@@ -18,6 +18,12 @@ export default defineConfig({
         vite: {
           build: {
             outDir: 'dist/electron',
+            rollupOptions: {
+              input: {
+                main: path.join(__dirname, 'electron/main.ts'),
+                preload: path.join(__dirname, 'electron/preload.ts')
+              }
+            }
           },
         },
         onstart: () => {