单击电子自动更新

Question

I'm trying to make my electron app auto-updatable, and after searching on google I found nice guide that works. The only problem is that I want to create a button for when update is downloaded so that the user can decide when he wants to update and restart the app. So far I was able to put this code together

renderer.js

const electron = require('electron')
const ipcRenderer = electron.ipcRenderer

let lastMsgId = 0

window.quitAndInstall = function () {
  electron.remote.autoUpdater.quitAndInstall()
}

ipcRenderer.on('console', (event, consoleMsg) => {
  console.log(consoleMsg)
})

ipcRenderer.on('message', (event, data) => {
  showMessage(data.msg, data.hide, data.replaceAll)
})

function showMessage(message, hide = true, replaceAll = false) {
  const messagesContainer = document.querySelector('.messages-container')
  const msgId = lastMsgId++ + 1
  const msgTemplate = `<div id="${msgId}" class="alert alert-info alert-info-message animated fadeIn">${message}</div>`

  if (replaceAll) {
    messagesContainer.innerHTML = msgTemplate
  } else {
    messagesContainer.insertAdjacentHTML('afterbegin', msgTemplate)
  }

  if (hide) {
    setTimeout(() => {
      const msgEl = document.getElementById(msgId)
      msgEl.classList.remove('fadeIn')
      msgEl.classList.add('fadeOut')
    }, 4000)
  }
}

and this is my index.js where messages are storred

const electron = require('electron');
const {autoUpdater} = require('electron-updater');
const log = require('electron-log');
const appVersion = require('./package.json').version

// configure logging
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';
log.info('App starting...');

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1020,
    height: 800,
  });
  mainWindow.loadURL('file://' +__dirname + '/public/index.html');

  // Open the DevTools.
  //mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    app.quit();
});

app.on('activate', function() {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

//-------------------------------------------------------------------
// Auto updates
//-------------------------------------------------------------------
const sendStatusToWindow = (text) => {
  log.info(text);
  if (mainWindow) {
    mainWindow.webContents.send('console', `App version: ${appVersion}`)
    mainWindow.webContents.send('message', { msg: `App version: ${appVersion}` })
  }
};

autoUpdater.on('error', (ev, err) => {
  mainWindow.webContents.send('message', { msg: `Error: ${err}` })
})

autoUpdater.once('checking-for-update', (ev, err) => {
  mainWindow.webContents.send('message', { msg: 'Checking for updates' })
})

autoUpdater.once('update-available', (ev, err) => {
  mainWindow.webContents.send('message', { msg: 'Update available. Downloading ⌛️', hide: false })
})

autoUpdater.once('update-not-available', (ev, err) => {
  mainWindow.webContents.send('message', { msg: 'Update not available' })
})

autoUpdater.once('update-downloaded', (ev, err) => {
  const msg = 'Update downloaded - <button onclick="quitAndInstall()">Restart</button>'
  mainWindow.webContents.send('message', { msg, hide: false, replaceAll: true })
})

autoUpdater.checkForUpdates()

As you can see I added a button to call for function but it doesnt work. When I press the button nothing happens. If I remove button and just say auto.updater.quitAndInstall() it works. It auto close window and install new version. What am I missing?

Answer 1

I think it's that electron.remote.autoUpdater.quitAndInstall() doesn't work when run in the renderer.

In the docs it doesn't say anything against running it in the renderer process but I think sending a message back to the main process to run the quitAndInstall function would work.

Inside of the quitAndInstall function put this instead:

ipcRenderer.send('asynchronous-message', 'quitAndInstall');

Then in the main process put:

electron.ipcMain.on('asynchronous-message', function (evt, message) {
    if (message == 'quitAndInstall') {
        autoUpdater.quitAndInstall();
    }
});