[Electron] 쿨 가락 클 라 이언 트 개발 실천 공유 - 소프트웨어 자동 업데이트

저자: 종 리, 쿠 가락 PC 클 라 이언 트 담당자https://webfe.kujiale.com/electron-autoupdate/쿠 가락 클 라 이언 트: 다운로드 주소https://www.kujiale.com/activity/136글 배경: 쿠 자 르 클 라 이언 트 가 V12 개편 에 성공 한 후에 우 리 는 많은 소중 한 경험 과 최고의 실천 을 쌓 았 습 니 다.전단 커 뮤 니 티 에 서 는 일 렉 트 로 닉 에 대한 지식 이 상대 적 으로 적기 때문에 이런 내용 을 시리즈 문장 으로 공유 하고 싶다.시리즈 글:

[Electron] 쿨 가락 클 라 이언 트 개발 실천 공유 - 입 갱 편

[Electron] 쿨 가락 클 라 이언 트 개발 실천 공유 - 소프트웨어 자동 업데이트

[Electron] 쿨 가락 클 라 이언 트 개발 실천 공유 - 브 라 우 저 시작 클 라 이언 트

[Electron] 쿨 가락 클 라 이언 트 개발 실천 공유 - 프로 세 스 통신

[Electron] 쿨 가락 클 라 이언 트 개발 실천 공유 - 다운로드 관리자

부정 기 업데이트...

원리 를 갱신 하 다
클 라 이언 트 업데이트 방안 을 이야기 하기 전에 웹 과 클 라 이언 트 업데이트 의 원 리 를 알 아 보 겠 습 니 다.
웹 응용
웹 응용 세계 에서 우 리 는 보통 웹 서버 의 전단 코드 (템 플 릿, HTML, js, css) 를 업데이트 하여 새로운 기능 을 발표 합 니 다.그 후에 사용 자 는 우리 의 웹 서버 를 다시 방문 하여 업 데 이 트 된 전단 코드 를 받 았 습 니 다.
웹 응용 업데이트 가 이렇게 편리 한 것 은 중심 화 된 저장 방식 덕분 입 니 다.

웹 응용의 전단 코드 는 일반적으로 서버 나 클 라 우 드 서비스 에 집중 적 으로 저장 된다

브 라 우 저 는 매번 서버 에 가서 최신 자원 을 가 져 옵 니 다. 사용자 본 기 계 는 실제 적 으로 웹 애플 리 케 이 션 을 영구적 으로 저장 하 는 코드 가 없습니다

브 라 우 저 캐 시도 사용자 컴퓨터 에 전단 코드 를 저장 한 셈 이지 만 웹 응용 프로그램 이 업데이트 가 필요 할 때 캐 시 를 사용 하지 않 을 것 입 니 다. 그렇지 않 으 면 이번 발 표 는 캐 시 가 있 는 사용자 에 게 유효 하지 않 습 니 다.
클 라 이언 트
웹 응용의 중심 화 저장 과 달리 클 라 이언 트 의 코드 는 실제 적 으로 분포 식 저장 이 고 모든 사용자 컴퓨터 에 완전한 코드 파일 이 있 으 며 약간 비슷 하 다 git.
사용 자 는 컴퓨터 에 클 라 이언 트 를 설치 하면 실제로 클 라 이언 트 코드 파일 을 이 컴퓨터 에 영구적 으로 저장 합 니 다.예 를 들 어 MacOS 에 코드 파일 은 /Applications 디 렉 터 리 에 저 장 됩 니 다.
클 라 이언 트 에 웹 페이지 를 삽입 하 는 업데이트 방식 은 위 에서 말 한 웹 애플 리 케 이 션 업데이트 와 같 습 니 다. 더 이상 설명 하지 않 습 니 다. (모 바 일 앱 에 설 치 된 H5 페이지 업데이트 참조)
결론.
웹 애플 리 케 이 션 업데이트, 실제 서버 코드 파일 업데이트
클 라 이언 트 의 업 데 이 트 는 실제 적 으로 사용자 컴퓨터 의 코드 파일 을 업데이트 하 는 것 이다.
구체 적 실현
Electron 홈 페이지 에는 업데이트 에 관 한 튜 토리 얼 Updating Applications 가 있 지만 업무 수 요 를 만족 시 킬 수 없습니다.

update.electron.org 코드 는 github 에 위탁 해 야 합 니 다. pass

electron-builder windows 에 서 는 NSIS 만 지원 하고 HTTP 서 비 스 를 구축 해 야 한다.업데이트 프로그램 UI 와 대화 형 맞 춤 형 제작 도 우호 적 이지 않다

Deploying an Update Server 이 방안 은 update server 를 배치 해 야 하고 귀 찮 습 니 다

그래서 우 리 는 자신 이 실현 한 업데이트 절 차 를 사용한다.
1. 업데이트 확인
업 데 이 트 를 검사 하 는 것 은 전체 절차 의 첫 번 째 단계 이다.업데이트 가 있어 야 후속 업데이트 논리 가 실 행 됩 니 다.일반적으로 우 리 는 소프트웨어 가 시 작 될 때 업 데 이 트 를 검사 합 니 다.
업 데 이 트 된 정책 을 검사 합 니 다. 실제로 로 컬 클 라 이언 트 의 버 전 을 원 격 버 전과 비교 한 다음 에 버 전 대비 결과 에 따라 서로 다른 업데이트 보 여 줍 니 다.
원 격 버 전
자신 이 update server 를 만 드 는 것 보다 원 격 JSON 데이터 유지 비용 이 낮 습 니 다.이 원 격 데 이 터 는 백 엔 드 인터페이스 나 cdn 의 json 파일 일 수 있 으 며 업데이트 가 필요 할 때 원 격 데이터 의 내용 을 제때에 업데이트 할 수 있 습 니 다.
이 원 격 JSON 데이터 에는 일반적으로 버 전 번호, 업데이트 내용 소개 및 발표 시간 이 저 장 됩 니 다.

const updateData = axios.get('https://some-update.json');
console.log(updateData);
/*
{
    version: '1.0.0',
    changeLogs: ['      ','      '],
    time: '2019-06-06',
}
*/

로 컬 버 전
Electron 에서 로 컬 버 전 을 가 져 오 는 것 은 매우 간단 한 app. getVersion 입 니 다.

const localVersion = app.getVersion(); // 0.0.1

버 전 비교
일반적으로 원 격 버 전 번호 가 로 컬 버 전보 다 크 면 업데이트 가 있다 고 인정 합 니 다.업데이트 가 있 는 상황 에서 저 희 는 버 전 번호 의 major, minor, patch 버 전 변동 에 따라 서로 다른 업데이트 전략 을 제정 할 수 있 습 니 다.

//      >     
const shouldUpdate = semver.gt(removeVersion, localVersion);

//   ：major      ，        。          

const isMajorUpdate = semver.diff(removeVersion, localVersion) === 'major';

if (!shouldUpdate) return; //    ，    

if (isMajorUpdate) {
    console.log('      ')
} else {
    console.log('         ')
}

버 전 번호 조작 에 semver 사용 하기
2. 업데이트 알림
소프트웨어 업 데 이 트 를 확인 한 후 사용자 에 게 업데이트 알림 을 제시 해 야 합 니 다.이 때, 우 리 는 업데이트 알림 을 불 러 오 는 창 을 사용 합 니 다. 그 다음은 업데이트 창 이 라 고 합 니 다.
창 내부 코드 예제 업데이트:

const updateData = axios.get('some-update.json')
//        ，  

if (!shouldUpdate) return; //    

//      ，      。      ，      
ReactDom.render( console.log('       ')}
/>, '#app');

//    ，      （          ）
currentWindow.show();

3. 본 컴퓨터 파일 업데이트
사용자 가 업데이트 단 추 를 누 르 면 마지막 단 계 를 시작 할 수 있 음 을 의미 합 니 다.
마지막 단계 에서 우 리 는 두 단계 로 나 누 어 진행한다.

최신 설치 프로그램 (. dmg or. exe) 을 가 져 옵 니 다. 최신 코드 파일 이 설치 프로그램 에 있 기 때 문 입 니 다

사용자 본 컴퓨터 의 코드 파일 교체

이 절 차 는 사용자 에 게 맡 길 수도 있 고 우리 가 사용 자 를 도와 할 수도 있다.우 리 는 이 두 가지 상황 에서 각각 어떻게 실현 되 었 는 지 보 자.
사용자 에 게 업데이트 하도록 맡기다
우선, 우 리 는 사이트 클 라 이언 트 다운로드 페이지 의 설치 프로그램 자원 을 최신 으로 업데이트 해 야 한다.그 다음 에 사용자 가 업데이트 단 추 를 누 르 면 이 컴퓨터 의 기본 브 라 우 저 로 다운로드 페이지 를 열 어 사용자 가 직접 다운로드 하고 설치 하 게 합 니 다. 설치 프로그램 이 정상적으로 실 행 된 후에 그 자체 가 이 컴퓨터 코드 파일 을 덮어 쓸 수 있 습 니 다.

사용 자 는 브 라 우 저 를 통 해 다운로드 페이지 에서 최신 설치 프로그램 을 얻 었 습 니 다.

사용 자 는 수 동 으로 설치 프로그램 을 열 고 설치 프로그램 을 실행 했다.

이 방법 은 사용자 체험 이 좋 지 않 지만 장점 도 뚜렷 하 다. 많은 개발 원 가 를 절약 하고 웹 페이지 를 직접 재 활용 하여 업 데 이 트 를 한다.
만약 이런 전략 을 채택 한다 면 코드 는 매우 간단 할 것 이다.

//       
function handleUpdate() {
    shell.openExternal('https://www.kujiale.com/activity/136'); //        ，       
    
}

업데이트
물론 더 좋 은 사용자 체험 을 추구 하기 위해 서 는 창 을 업데이트 하 는 코드 에서 직접 기능 을 실현 하 는 것 이 좋다.
첫 번 째 단 계 는 최신 설치 프로그램 을 다운로드 하고 다운로드 진 도 를 보 여 줍 니 다.다운로드 진행 기능 은 request - progress 를 사용 하 는 것 을 추천 합 니 다.물론 NodeJs 네 이 티 브 http 와 stream 모듈 을 사용 해 다운로드 진도 전 시 를 실현 할 수도 있 으 며 자세 한 설명 은 없다.
다운로드 한 설치 프로그램 은 사용자 컴퓨터 의 임시 폴 더 에 잠시 저장 할 수 있 습 니 다.

const fs = require('fs');
const request = require('request');
const progress = require('request-progress');

//       
function handleUpdate(){
    //              
    const downloadUrl = `https://someupdate/${updateData.version}/installer.dmg`;
    //  request  
    progress(request(downloadUrl))
    .on('progress', (state) => {
        //   
        console.log(state)
    })
    //         
    .pipe(fs.createWriteStream(path.join(app.getPath('temp'), 'installer.dmg')))
}

진도 보기 예시 그림:
두 번 째 단 계 는 설치 프로그램의 코드 파일 을 사용자 컴퓨터 에 업데이트 합 니 다. 이 때 두 가지 방안 이 있 습 니 다.

설치 프로그램 을 직접 열 고 사용 자 는 설치 프로그램 안내 에 따라 조금 만 클릭 하면 설 치 를 완성 할 수 있 습 니 다.

압축 해제 설치 프로그램의 내용 을 사용자 본 컴퓨터

에 업데이트 합 니 다.
windows 에서 설치 프로그램 에는 업무 논리 가 있 습 니 다. 레 지 스 트 리 지, 마 운 트 해제 프로그램, 단축 키 등 이 있 기 때문에 우 리 는 첫 번 째 방안 을 선택 합 니 다.

const { shell, app } = require('electron');
shell.openItem('your installer exe path'); //           
app.quit(); //        

MacOS 에서 우리 가 발행 한 dmg 파일 은 사실 업무 논리 가 없 기 때문에 방안 2 를 사용 하여 .app 디 렉 터 리 를 직접 압축 해제 한 다음 /Applications 디 렉 터 리 로 복사 하면 됩 니 다.MacOS 에서 dmg 파일 의 압축 을 풀 려 면 hdiutil 을 사용 할 수 있 습 니 다.

const cp = require('child_progress');
const path = require('path');
const fs = require('fs-extra');

//        dmg  ，    .app    Test
const installerPath = '/your_installer.dmg'; 

//   hdiutil   dmg      ，         /Volumes/your_installer
 cproc.execSync(`hdiutil attach ${installerPath} -nobrowse`, {
   stdio: ['ignore', 'ignore', 'ignore']
 });
 
 //      .app  
 fs.removeSync('/Applications/Test.app'); 
 
 //  Volumes    .app     /Applications ，    
 fs.copySync('/Volums/your_installer/Test.app', '/Applications');
 
 //     
 app.relaunch();
 app.quit();

마지막.
댓 글 에서 토론, 기술 교류 & 내 추 를 환영 합 니 다 - >[email protected]