التحديث التلقائي لتطبيق Electron
قدّم تحديثات سلسة للمستخدمين باستخدام electron-updater وقنوات التحديث ومسار تحديث متقن.
التحديث التلقائي لتطبيق Electron درس مجاني في Electron Desktop App Development على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Electron Desktop App Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Why Auto-Update Matters
Desktop apps are not auto-refreshed like web pages. Once a user installs your Electron app, you need a way to push new versions without asking them to re-download manually.
An auto-update system lets you ship bug fixes and features continuously, keeping every user on a recent, secure build.
- Reduces support burden from stale versions
- Delivers security patches fast
- Improves retention with new features
The electron-updater Library
The most common solution is electron-updater, part of the electron-builder ecosystem. It handles checking, downloading, and installing updates across Windows, macOS, and Linux.
Install it as a runtime dependency, not a dev dependency, because it ships inside your app.
npm install electron-updaterConfiguring the Publish Target
electron-updater reads a publish block in your build config to know where to fetch new versions. A common target is a generic HTTP server or a GitHub release.
"build": {
"publish": [{
"provider": "generic",
"url": "https://updates.example.com/myapp"
}]
}Triggering an Update Check
In your main process, call autoUpdater.checkForUpdates() after the app is ready. This contacts your publish URL and compares versions.
Run this from the main process only, never the renderer.
const { autoUpdater } = require('electron-updater')
app.whenReady().then(() => {
createWindow()
autoUpdater.checkForUpdates()
})Listening to Update Events
autoUpdater emits events you can hook into to drive your UI and logging.
update-available— a newer version existsdownload-progress— bytes transferredupdate-downloaded— ready to install
autoUpdater.on('update-available', () => {
console.log('New version found')
})
autoUpdater.on('download-progress', (p) => {
console.log('Progress: ' + Math.round(p.percent) + '%')
})Installing the Downloaded Update
When update-downloaded fires, the new version is staged. Call quitAndInstall() to restart the app onto the new version.
It is good practice to prompt the user first instead of restarting unexpectedly.
autoUpdater.on('update-downloaded', () => {
autoUpdater.quitAndInstall()
})Update Channels
Channels let you ship pre-release builds to a subset of users. Common channels are latest, beta, and alpha.
Set the channel so testers receive early builds while everyone else stays on stable.
autoUpdater.channel = 'beta'
autoUpdater.allowPrerelease = trueCommunicating Progress to the UI
Because autoUpdater lives in the main process, forward its events to the renderer through your preload bridge so the UI can show a progress bar.
autoUpdater.on('download-progress', (p) => {
mainWindow.webContents.send('update-progress', p.percent)
})Handling Errors Gracefully
Network failures and signature mismatches happen. Always listen for the error event so a failed update never crashes the app or blocks the user.
autoUpdater.on('error', (err) => {
console.error('Update failed:', err == null ? 'unknown' : err.message)
})Code Signing Requirements
On macOS and Windows, auto-updates only work if your app is code signed. Unsigned builds will fail the signature check on install.
- macOS: Apple Developer ID certificate
- Windows: Authenticode certificate
Signing also protects users from tampered update payloads.
Manual vs Silent Updates
You can disable automatic downloading and let users decide when to update by setting autoDownload = false, then calling downloadUpdate() on demand.
Choose silent background updates for consumer apps, manual control for enterprise tools.
autoUpdater.autoDownload = false
autoUpdater.on('update-available', () => {
// ask user, then:
autoUpdater.downloadUpdate()
})Quick Check
Test your understanding of Electron auto-updates.
Recap
You learned how to ship seamless updates with electron-updater:
- Configure a
publishtarget - Call
checkForUpdates()from the main process - React to
update-available,download-progress, andupdate-downloaded - Use
quitAndInstall()to apply - Code sign your builds and choose channels
A reliable update pipeline keeps your whole user base current and secure.
الأسئلة الشائعة
هل درس «التحديث التلقائي لتطبيق Electron» مجاني؟
نعم — نص درس «التحديث التلقائي لتطبيق Electron» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Electron Desktop App Development، انتقل إلى CoddyKit PRO. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.
ماذا ستتعلم في «التحديث التلقائي لتطبيق Electron»؟
قدّم تحديثات سلسة للمستخدمين باستخدام electron-updater وقنوات التحديث ومسار تحديث متقن. تتمرن على Electron Desktop App Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Electron Desktop App Development؟
لا تُشترط خبرة سابقة. Electron Desktop App Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «التحديث التلقائي لتطبيق Electron»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Electron Desktop App Development هذا؟
نعم. كل درس في Electron Desktop App Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بُنى التطبيقات متعددة النوافذ
- العمليات والعاملات في الخلفية
- التكامل مع الخدمات السحابية
- التحديث التلقائي لتطبيق Electron