feat: 🚀 添加在线检查更新功能

README.md

@@ -38,7 +38,6 @@
 ### WIFI 连接
 
 > 注意：需同时开启无线调试功能，并在无线调试页面中获取你的当前设备的无线地址（通常为你连接WIFI时分配的IP地址）及端口号（默认为 5555）
-> 注意: 第一次无线连接可能需要插入 USB 以保证与电脑建立连接即授权成功后方可使用
 
 1. 同 USB 连接中的 1-2 步骤
 2. 将获取到的设备 IP 地址及端口号填写到 Escrcpy 中，然后点击连接设备
@@ -59,8 +58,8 @@
 - 比特率
 - 刷新率
 - 屏幕旋转
-- 镜像解码器
-- 镜像编码器
+- 视频解码器
+- 视频编码器
 
 ### 设备控制
 
@@ -81,9 +80,9 @@
 > 优先级从高到低
 
 1. 用户界面进行优化，制作合适的 Logo ✅
-2. 添加外部控制栏 🚧
+2. 内置的软件更新功能 ✅
 3. 添加 macOS 及 linux 操作系统的支持 🚧
-4. 内置的软件更新功能 🚧
+4. 添加外部控制栏 🚧
 5. 支持语言国际化功能 🚧
 6. 添加对游戏的增强功能 如游戏键位映射 🚧
 
@@ -112,7 +111,7 @@
 
 ### 无线连接提示： 目标计算机积极拒绝访问
 
-第一次无线连接可能需要插入 USB 以保证与电脑建立连接即授权成功后方可使用
+第一次无线连接可能需要配对 或 插入USB 以保证与电脑建立连接即授权成功后方可使用
 
 ## 获得帮助
 

electron.vite.config.js

@@ -7,6 +7,11 @@ import postcssConfig from '@viarotel-org/postcss-config'
 
 export default defineConfig({
   main: {
+    resolve: {
+      alias: {
+        '@root': resolve('./'),
+      },
+    },
     plugins: [externalizeDepsPlugin()],
   },
   preload: {
@@ -20,6 +25,7 @@ export default defineConfig({
   renderer: {
     resolve: {
       alias: {
+        '@root': resolve('./'),
         '@renderer': resolve('src/renderer/src'),
       },
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "escrcpy",
-  "version": "1.3.3",
+  "version": "1.3.2",
   "description": "Scrcpy Powered by Electron",
   "author": "viarotel",
   "homepage": "https://github.com/viarotel-org/escrcpy",

src/main/index.js

@@ -4,8 +4,7 @@ import { electronApp, is, optimizer } from '@electron-toolkit/utils'
 import iconPath from '../../resources/icons/icon.png?asset'
 import winIconPath from '../../resources/icons/icon.ico?asset'
 import macIconPath from '../../resources/icons/icon.icns?asset'
-
-import './ipc/index.js'
+import ipcEvent from './ipc/index.js'
 
 function createWindow() {
   let icon = iconPath
@@ -46,6 +45,8 @@ function createWindow() {
   else {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
+
+  ipcEvent(mainWindow)
 }
 
 // This method will be called when Electron has finished

src/main/ipc/index.js

@@ -1,7 +1,10 @@
 import { app, ipcMain } from 'electron'
-import './updater/index.js'
+import updaterEvents from './updater/index.js'
 
-ipcMain.on('restart-app', () => {
-  app.relaunch()
-  app.quit()
-})
+export default (mainWindow) => {
+  ipcMain.on('restart-app', () => {
+    app.relaunch()
+    app.quit()
+  })
+  updaterEvents(mainWindow)
+}

src/main/ipc/updater/index.js

@@ -1,90 +1,75 @@
-import { app, dialog, ipcMain } from 'electron'
+import { app, ipcMain } from 'electron'
 import { is } from '@electron-toolkit/utils'
 import { autoUpdater } from 'electron-updater'
 
 const path = require('node:path')
 
-// dev-start, 这里是为了在本地做应用升级测试使用，正式环境请务必删除
-if (is.dev && process.env.ELECTRON_RENDERER_URL) {
-  autoUpdater.updateConfigPath = path.join(__dirname, '../../../../dev-app-update.yml')
+export default (mainWindow) => {
+  // dev-start, 这里是为了在本地做应用升级测试使用，正式环境请务必删除
+  if (is.dev && process.env.ELECTRON_RENDERER_URL) {
+    const updateConfigPath = path.join(process.cwd(), './dev-app-update.yml')
+    // console.log('updateConfigPath', updateConfigPath)
+    autoUpdater.updateConfigPath = updateConfigPath
+  }
+
+  Object.defineProperty(app, 'isPackaged', {
+    get() {
+      return true
+    },
+  })
+  // dev-end
+
+  // 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
+  ipcMain.on('check-for-update', () => {
+    console.log('ipcMain:check-for-update')
+    autoUpdater.checkForUpdates()
+  })
+
+  // 下载更新
+  ipcMain.on('download-update', () => {
+    console.log('ipcMain:download-update')
+    autoUpdater.downloadUpdate()
+  })
+
+  // 安装更新
+  ipcMain.on('quit-and-install', () => {
+    console.log('ipcMain:quit-and-install')
+    setImmediate(() => autoUpdater.quitAndInstall())
+  })
+
+  // 设置自动下载为false(默认为true，检测到有更新就自动下载)
+  autoUpdater.autoDownload = false
+  // 检测下载错误
+  autoUpdater.on('error', (error) => {
+    console.error('update-error', error)
+  })
+
+  // 检测是否需要更新
+  autoUpdater.on('checking-for-update', (ret) => {
+    console.log('checking-for-update', ret)
+  })
+
+  // 检测到可以更新时
+  autoUpdater.on('update-available', (ret) => {
+    console.log('update-available')
+    mainWindow.webContents.send('update-available', ret)
+  })
+
+  // 检测到不需要更新时
+  autoUpdater.on('update-not-available', (ret) => {
+    console.log('update-not-available')
+    mainWindow.webContents.send('update-not-available', ret)
+  })
+
+  // 更新下载进度
+  autoUpdater.on('download-progress', (ret) => {
+    console.log('download-progress')
+    mainWindow.webContents.send('download-progress', ret)
+  })
+
+  // 当需要更新的内容下载完成后
+  autoUpdater.on('update-downloaded', (ret) => {
+    console.log('update-downloaded')
+    mainWindow.webContents.send('update-downloaded', ret)
+  })
 }
-
-Object.defineProperty(app, 'isPackaged', {
-  get() {
-    return true
-  },
-})
-// dev-end
-
-// 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
-ipcMain.on('check-for-update', () => {
-  console.log('触发检查更新')
-  autoUpdater.checkForUpdates()
-})
-
-// 设置自动下载为false(默认为true，检测到有更新就自动下载)
-autoUpdater.autoDownload = false
-// 检测下载错误
-autoUpdater.on('error', (error) => {
-  console.error('更新异常', error)
-})
-
-// 检测是否需要更新
-autoUpdater.on('checking-for-update', () => {
-  console.log('正在检查更新……')
-})
-// 检测到可以更新时
-autoUpdater.on('update-available', (releaseInfo) => {
-  console.log('检测到新版本，确认是否下载')
-  const releaseNotes = releaseInfo.releaseNotes
-  let releaseContent = ''
-  if (releaseNotes) {
-    if (typeof releaseNotes === 'string') {
-      releaseContent = releaseNotes
-    }
-    else if (Array.isArray(releaseNotes)) {
-      releaseNotes.forEach((releaseNote) => {
-        releaseContent += `${releaseNote}\n`
-      })
-    }
-  }
-  else {
-    releaseContent = '暂无更新说明'
-  }
-  // 弹框确认是否下载更新（releaseContent是更新日志）
-  dialog
-    .showMessageBox({
-      type: 'info',
-      title: '应用有新的更新',
-      detail: releaseContent,
-      message: '发现新版本，是否现在更新？',
-      buttons: ['否', '是'],
-    })
-    .then(({ response }) => {
-      if (response === 1) {
-        // 下载更新
-        autoUpdater.downloadUpdate()
-      }
-    })
-})
-// 检测到不需要更新时
-autoUpdater.on('update-not-available', () => {
-  console.log('现在使用的就是最新版本，不用更新')
-})
-// 更新下载进度
-autoUpdater.on('download-progress', (progress) => {
-  console.log('下载进度', progress)
-})
-// 当需要更新的内容下载完成后
-autoUpdater.on('update-downloaded', () => {
-  console.log('下载完成，准备更新')
-  dialog
-    .showMessageBox({
-      title: '安装更新',
-      message: '更新下载完毕，应用将重启并进行安装',
-    })
-    .then(() => {
-      // 退出并安装应用
-      setImmediate(() => autoUpdater.quitAndInstall())
-    })
-})

src/renderer/src/App.vue

@@ -17,11 +17,13 @@
 <script>
 import Devices from './components/Devices/index.vue'
 import Advanced from './components/Advanced/index.vue'
+import AboutUs from './components/AboutUs/index.vue'
 
 export default {
   components: {
     Devices,
     Advanced,
+    AboutUs,
   },
   data() {
     return {
@@ -34,6 +36,10 @@ export default {
           label: '高级配置',
           prop: 'Advanced',
         },
+        {
+          label: '关于我们',
+          prop: 'AboutUs',
+        },
       ],
       activeTab: 'Devices',
     }

src/renderer/src/components/AboutUs/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="flex flex-col items-center justify-center h-full -mt-8">
+    <div class="">
+      <img src="@renderer/assets/icon.png" class="h-48" alt="" />
+    </div>
+    <div class="pt-4 text-xl text-center italic text-gray-700">
+      📱 使用图形化的
+      <a
+        class="hover:underline text-primary-500"
+        href="https://github.com/viarotel-org/escrcpy"
+        target="_blank"
+      >Scrcpy</a>
+      显示和控制您的 Android 设备，由 Electron 驱动
+    </div>
+    <div class="pt-16 pb-4">
+      <el-button :loading="loading" type="primary" size="large" @click="handleUpdate">
+        {{ loading && percent ? `正在更新中...（${percent.toFixed(1)}%）` : '版本检测更新' }}
+      </el-button>
+    </div>
+    <div class="text-sm">
+      Supported by
+      <a class="hover:underline text-primary-500" href="https://viarotel.github.io/" target="_blank">Viarotel</a>
+      v{{ version }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { version } from '@root/package.json'
+
+export default {
+  data() {
+    return {
+      loading: false,
+      version,
+      percent: 0,
+    }
+  },
+  created() {
+    this.onUpdateAvailable()
+    this.onDownloadProgress()
+    this.onUpdateDownloaded()
+    this.$electron.ipcRenderer.on('update-not-available', () => {
+      this.loading = false
+      this.$message.success('已经是最新版本')
+    })
+    this.$electron.ipcRenderer.on('error', () => {
+      this.loading = false
+    })
+  },
+  methods: {
+    handleUpdate() {
+      this.loading = true
+      this.$electron.ipcRenderer.send('check-for-update')
+    },
+    onDownloadProgress() {
+      this.$electron.ipcRenderer.on('download-progress', async (event, ret) => {
+        console.log('ret', ret)
+        this.percent = ret.percent
+      })
+    },
+    async onUpdateDownloaded() {
+      this.$electron.ipcRenderer.on('update-downloaded', async (event, ret) => {
+        console.log('ret', ret)
+        this.loading = false
+        try {
+          await this.$confirm('是否立即重启更新？', '下载新版本成功', {
+            confirmButtonText: '更新',
+            cancelButtonText: '取消',
+            closeOnClickModal: false,
+          })
+          this.$electron.ipcRenderer.send('quit-and-install')
+        }
+        catch (error) {
+          console.warn(error.message)
+        }
+      })
+    },
+    onUpdateAvailable() {
+      this.$electron.ipcRenderer.on('update-available', async (event, ret) => {
+        this.loading = false
+        try {
+          console.log('ret', ret)
+          await this.$confirm(ret.releaseNotes, '发现新版本', {
+            dangerouslyUseHTMLString: true,
+            closeOnClickModal: false,
+            confirmButtonText: '更新',
+            cancelButtonText: '取消',
+          })
+          this.$electron.ipcRenderer.send('download-update')
+          this.loading = true
+        }
+        catch (error) {
+          console.warn(error.message)
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style></style>