Electron을 이용한 데스크탑 앱 시작시 각종 설정

0. 시작하기

- electron starter로 시작하면 되긴하나 나는 개발 라이브러리를 vue를 쓰기위해 electron-vue로 시작을 했다

- electron starter : https://github.com/electron/electron-quick-start

- electron vue : https://github.com/SimulatedGREG/electron-vue

1. electron vue 설치

- 자세한건 공식문서를 참고

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

cd my-project

yarn # or npm install

yarn run dev # or npm run dev

2. 싱글인스턴스 설정

- 기본적으로 1개의 앱만 실행하기 위해 설정

- File : src/main/index.js

//File : src/main/index.js
import {
    app
} from 'electron';
 
 
let mainWindow;
const gotTheLock = app.requestSingleInstanceLock()
 
if (!gotTheLock) {
    app.quit();
    app.exit();
} else {
 
    //두번째 앱실행시 이벤트 발생
    app.on('second-instance', (event, commandLine, workingDirectory) => {
        if (mainWindow) {
            if (mainWindow.isMinimized()) {
                mainWindow.restore();
            } else if (!win.isVisible()) {
                mainWindow.show();
            }
            mainWindow.focus();
        }
    });
 
    //처음 실행시
    app.on('ready', function() {
        mainWindow = new BrowserWindow({
            height: 563,
            useContentSize: true,
            width: 1000
        });
    });
     
}
 

3. BrowserWindow와 Main과의 통신

- ipcMain, ipcRenderer를 이용

- File : src/main/index.js

//File : src/main/index.js
import {
    app,
    ipcMain
} from 'electron';
 
 
let mainWindow;
let contents;
 
//처음 실행시
app.on('ready', function() {
    mainWindow = new BrowserWindow({
        height: 563,
        useContentSize: true,
        width: 1000
    });
    contents = mainWindow.webContents;
    contents.openDevTools()
});
 
//BrowserWindow으로부터 받는 부분
ipcMain.on("update-check", (event, arg) => {
 
    //BrowserWindow에게 보내기
    contents.send('updater-message', {
        msg: "ok"
    });
});

- File : src/renderer/components/LandingPage.vue 

//vue script중 받는 부분만 표시했음
 
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('updater-message', function(event, text) {
    console.log('updater-message', event, text);
});
ipcRenderer.send('update-check');
 

ㅌㅌㅌㅌㅌㅌㅌ

4. Tray 표시

- 윈도우기준 우측 하단 아이콘

- File : src/main/index.js

import {
    Tray,
    Menu
} from 'electron';
 
function createTray() {
 
    //메인 BrowserWindow에서 닫기를 누를시 히든처리가 선행되어야함.
    mainWindow.on('close', (event) => {
        event.preventDefault();
        mainWindow.hide();
    });
 
 
 
    const tray = new Tray(path.join(__static, "favicon08.ico"));
    tray.on('click', () => {
        //mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
        mainWindow.show();
    })
    var contextMenu = Menu.buildFromTemplate([{
        label: `v${app.getVersion()}`
    }, {
        label: 'Close',
        click: function() {
            mainWindow.close();
            app.quit();
            app.exit();
        }
    }])
    tray.setContextMenu(contextMenu)
}

5. 자동업데이트

- electron-updater를 이용

- File : package.json : 

- sciprts트리 밑에 publish 추가하여 npm run publish 일때 s3업로드 수행

- build트리 밑에 publish 추가하여 작성, s3 or github or homepage url, 자세한건 문서참고

- s3이용시 환경변수에 aws key를 등록 필수

- win 64, 32 bit 지원시 아래 추가 win에 target 추가 해주어야 함

{
    .....,
    "scripts":
    {
        "publish": "node .electron-vue/build.js && electron-builder --publish always"
    },
    "build":
    {
        "publish":
        {
            "provider": "s3",
            "bucket": "bucketName",
            "acl": "public-read"
        },
        "win":
        {
            "target": [
            {
                "target": "nsis",
                "arch": [
                    "x64",
                    "ia32"
                ]
            }],
            "icon": "build/icons/icon.ico"
        },
        ......
    }
}

- File : src/main/index.js

import {
    app,
    dialog,
} from 'electron';
 
import {
    autoUpdater
} from 'electron-updater';
 
if (process.env.NODE_ENV !== 'production') {
    //개발환경일경우 설정파일이 없어서 오류 index.js와 같은 폴더에 앱업데이트 설정을 넣어둬 해결
    autoUpdater.updateConfigPath = path.join(__dirname, 'dev-app-update.yml');
} 
 
app.on('ready', function() {
    //운영환경일때만 업데이트 하도록 해도 무방
    //if (process.env.NODE_ENV !== 'production') 
    autoUpdater.checkForUpdates();
});
 
 
autoUpdater.on('checking-for-update', function() {
    console.log('Checking-for-update');
});
autoUpdater.on('error', function(error) {
    console.error('error', error);
});
autoUpdater.on('download-progress', function(bytesPerSecond, percent, total, transferred) {
    console.log(`${bytesPerSecond}, ${percent}, ${total}, ${transferred}`);
});
//다운로드 완료되면 업데이트
autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName) {
    console.log('update-downloaded');
    const dialogOpts = {
        type: 'info',
        buttons: ['재시작', '종료'],
        title: 'Application Update',
        message: process.platform === 'win32' ? releaseNotes : releaseName,
        detail: '새로운 버전이 다운로드 되었습니다. 애플리케이션을 재시작하여 업데이트를 적용해 주세요.'
    };
    dialog.showMessageBox(dialogOpts, (response) => {
        if (response === 0) {
            autoUpdater.quitAndInstall();
        } else {
            app.quit();
            app.exit();
        }
    });
});
//신규 업로드가 있을경우 === 구버전
autoUpdater.on('update-available', function() {
    console.log('A new update is available');
});
 
//신규 업로드가 없을경우 === 최신버전
autoUpdater.on('update-not-available', function() {
    console.log('update-not-available');
});

6. 설정 끝 화면개발 시작

- .........