JoyLau's Blog

import $ from 'jquery';
import semver from 'semver';
import request from 'request';
import progress from 'request-progress';

//global.fs = require('fs');
//global.cp = require('child_process');
const fs = window.fs;
const cp = window.cp;
const electron = window.electron;
const {app, shell} = electron.remote;

state = {
    check: true,
    latest: {},
    // wait,download,install,error
    update: 'wait',
    downloadState: {}
};

// 检查更新
$.ajax({
    url: appConfig.updateCheckURL,
    timeout: 10000,
    type: 'GET',
    cache:false,
    success: function (data) {
        let latest = data[0];
        if(semver.satisfies(latest.version, '>' + app.getVersion())){
            if (latest.force) {
                that.updateVersion();
            }
        }
    },
    complete: function (XMLHttpRequest, status) {
        that.setState({
            check: false
        })
    }
});


updateVersion(){
    let that = this;
    const platform = osInfo.platform();
    try {
        const downloadUrl = platform === 'darwin' ? this.state.latest.download.dmg : platform === 'win32' ? this.state.latest.download.winSetup : '';
        if (downloadUrl === '') return;

        const downloadUrlArr = downloadUrl.split("/");

        const filename = downloadUrlArr[downloadUrlArr.length-1];

        const savePath = osInfo.tmpdir() + '/' + filename;

        const _request = request(downloadUrl);
        progress(_request, {
            // throttle: 2000,                    // Throttle the progress event to 2000ms, defaults to 1000ms
            // delay: 1000,                       // Only start to emit after 1000ms delay, defaults to 0ms
            // lengthHeader: 'x-transfer-length'  // Length header to use, defaults to content-length
        })
            .on('progress', function (state) {
                // The state is an object that looks like this:
                // {
                //     percent: 0.5,               // Overall percent (between 0 to 1)
                //     speed: 554732,              // The download speed in bytes/sec
                //     size: {
                //         total: 90044871,        // The total payload size in bytes
                //         transferred: 27610959   // The transferred payload size in bytes
                //     },
                //     time: {
                //         elapsed: 36.235,        // The total elapsed seconds since the start (3 decimals)
                //         remaining: 81.403       // The remaining seconds to finish (3 decimals)
                //     }
                // }
                that.setState({downloadState: state})
            })
            .on('error', function (err) {
                that.setState({
                    downloadState:{
                        error: true
                    }
                })
            })
            .on('end', function () {
                if (that.state.update === 'error') return;
                that.setState({
                    update: 'install',
                });

                setTimeout(function () {
                    if (platform === 'darwin'){
                        const appName = pjson.build.productName;
                        const appVersion = app.getVersion();
                        console.info(appName,appVersion);
                        // 挂载
                        cp.execSync(`hdiutil attach '${savePath}' -nobrowse`, {
                            stdio: ['ignore', 'ignore', 'ignore']
                        });

                        // 覆盖原 app
                        cp.execSync(`rm -rf '/Applications/${appName}.app' && cp -R '/Volumes/${appName} ${appVersion}/${appName}.app' '/Applications/${appName}.app'`);

                        // 卸载挂载的 dmg
                        cp.execSync(`hdiutil eject '/Volumes/${appName} ${appVersion}'`, {
                            stdio: ['ignore', 'ignore', 'ignore']
                        });

                        // 重启
                        app.relaunch();
                        app.quit();
                    }

                    if (platform === 'win32') {
                        shell.openItem(savePath);
                        setTimeout(function () {
                            app.quit();
                        },1500)
                    }
                },2000)
            })
            .pipe(fs.createWriteStream(savePath));

        that.setState({update:'download'});
    } catch (e) {
        console.info(e);
        that.setState({
            update: 'error',
        });
    }
}

app.setAsDefaultProtocolClient(PROTOCOL, process.execPath, [`${__dirname}`]);

let argv = process.argv;
if (argv[argv.length - 1].indexOf(PROTOCOL + "://") > -1) {
    //.....
}

app.on('second-instance', (event, commandLine, workingDirectory) => {
    // 当运行第二个实例时,主动对焦
    if (win) {
        if (win.isMinimized()) win.restore();
        win.focus();
        win.show();

        let message = handleArgv(commandLine);
        processSend(message);
    }
});

// macOS
app.on('open-url', (event, urlStr) => {
    if (win) {
        win.showInactive();
        let message = handleArgv(urlStr);
        processSend(message);
    } else {
        global.shareObject.message = handleArgv(urlStr);
        global.shareObject.isSend = true;
    }

});


function processSend(message) {
    global.shareObject.message = message;
    win.webContents.send('ch-1', 'send');
}

function handleArgv(argv) {
    let urlObj = [];
    if (Array.isArray(argv)) {
        urlObj = argv[argv.length - 1].replace(PROTOCOL + "://", "").split("_");
    } else {
        urlObj = argv.replace(PROTOCOL + "://", "").split("_");
    }
    return urlObj.length >= 2 ? {sessionId: urlObj[0], url: urlObj[1], macInfo: os.networkInterfaces()} : {};
}

let downloadURL = "http://xxxx";
window.location = "joy-security://xxxxxx_xxxxxxx";
setTimeout(function() {
  window.location = downloadURL;
},1000)

const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
    app.quit()
} else {
    app.on('ready', createWindow);

    app.on('window-all-closed', () => {
        app.quit();
    });

    app.on('activate', () => {
        if (win == null) {
            createWindow();
        }
    });
}

electronLocalshortcut.register(win, 'F12', function () {
    win.webContents.isDevToolsOpened() ? win.webContents.closeDevTools() : win.webContents.openDevTools();
});

electronLocalshortcut.register(win, 'F5', function () {
    win.reload();
});

const {ipcRenderer} = require('electron')
ipcRenderer.send('asynchronous-message', 'ping')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
     console.log(arg) // prints "pong"
})

const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')
});

win.webContents.send('ch-1', 'send');

webPreferences: {
    nodeIntegration: true, // 开启 node 功能
    preload: path.join(__dirname, './public/renderer.js')
}

global.electron = require('electron')

const electron = window.electron;
electron.xxxx

// 共享对象
global.shareObject = {
    osInfo: os
};

app.on('second-instance', (event, commandLine, workingDirectory) => {
    // 当运行第二个实例时,主动对焦
    if (win) {
        if (win.isMinimized()) win.restore();
        win.focus();
        win.show();
    }
});

// macOS
app.on('open-url', (event, urlStr) => {
    if (win) {
        win.showInactive();
    }
});

 if (app.isPackaged) {
    win.loadURL(`file://${__dirname}/build/index.html`);
} else {
    win.loadURL('http://localhost:3000');
}

entry: {
  index: [
    // Include an alternative client for WebpackDevServer. A client's job is to
    // connect to WebpackDevServer by a socket and get notified about changes.
    // When you save a file, the client will either apply hot updates (in case
    // of CSS changes), or refresh the page (in case of JS changes). When you
    // make a syntax error, this client will display a syntax error overlay.
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
    // Finally, this is your app's code:
    paths.appIndexJs,
    // We include the app code last so that if there is a runtime error during
    // initialization, it doesn't blow up the WebpackDevServer client, and
    // changing JS code would still trigger a refresh.
  ].filter(Boolean),
  update: [
    isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appSrc + '/update.js',
  ].filter(Boolean),
},

output: {
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/[name]bundle.js',
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      // We inferred the "public path" (such as / or /my-project) from homepage.
      // We use "/" in development.
      publicPath: publicPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, '/')
        : isEnvDevelopment &&
          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    },

new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            chunks: ["index"]
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),
      new HtmlWebpackPlugin(
          Object.assign(
              {},
              {
                inject: true,
                template: paths.appHtml,
                chunks: ["update"],
                filename: "update.html"
              },
              isEnvProduction
                  ? {
                    minify: {
                      removeComments: true,
                      collapseWhitespace: true,
                      removeRedundantAttributes: true,
                      useShortDoctype: true,
                      removeEmptyAttributes: true,
                      removeStyleLinkTypeAttributes: true,
                      keepClosingSlash: true,
                      minifyJS: true,
                      minifyCSS: true,
                      minifyURLs: true,
                    },
                  }
                  : undefined
          )
      ),

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Update from './page/Update';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Update />, document.getElementById('root'));
serviceWorker.register();

// new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),