electron-updater 프로그램 자동 업데이트

2020/03/31 - [ELECTRON] - electron-builder 초간단 사용법

 

지난 글에서 사용한 예제에 GitHub를 사용하는 자동 업데이트 기능을 추가해 보겠습니다.

 

자동 업데이트 기능 테스트를 위해서 GitHub에 repository를 하나 만든 후 소스코드는 push 한 상태입니다.

 

electron-builder는 자동 업데이트 기능을 electron-updater 모듈로 제공하고 있는데 사용법이 매우 간단합니다.

 

 

1. electron-updater 설치

 

npm install --save electron-updater

 

2. 자동 업데이트 관련 코드 작성.

 

https://www.electron.build/auto-update

Auto Update - electron-builder

electron-updater를 사용하는 다음과 같은 코드를 main process 파일에 추가합니다.

 

코드는 electron-updater-example을 참고해서 만들었습니다.

 

https://github.com/iffy/electron-updater-example/blob/master/main.js

iffy/electron-updater-example

 

 

const { autoUpdater } = require("electron-updater");

let updateWin;

function sendStatusToWindow(text) {
  updateWin.webContents.send("message", text);
}

function createDefaultUpdaetWindow() {
  updateWin = new BrowserWindow({
    backgroundColor: "#eeeeee",
    webPreferences: { nodeIntegration: true },
  });

  updateWin.on("closed", () => {
    updateWin = null;
  });
  updateWin.loadURL(`file://${__dirname}/version.html#v${app.getVersion()}`);
  return updateWin;
}

autoUpdater.on("checking-for-update", () => {
  sendStatusToWindow("Checking for update...");
});
autoUpdater.on("update-available", (info) => {
  sendStatusToWindow("Update available.");
});
autoUpdater.on("update-not-available", (info) => {
  sendStatusToWindow("Update not available.");
});
autoUpdater.on("error", (err) => {
  sendStatusToWindow("Error in auto-updater. " + err);
});
autoUpdater.on("download-progress", (progressObj) => {
  let log_message = "Download speed: " + progressObj.bytesPerSecond;
  log_message = log_message + " - Downloaded " + progressObj.percent + "%";
  log_message = log_message + " (" + progressObj.transferred + "/" + progressObj.total + ")";
  sendStatusToWindow(log_message);
});
autoUpdater.on("update-downloaded", (info) => {
  sendStatusToWindow("Update downloaded");

  const option = {
    type: "question",
    buttons: ["업데이트", "취소"],
    defaultId: 0,
    title: "electron-updater",
    message: "업데이트가 있습니다. 프로그램을 업데이트 하시겠습니까?",
  };
  let btnIndex = dialog.showMessageBoxSync(updateWin, option);

  if(btnIndex === 0) {
    autoUpdater.quitAndInstall();
  }
});

app.on("ready", async () => {
  createDefaultUpdaetWindow();
  autoUpdater.checkForUpdates();
});

 

수정된 프로그램을 빌드해서 정상 작동하는지 확인해 보겠습니다.

 

자동 업데이트 기능 추가

 

GitHub에 프로그램 소스 코드만 올라가 있고, 릴리스한 빌드가 없어서 에러 메시지가 출력됩니다.

 

그럼, 레퍼지토리에 릴리스를 만들어 보겠습니다.

 

 

3. GitHub 레포지토리에 릴리스 만들기

 

https://help.github.com/en/github/administering-a-repository/managing-releases-in-a-repository

Managing releases in a repository - GitHub Help

자동 업데이트 기능이 추가된 프로그램을 빌드 후 GitHub에 릴리스를 만들어 줍니다.

 

릴리스 만들기

 

태그 버전 넣는 곳에 package.json에 있는 버전 번호와 똑같은 버전 번호를 입력합니다.

 

package.json에 version이 "version": "1.0.0", 이라면, v1.0.0과 같이 입력합니다.

 

Release title과 Describe this release에 적당한 정보를 입력한 후 빌드한 파일을 업로드 합니다.

 

빌드 파일과 함께 latest.yml파일도 잊지 말고 꼭 업로드 하세요.

 

파일이 업로드된 후 Publish release를 클릭합니다.

 

 

v1.0.0 릴리스

 

1.0.0버전을 등록한 후 프로그램을 다시 실행하면 아래와 같이 업데이트가 있는지 확인을 합니다.

 

자동 업데이트 확인

 

4. 프로그램 자동 업데이트 

 

프로그램 자동 업데이트가 잘 작동하는지 확인하기 위해 package.json에서 version을 1.0.1로 변경한 후 빌드를 다시 만들어 3번 과정을 다시 한번 실행합니다.

 

v1.0.1 등록

 

1.0.1버전을 등록한 후 프로그램을 다시 실행하면 아래와 같이 업데이트를 자동으로 다운받습니다.

 

자동 업데이트

 

파일을 다운받은 후 출력되는 메시지 박스에서 업데이트 버튼을 클릭하면 1.0.1버전을 자동으로 설치한 후 실행합니다.

 

업데이트 설치

 

v1.0.1

프로그램이 다시 실행되면 현재 버전이 1.0.1임을 확인할 수 있습니다.