Auto-Update Electron dengan electron-updater

Salah satu hal yang bikin pusing waktu bikin aplikasi desktop: gimana caranya mastiin semua user pakai versi terbaru? Nggak mungkin kan kamu suruh mereka download installer baru tiap ada perbaikan kecil. Nah, di sinilah auto-update main. Pakai library electron-updater, aplikasi kamu bisa ngecek versi baru sendiri, download-nya diam-diam di latar belakang, terus masang tanpa user harus ngapa-ngapain. Yuk kita setup dari nol, langkah demi langkah.

Sebelum lanjut, idealnya kamu udah ngerti dasar-dasar Electron dulu ya. Kalau belum, mampir dulu ke mengenal Electron: bikin desktop app.

Gimana Auto-Update Bekerja?

Konsepnya simpel kok. Tiap kali kamu rilis versi baru, file installer plus satu file metadata (latest.yml buat Windows) diupload ke suatu tempat, misalnya GitHub Releases. Nah, aplikasi yang udah keinstall di komputer user bakal:

Ngecek file metadata di server buat lihat versi paling baru.
Bandingin sama versi yang lagi jalan sekarang.
Kalau ternyata lebih baru, download installer-nya di latar belakang.
Masang update pas aplikasi ditutup, atau pas user setuju.

Semua alur tadi diurus otomatis sama electron-updater, yang notabene masih satu keluarga sama electron-builder. Jadi kamu tinggal setup, sisanya dia yang kerja.

Langkah 1: Pasang Dependensi

Di proyek Electron kamu, install dua hal ini: electron-updater sama electron-builder:

npm install electron-updater
npm install --save-dev electron-builder

electron-builder tugasnya nge-package aplikasi kamu sekaligus bikin file metadata yang tadi dibutuhin buat auto-update.

Langkah 2: Konfigurasi Publish

Di package.json, tambahin konfigurasi build yang isinya target publish. Ini contoh kalau kamu mau pakai GitHub:

{
  "version": "1.0.0",
  "build": {
    "appId": "com.razin.aplikasi",
    "productName": "AplikasiPertama",
    "publish": [
      {
        "provider": "github",
        "owner": "razinsaid",
        "repo": "aplikasi-pertama"
      }
    ]
  }
}

Perhatiin field version ya, ini penting banget. Tiap kali kamu rilis, angkanya wajib dinaikin (misal dari 1.0.0 ke 1.0.1). Soalnya angka inilah yang jadi patokan pas aplikasi ngecek ada update atau nggak.

Langkah 3: Panggil autoUpdater di Main Process

Logika auto-update jalannya di main process, bukan di renderer. Tambahin kode ini di main.js:

// main.js
const { app, BrowserWindow } = require("electron");
const { autoUpdater } = require("electron-updater");

function buatJendela() {
  const win = new BrowserWindow({ width: 900, height: 650 });
  win.loadFile("index.html");
}

app.whenReady().then(() => {
  buatJendela();

  // Cek update setelah aplikasi siap
  autoUpdater.checkForUpdatesAndNotify();
});

Fungsi checkForUpdatesAndNotify() ini cara paling cepet buat mulai. Dia bakal otomatis ngecek versi baru, download-nya, terus munculin notifikasi sistem pas update-nya udah siap dipasang. Praktis banget.

Langkah 4: Dengerin Event (Opsional tapi Disarankan)

Biar pengalamannya lebih enak, mending kamu dengerin event-event dari autoUpdater. Dengan gitu kamu bisa ngasih tau user apa yang lagi terjadi, nggak diem-diem doang.

autoUpdater.on("checking-for-update", () => {
  console.log("Mengecek update...");
});

autoUpdater.on("update-available", (info) => {
  console.log("Update tersedia:", info.version);
});

autoUpdater.on("update-not-available", () => {
  console.log("Sudah versi terbaru.");
});

autoUpdater.on("download-progress", (p) => {
  console.log(`Unduh: ${Math.round(p.percent)}%`);
});

autoUpdater.on("update-downloaded", () => {
  console.log("Update selesai diunduh, akan dipasang saat restart.");
  // Bisa langsung pasang:
  // autoUpdater.quitAndInstall();
});

autoUpdater.on("error", (err) => {
  console.error("Gagal update:", err.message);
});

Contohnya lewat event update-downloaded, kamu bisa munculin tombol "Restart untuk update", terus baru panggil autoUpdater.quitAndInstall() pas user beneran ngeklik. Jauh lebih sopan ketimbang tiba-tiba maksa restart pas user lagi ngerjain sesuatu.

Langkah 5: Build dan Publish

Buat nge-build sekaligus upload rilisnya, kamu butuh token akses. Kalau pakai GitHub, set dulu environment variable GH_TOKEN, terus jalanin:

GH_TOKEN="token_kamu" npx electron-builder --publish always

Perintah ini bakal bikin installer, ngasilin latest.yml, terus upload semuanya ke GitHub Releases sekaligus. Abis itu, semua aplikasi yang udah keinstall bakal ngedeteksi versi baru di pengecekan berikutnya. Beres.

Hal yang Sering Bikin Bingung

Ada beberapa catatan nih biar kamu nggak kejebak masalah yang umum kejadian:

Auto-update nggak jalan di mode development. Library ini cuma aktif di aplikasi yang udah di-package. Jadi pas kamu npm start, pengecekannya bakal dilewatin atau munculin error yang aman-aman aja buat diabaikan.
Versi wajib selalu naik. Kalau versi barunya lebih kecil atau malah sama, update-nya nggak bakal ditawarin ke user.
macOS butuh code signing. Di macOS, update cuma jalan kalau aplikasinya udah ditandatangani (signed). Windows sih lebih longgar, tapi tetep aja signing sangat disaranin biar aplikasi kamu nggak dianggap mencurigakan sama sistem.

FAQ

Harus pakai GitHub buat publish?

Nggak kok. electron-updater support banyak provider, mulai dari S3, server statis biasa (HTTP), sampai layanan lain. GitHub cuma pilihan yang paling gampang buat mulai-mulai.

User perlu nutup aplikasi dulu biar update kepasang?

Di Windows sama Linux, update biasanya kepasang pas aplikasi ditutup. Tapi kamu juga bisa maksa lewat quitAndInstall() yang bakal nutup aplikasi terus langsung masang saat itu juga.

Gimana cara nguji auto-update sebelum rilis ke publik?

Bikin repo atau bucket khusus buat uji coba, terus rilis versi 1.0.0 sama 1.0.1. Install versi lamanya beneran (inget, bukan mode dev), abis itu lihat deh apakah dia berhasil ngedeteksi versi yang baru.

Penutup

Intinya, dengan electron-updater kamu ngasih aplikasi kemampuan buat nge-update dirinya sendiri. User pun selalu dapet perbaikan terbaru tanpa harus repot-repot. Kuncinya cuma dua: konfigurasi publish yang bener, sama disiplin naikin nomor versi tiap kali rilis.

Satu tips terakhir: jangan langsung maksa restart. Munculin pemberitahuan yang ramah aja, biar user sendiri yang milih kapan mau masang update-nya. Kalau udah paham ini, lanjut belajar cara package & distribusi aplikasi Electron biar kamu ngerti proses build-nya secara menyeluruh.

Auto-Update Aplikasi Electron dengan electron-updater