Electron Desktop App Development · Pelajaran

Memperbarui Aplikasi Electron Secara Otomatis

Kirimkan pembaruan yang lancar kepada pengguna dengan electron-updater, kanal pembaruan, dan alur pembaruan yang rapi.

Pelajaran 4 dari 413 langkah

Memperbarui Aplikasi Electron Secara Otomatis adalah pelajaran Electron Desktop App Development gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Electron Desktop App Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Electron Desktop App Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Jawab di pelajaran interaktif

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.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 12
Pelajaran: 47

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memperbarui Aplikasi Electron Secara Otomatis” gratis?

Ya — teks lengkap “Memperbarui Aplikasi Electron Secara Otomatis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Electron Desktop App Development, upgrade ke CoddyKit PRO. Kursus Electron Desktop App Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memperbarui Aplikasi Electron Secara Otomatis”?

Kirimkan pembaruan yang lancar kepada pengguna dengan electron-updater, kanal pembaruan, dan alur pembaruan yang rapi. Kamu berlatih Electron Desktop App Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Electron Desktop App Development?

Tidak diperlukan pengalaman sebelumnya. Electron Desktop App Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Memperbarui Aplikasi Electron Secara Otomatis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Electron Desktop App Development ini?

Ya. Setiap pelajaran Electron Desktop App Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Arsitektur Banyak Jendela
Proses Latar Belakang dan Pekerja
Mengintegrasikan Layanan Awan
Memperbarui Aplikasi Electron Secara Otomatis

← Kembali ke Electron Desktop App Development