feat(main): check for update

Author: antonreshetov

package.json

@@ -36,6 +36,7 @@
     "@types/universal-analytics": "^0.4.5",
     "@vueuse/core": "^8.1.2",
     "ace-builds": "^1.4.14",
+    "axios": "^0.26.1",
     "electron-store": "^8.0.1",
     "fs-extra": "^10.0.1",
     "lowdb": "^3.0.0",

src/main/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, Menu } from 'electron'
+import { app, BrowserWindow, ipcMain, Menu, shell } from 'electron'
 import path from 'path'
 import os from 'os'
 import { store } from './store'
@@ -8,6 +8,7 @@ import { debounce } from 'lodash'
 import { subscribeToChannels } from './services/ipc'
 import { mainMenu } from './menu/main'
 import { subscribeToDialog } from './services/ipc/dialog'
+import { checkForUpdate } from './services/update-check'
 
 const isDev = process.env.NODE_ENV === 'development'
 
@@ -43,6 +44,8 @@ function createWindow () {
 
   mainWindow.on('resize', () => storeBounds(mainWindow))
   mainWindow.on('move', () => storeBounds(mainWindow))
+
+  checkForUpdate()
 }
 
 const storeBounds = debounce((mainWindow: BrowserWindow) => {
@@ -69,6 +72,10 @@ ipcMain.handle('main:restart-api', () => {
   apiServer.restart()
 })
 
+ipcMain.handle('main:open-url', (event, payload) => {
+  shell.openExternal(payload as string)
+})
+
 ipcMain.on('request-info', event => {
   event.sender.send('request-info', {
     version: app.getVersion(),

src/main/services/update-check.ts

@@ -0,0 +1,23 @@
+import axios from 'axios'
+import { BrowserWindow } from 'electron'
+import { version, repository } from '../../../package.json'
+
+const isDev = process.env.NODE_ENV === 'development'
+
+export const checkForUpdate = async () => {
+  if (isDev) return
+
+  const res = await axios.get(`${repository}/releases/latest`)
+
+  if (res) {
+    const latest = res.request.socket._httpMessage.path
+      .split('/')
+      .pop()
+      .substring(1)
+    if (latest !== version) {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main:update-available'
+      )
+    }
+  }
+}

src/renderer/App.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="app-title-bar" />
   <RouterView />
+  <div
+    v-if="isUpdateAvailable"
+    class="update"
+    @click="onClickUpdate"
+  >
+    <span> Update available </span>
+  </div>
 </template>
 
 <script setup lang="ts">
 import router from '@/router'
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 import { ipc } from './electron'
 import { useAppStore } from './store/app'
+import { repository } from '../../package.json'
 
 // По какой то причине необходимо явно установить роут в '/'
 // для корректного поведения в продакшен сборке
@@ -16,10 +24,16 @@ router.push('/')
 
 const appStore = useAppStore()
 
+const isUpdateAvailable = ref(false)
+
 const setTheme = (theme: string) => {
   document.body.dataset.theme = theme
 }
 
+const onClickUpdate = () => {
+  ipc.invoke('main:open-url', `${repository}/releases`)
+}
+
 watch(
   () => appStore.theme,
   () => setTheme(appStore.theme),
@@ -29,6 +43,10 @@ watch(
 ipc.on('main-menu:preferences', () => {
   router.push('/preferences')
 })
+
+ipc.on('main:update-available', async () => {
+  isUpdateAvailable.value = true
+})
 </script>
 
 <style lang="scss">
@@ -47,4 +65,30 @@ body {
     transition: all 0.5s;
   }
 }
+.update {
+  position: absolute;
+  top: 5px;
+  right: var(--spacing-sm);
+  z-index: 1020;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: bold;
+  background: -webkit-linear-gradient(60deg, var(--color-primary), limegreen);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% auto;
+  animation: shine 3s ease infinite;
+}
+
+@keyframes shine {
+  from {
+    background-position: 200%;
+  }
+}
+
+@keyframes zoom {
+  from {
+    background-position: 100%;
+  }
+}
 </style>

src/shared/types/main/index.d.ts

@@ -37,6 +37,8 @@ type MainAction =
   | 'notification'
   | 'open-dialog'
   | 'open-message-box'
+  | 'update-available'
+  | 'open-url'
 
 export type ContextMenuChannel = CombineWith<ChannelSubject, 'context-menu'>
 

yarn.lock

@@ -3094,6 +3094,13 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -6028,7 +6035,7 @@ flow-parser@0.*:
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.168.0.tgz#e9c385499145828b42fd754d3528f4cb7d5c6edf"
   integrity sha512-YMlc+6vvyDPqWKOpzmyifJXBbwlNdqznuy8YBHxX1/90F8d+NnhsxMe1u/ok5LNvNJVJ2TVMkWudu0BUKOSawA==
 
-follow-redirects@^1.14.0:
+follow-redirects@^1.14.0, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==