Electron Desktop App Development · บทเรียน

การอัปเดตแอป Electron อัตโนมัติ

ส่งมอบการอัปเดตที่ราบรื่นให้ผู้ใช้ด้วย electron-updater ช่องทางการอัปเดต และขั้นตอนการอัปเดตที่ออกแบบมาอย่างดี

บทเรียน 4 จาก 413 ขั้นตอน

การอัปเดตแอป Electron อัตโนมัติ เป็นบทเรียน Electron Desktop App Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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-updater

Configuring 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 exists
download-progress — bytes transferred
update-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 = true

Communicating 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 publish target
Call checkForUpdates() from the main process
React to update-available, download-progress, and update-downloaded
Use quitAndInstall() to apply
Code sign your builds and choose channels

A reliable update pipeline keeps your whole user base current and secure.

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 12
บทเรียน: 47

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การอัปเดตแอป Electron อัตโนมัติ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การอัปเดตแอป Electron อัตโนมัติ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Electron Desktop App Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การอัปเดตแอป Electron อัตโนมัติ”

ส่งมอบการอัปเดตที่ราบรื่นให้ผู้ใช้ด้วย electron-updater ช่องทางการอัปเดต และขั้นตอนการอัปเดตที่ออกแบบมาอย่างดี คุณปฏิบัติ Electron Desktop App Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 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 ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Electron Desktop App Development