-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
electron: Offer automatic app update
With this new implementation, the user is informed that a new version of the application is available and can choose between downloading it or not.
- Loading branch information
1 parent
faba007
commit 265a3e0
Showing
6 changed files
with
382 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| 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)), | ||
| onCheckingForUpdate: (callback: () => void) => ipcRenderer.on('checking-for-update', () => callback()), | ||
| onUpdateNotAvailable: (callback: (info: any) => void) => | ||
| ipcRenderer.on('update-not-available', (_event, info) => callback(info)), | ||
| onDownloadProgress: (callback: (info: any) => void) => | ||
| ipcRenderer.on('download-progress', (_event, info) => callback(info)), | ||
| downloadUpdate: () => ipcRenderer.send('download-update'), | ||
| installUpdate: () => ipcRenderer.send('install-update'), | ||
| cancelUpdate: () => ipcRenderer.send('cancel-update'), | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| <template> | ||
| <InteractionDialog | ||
| v-model="showUpdateDialog" | ||
| :title="dialogTitle" | ||
| :message="dialogMessage" | ||
| :variant="dialogVariant" | ||
| :actions="dialogActions" | ||
| > | ||
| <template #content> | ||
| <div v-if="updateInfo" class="mt-2"> | ||
| <strong>Update Details:</strong> | ||
| <p>Current Version: {{ app_version.version }}</p> | ||
| <p>New Version: {{ updateInfo.version }}</p> | ||
| <p>Release Date: {{ formatDate(updateInfo.releaseDate) }}</p> | ||
| </div> | ||
| <v-progress-linear | ||
| v-if="showProgress" | ||
| :model-value="downloadProgress" | ||
| color="primary" | ||
| height="25" | ||
| rounded | ||
| class="mb-2" | ||
| > | ||
| <template #default> | ||
| <strong>{{ Math.round(downloadProgress) }}%</strong> | ||
| </template> | ||
| </v-progress-linear> | ||
| </template> | ||
| </InteractionDialog> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useStorage } from '@vueuse/core' | ||
| import { ref } from 'vue' | ||
| import InteractionDialog, { type Action } from '@/components/InteractionDialog.vue' | ||
| import { app_version } from '@/libs/cosmos' | ||
| const showUpdateDialog = ref(false) | ||
| const dialogTitle = ref('') | ||
| const dialogMessage = ref('') | ||
| const dialogVariant = ref<'error' | 'info' | 'success' | 'warning' | 'text-only'>('info') | ||
| const showProgress = ref(false) | ||
| const downloadProgress = ref(0) | ||
| const dialogActions = ref<Action[]>([]) | ||
| const updateInfo = ref({ | ||
| version: '', | ||
| releaseDate: '', | ||
| releaseNotes: '', | ||
| }) | ||
| const ignoredUpdateVersions = useStorage<string[]>('cockpit-ignored-update-versions', []) | ||
| // Listen for update events | ||
| window.electronAPI.onCheckingForUpdate(() => { | ||
| console.log('Checking if there are updates for the Electron app...') | ||
| dialogTitle.value = 'Checking for Updates' | ||
| dialogMessage.value = 'Looking for new versions of the application...' | ||
| dialogVariant.value = 'info' | ||
| dialogActions.value = [] | ||
| showProgress.value = false | ||
| showUpdateDialog.value = true | ||
| }) | ||
| window.electronAPI.onUpdateNotAvailable(() => { | ||
| console.log('No updates available for the Electron app.') | ||
| dialogTitle.value = 'No Updates Available' | ||
| dialogMessage.value = 'You are running the latest version of the application.' | ||
| dialogVariant.value = 'success' | ||
| dialogActions.value = [ | ||
| { | ||
| text: 'OK', | ||
| action: () => { | ||
| showUpdateDialog.value = false | ||
| }, | ||
| }, | ||
| ] | ||
| showProgress.value = false | ||
| }) | ||
| window.electronAPI.onUpdateAvailable((info) => { | ||
| console.log('Update available for the Electron app.', info) | ||
| dialogTitle.value = 'Update Available' | ||
| dialogMessage.value = 'A new version of the application is available. Would you like to download it now?' | ||
| dialogVariant.value = 'info' | ||
| updateInfo.value = { ...info } | ||
| dialogActions.value = [ | ||
| { | ||
| text: 'Ignore This Version', | ||
| action: () => { | ||
| console.log(`User chose to ignore version ${updateInfo.value.version}`) | ||
| ignoredUpdateVersions.value.push(updateInfo.value.version) | ||
| window.electronAPI.cancelUpdate() | ||
| showUpdateDialog.value = false | ||
| }, | ||
| }, | ||
| { | ||
| text: 'Download', | ||
| action: () => { | ||
| window.electronAPI.downloadUpdate() | ||
| showProgress.value = true | ||
| dialogActions.value = [ | ||
| { | ||
| text: 'Cancel', | ||
| action: () => { | ||
| console.log('User chose to cancel the update for the Electron app.') | ||
| window.electronAPI.cancelUpdate() | ||
| showUpdateDialog.value = false | ||
| }, | ||
| }, | ||
| ] | ||
| }, | ||
| }, | ||
| { | ||
| text: 'Not Now', | ||
| action: () => { | ||
| window.electronAPI.cancelUpdate() | ||
| showUpdateDialog.value = false | ||
| }, | ||
| }, | ||
| ] | ||
| // Check if this version is in the ignored list | ||
| if (ignoredUpdateVersions.value.includes(info.version)) { | ||
| console.log(`Skipping ignored version ${info.version}.`) | ||
| showUpdateDialog.value = false | ||
| return | ||
| } | ||
| showUpdateDialog.value = true | ||
| }) | ||
| window.electronAPI.onDownloadProgress((progressInfo) => { | ||
| downloadProgress.value = progressInfo.percent | ||
| dialogMessage.value = `Downloading update... ${Math.round(progressInfo.percent)}%` | ||
| }) | ||
| window.electronAPI.onUpdateDownloaded(() => { | ||
| console.log('Finished downloading the update for the Electron app.') | ||
| 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' | ||
| showProgress.value = false | ||
| dialogActions.value = [ | ||
| { | ||
| text: 'Install Now', | ||
| action: () => { | ||
| console.log('User chose to install the update for the Electron app now.') | ||
| window.electronAPI.installUpdate() | ||
| showUpdateDialog.value = false | ||
| }, | ||
| }, | ||
| { | ||
| text: 'Later', | ||
| action: () => { | ||
| console.log('User chose to install the update for the Electron app later.') | ||
| showUpdateDialog.value = false | ||
| }, | ||
| }, | ||
| ] | ||
| showUpdateDialog.value = true | ||
| }) | ||
| const formatDate = (date: string): string => { | ||
| return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) | ||
| } | ||
| </script> |
Oops, something went wrong.