javascript - node - electron js tutorial

Electron.js ¿Cómo minimizar/cerrar la ventana a la bandeja del sistema y restaurar la ventana desde la bandeja?

Question

Quiero que mi aplicación Electron.js viva en la bandeja del sistema y cada vez que el usuario quiera hacer algo que pueda restaurar desde la bandeja del sistema, haga algo y lo minimice / vuelva a cerrar en la bandeja del sistema. ¿Cómo puedo hacer eso?

He visto la sección de la tray en la documentación, pero no ayuda mucho para lograr lo que quiero.

Aquí está lo que tengo hasta ahora en el archivo main.js

var application = require(''app''),
    BrowserWindow = require(''browser-window''),
    Menu = require(''menu''), 
    Tray = require(''tray''); 
application.on(''ready'', function () {
    var mainWindow = new BrowserWindow({
        width: 650,
        height: 450,
        ''min-width'': 500,
        ''min-height'': 200,
        ''accept-first-mouse'': true,
        // ''title-bar-style'': ''hidden'',
        icon:''./icon.png''
    });
    mainWindow.loadUrl(''file://'' + __dirname + ''/src/index.html'');
    mainWindow.on(''closed'', function () {
        mainWindow = null;
    });
    mainWindow.setMenu(null);

    var appIcon = null;
    appIcon = new Tray(''./icon-resized.png'');
    var contextMenu = Menu.buildFromTemplate([
        { label: ''Restore'', type: ''radio'' }
    ]);
    appIcon.setToolTip(''Electron.js App'');
    appIcon.setContextMenu(contextMenu);
});

ACTUALIZAR:

Encontré este repositorio de menubar , pero no funcionará como se espera en Linux.

Answer 1

Actualicé el código con un escenario si desea mostrar el ícono en la bandeja de su sistema todo el tiempo hasta que no cierre la aplicación

var { app, BrowserWindow, Tray, Menu } = require(''electron'')
var path = require(''path'')
var url = require(''url'')
var iconpath = path.join(__dirname, ''user.ico'') // path of y
var win
function createWindow() {
    win = new BrowserWindow({ width: 600, height: 600, icon: iconpath })

    win.loadURL(url.format({
        pathname: path.join(__dirname, ''index.html''),
    }))

    var appIcon = new Tray(iconpath)

    var contextMenu = Menu.buildFromTemplate([
        {
            label: ''Show App'', click: function () {
                win.show()
            }
        },
        {
            label: ''Quit'', click: function () {
                app.isQuiting = true
                app.quit()
            }
        }
    ])

    appIcon.setContextMenu(contextMenu)

    win.on(''close'', function (event) {
        win = null
    })

    win.on(''minimize'', function (event) {
        event.preventDefault()
        win.hide()
    })

    win.on(''show'', function () {
        appIcon.setHighlightMode(''always'')
    })

}

app.on(''ready'', createWindow)

Answer 2

Además de las respuestas anteriores, vale la pena establecer el indicador isQuiting en la devolución de llamada de la aplicación before-quit , también. De esta manera, la aplicación se cerrará correctamente si el sistema operativo o el usuario lo solicita de alguna otra manera, por ejemplo, a través del comando quit de la barra de tareas del Dock de Macos. Completa fragmento de código fácil de escribir:

import {app, BrowserWindow, Tray, Menu} from ''electron''; import * as path from ''path''; let window; let isQuiting; let tray; app.on(''before-quit'', function () { isQuiting = true; }); app.on(''ready'', () => { tray = new Tray(path.join(__dirname, ''tray.png'')); tray.setContextMenu(Menu.buildFromTemplate([ { label: ''Show App'', click: function () { window.show(); } }, { label: ''Quit'', click: function () { isQuiting = true; app.quit(); } } ])); window = new BrowserWindow({ width: 850, height: 450, show: false, }); window.on(''close'', function (event) { if (!isQuiting) { event.preventDefault(); window.hide(); event.returnValue = false; } }); });

Answer 3

De hecho, lo descubrí hace mucho tiempo, pero para las personas que se encuentran con el mismo problema aquí es una forma en la que podría reducir al mínimo la tray y restaurar desde la tray . El truco es atrapar el close y minimize eventos.

var BrowserWindow = require(''browser-window''),

var mainWindow = new BrowserWindow({
    width: 850,
    height: 450,
    title: "TEST",
    icon:''./icon.png''
});

mainWindow.on(''minimize'',function(event){
    event.preventDefault();
    mainWindow.hide();
});

mainWindow.on(''close'', function (event) {
    if(!application.isQuiting){
        event.preventDefault();
        mainWindow.hide();
    }

    return false;
});

y restaurando desde la Tray

var contextMenu = Menu.buildFromTemplate([
    { label: ''Show App'', click:  function(){
        mainWindow.show();
    } },
    { label: ''Quit'', click:  function(){
        application.isQuiting = true;
        application.quit();
    } }
]);

Answer 4

Trate de minimizar el evento en lugar de ocultar.

var BrowserWindow = require(''browser-window''),

var mainWindow = new BrowserWindow({
    width: 850,
    height: 450,
    title: "TEST",
    icon:''./icon.png''
});

mainWindow.on(''minimize'',function(event){
    event.preventDefault();
    mainWindow.minimize();
});

mainWindow.on(''close'', function (event) {

  event.preventDefault();
  mainWindow.minimize();
    return false;
});

Esto funcionó para mí. hide() estaba cerrando la ventana.