Electron.js Comment minimiser/fermer une fenêtre dans la barre d'état système et restaurer la fenêtre à partir de la barre d'état système ?

Question

Je veux que mon Electron.js Je souhaite que l'application vive dans la barre d'état système et que chaque fois que l'utilisateur veut faire quelque chose, il puisse la restaurer à partir de la barre d'état système et la minimiser/la fermer pour la ramener dans la barre d'état système. Comment puis-je faire cela ?

J'ai vu le tray de la documentation, mais cela ne m'aide pas beaucoup à obtenir ce que je veux.

Voici ce que j'ai obtenu jusqu'à présent sur le main.js archivo

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);
});

UPDATE :

J'ai trouvé ceci menubar mais il ne fonctionnera pas comme prévu sous linux.

Answer 1

J'ai trouvé la solution il y a longtemps, mais pour les personnes qui rencontrent le même problème, voici un moyen de réduire la taille de l'image à l'aide de la fonction de réduction. tray et la restauration de tray . L'astuce est d'attraper le close y minimize événements.

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;
});

et la restauration de Tray

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

Answer 2

Addition aux réponses ci-dessus - isQuiting le drapeau vaut la peine d'être placé à l'app' before-quit également. De cette façon, l'application sera fermée correctement si le système d'exploitation ou l'utilisateur le demande d'une autre manière, par exemple via la commande "Quitter la barre des tâches" de Macos. Extrait complet et convivial de Typescript :

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

J'ai mis à jour le code avec un scénario si vous voulez afficher l'icône sur votre barre d'état système tout le temps jusqu'à ce que vous ne quittez pas l'application.

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 4

Une meilleure façon que d'utiliser les drapeaux et pour ceux qui ne veulent pas changer le code de l'utilisateur. minimize comportement :

Il suffit normalement de cacher la fenêtre sur close événement utilisant mainWindow.hide()

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

puis appeler mainWIndow.destroy() pour forcer la fermeture de la fenêtre. Il garantit également l'exécution de la commande closed gestionnaire d'événements.

Desde la documentation :

En forçant la fermeture de la fenêtre, les événements unload et beforeunload ne seront pas émis pour la page web, et l'événement close ne sera pas non plus émis pour cette fenêtre, mais il garantit que l'événement closed sera émis.

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

Answer 5

Cette question a été étiquetée avec NW.js, et puisque toutes les autres réponses sont pour Electron, j'ai pensé que je pourrais montrer à quel point tout est plus facile dans NW.js. Il y a un dépôt de démonstration simple mis en place ici :

• https://github.com/nwutils/nw-tray-example

Il suffit de le télécharger et d'exécuter npm install && npm start .