My electron app has a system tray menu and everything is working as is except when I right click the icon in the system tray to fully exit the application to kill the process. The system doesn't do anything.
I am trying to fully kill the process if a user does not want the application to run.
I've tried putting "app.quit()" as mentioned in the title however, the application doesn't do anything
function createWindow () {
// Create the browser window.
win = new BrowserWindow({ width: 350, height: 550, resizable: true})
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
//position the electron window
var positioner = new Positioner(win)
positioner.move('bottomRight')
//logo for the task bar
win.setIcon('logo/logo.png');
win.on('minimize',function(event) {
event.preventDefault();
win.hide();
});
//clicking 'x' will close the app, but the app will still run in system tray (intended)
win.on('close', function(event) {
event.preventDefault();
win.hide();
})
}
//function to show/hide app when right clicking on the system tray and selecting "show/hide"
function toggleWindow() {
if (win.isVisible()) {
win.webContents.send('setVisible', false);
setTimeout(function () {
win.hide();
}, 300);
}
else {
win.show();
win.webContents.send('setVisible', true);
}
}
/**
* setting bottom right tray menu icon
* added left/right click events for system tray
*/
let tray = null
app.on('ready', () => {
tray = new Tray(path.join(__dirname, '../logo/tray_logo.png'))
tray.on('click', function handleClicked () {
toggleWindow();
})
const contextMenu = Menu.buildFromTemplate([
{ label: 'Show/Hide', type: 'normal', click: function () { toggleWindow(); } },
{ label: 'Exit', type: 'normal', click: function() { } } //exit is not working. I've tried app.quit();
])
tray.setToolTip('Activity')
tray.setContextMenu(contextMenu)
})
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
Related
Is there a way to let the program remember which URL was open when the user closed the program? For example if the user closes the application, the last URL gets added to the loadURL. The program is being used for users that only can interact with touchscreen and cant leave the specific site. I am using windows 10 and the newest version of electron.
// Modules to control application life and create native browser window.
const { app, BrowserWindow, Menu } = require("electron");
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame: false,
webPreferences: {
preload: `${__dirname}/preload.js`
}
});
// The loadURL that loads if you start up the application.
mainWindow.loadURL("https://google.com");
// Emitted when the window is closed.
mainWindow.on("closed", function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
}
// The toggleFullScreen function stated in the createMainMenu function.
function toggleFullscreen() {
if (mainWindow.isFullScreen()) {
mainWindow.setFullScreen(false);
} else {
mainWindow.setFullScreen(true);
}
}
function createMainMenu() {
const template = [
{
label: "Options",
submenu:
[
{
label: "Quit",
accelerator: "CmdOrCtrl+Q",
click() {
app.quit();
}
},
{
label: 'Toggle full screen',
accelerator: 'CmdOrCtrl+F',
click: () => {
toggleFullscreen();
}
},
{
label: 'Toggle developer tools',
accelerator: 'CmdOrCtrl+I',
click(item, focusedWindow){
focusedWindow.toggleDevTools();
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", () => {
createWindow();
createMainMenu();
});
// Quit when all windows are closed.
app.on("window-all-closed", function() {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q.
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", function() {
// On macOS 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();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
You have two options.
First, each time the URL changes, use LocalStorage in the renderer process. It will work just like in a web app.
Second, each the URL changes, have it send a message back to the main process, and have it write that to a local file. getPath('appData') can be used to get the OS-specific directory of where settings files can be written.
When I build my electron app with this plugin, all I get when installing the package is a blank, white, screen. I've configured the window to open dev tools in the built version, but when I look at the inspect menu, the only content on the page are the <html>, <head> and <body> tags, and there are no errors; the console is completely empty:
Elements:
Console:
I've looked just about everywhere online, but none of the solutions there worked.
I have tried changing the router mode from history to hash and also running vue invoke electron-builder, but they didn't help.
From what I can tell, this is failing:
win.loadURL('app://index.html')
because the path is incorrect. But I don't know if that's the case or if it's something else, since there are no errors reported.
Here's my background.js file:
'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1500,
height: 845,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: true,
enableRemoteModule: true
}
})
win.removeMenu()
win.webContents.openDevTools();
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
// if (!process.env.IS_TEST) win.webContents.openDevTools();
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://index.html')
}
win.once('ready-to-show', () => {
win.show();
})
win.on('closed', () => {
win = null
})
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS 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 (win === null) {
createWindow()
}
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
How can I fix this problem?
I found that solution is to change router mode from "history" to "hash". So in router config set:
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
Problem solution source
So after more Googling, I stumbled upon this site which suggested to do this:
Replace your default win.loadURL() (which might look like this:
win.loadURL(formatUrl({
pathname: path.join(__dirname, 'index.html');,
protocol: 'file',
slashes: true
}))
or it could be different; it doesn't matter), with this:
win.loadURL(path.join(__dirname, 'index.html'));
Basically, the difference is that this just removes the formatUrl which seems to screw things up.
I replaced mine, which was:
win.loadURL("app://./index.html");
with this, and it works fine now.
Also make sure you don't delete createProtocol('app') if that is there too, (it was a few lines above win.loadUrl()), because you could break your app :).
if you are using vue-router, make sure to set it on "hash mode".
source: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html
I have no idea what's going on, to be honest.
I've been keeping an eye to the icon and it just vanishes after a few minutes. No, it does not go to the arrow near the clock:
This is my icon showing up (the explosion in red):
I don't know how to debug if the icon is there but empty or if there's an event triggering it to hide, or if the tray process closes itself because of a bug. Nothing happens in the console or my app.
Could someone please help? Below is my whole index.js:
const {app, BrowserWindow, Tray, Menu} = require('electron');
const path = require('path');
var win = '',
iconpath = path.join(__dirname, '/libs/img/icon.ico');
// Create the browser window
function createWindow () {
// BrowserWindow size
win = new BrowserWindow({
width: 800,
height: 720,
webPreferences: {
nodeIntegration: true
}
});
// tray menu
var contextMenu = Menu.buildFromTemplate([
{
label: 'Show app', click: function () {
win.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true;
app.quit();
}
}
]);
// Creates tray menu with tray icon
var appIcon = new Tray(iconpath);
// Define menu
appIcon.setContextMenu(contextMenu);
win.on('close', function () {
app.isQuiting = true;
app.quit();
});
// Load the index.html of the app
win.loadFile('./view/index.html');
}
app.on('ready', createWindow);
This is a well-known problem related to garbage collection, mentioned in the Electron FAQ page:
My app's window/tray disappeared after a few minutes.
So, a quick fix is to move up the declaration of the appIcon variable out of the createWindow function, next to the win variable for instance:
const {app, BrowserWindow, Tray, Menu} = require('electron');
const path = require('path');
var win = '',
appIcon = null,
iconpath = path.join(__dirname, '/libs/img/icon.ico');
// Create the browser window
function createWindow () {
// BrowserWindow size
win = new BrowserWindow({
width: 800,
height: 720,
webPreferences: {
nodeIntegration: true
}
});
// tray menu
var contextMenu = Menu.buildFromTemplate([
{
label: 'Show app', click: function () {
win.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true;
app.quit();
}
}
]);
// Creates tray menu with tray icon
appIcon = new Tray(iconpath);
// Define menu
appIcon.setContextMenu(contextMenu);
win.on('close', function () {
app.isQuiting = true;
app.quit();
});
// Load the index.html of the app
win.loadFile('./view/index.html');
}
app.on('ready', createWindow);
I was having the same problem, but I got the solution for this.
This happens when your tray variable which is used to store the tray gets garbage collected.
You can get rid of this just by making the variable global.
In your case create appIcon variable out of the createWindow function like this:
let appIcon = null;
and then assign tray object like this:
appIcon = new Tray(iconpath);
ref: https://www.electronjs.org/docs/faq#my-apps-tray-disappeared-after-a-few-minutes
I'm trying to make an Electron app that runs on system tray, once the tray icon is clicked, the app window will appears.
I tested it on linux, windows and mac, on windows and mac it works perfectly, when I click the tray icon, the app window appears but on linux, when I click the tray icon a context menu appears (even tough i haven't set it) with the app name and the app window only appears if I click on the app name.
That's how I made the tray
let mainWindow
let tray = null;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 500,
skipTaskbar: true,
frame: false,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.setMenu(null)
mainWindow.hide();
tray = new Tray("./assets/icon#2x.png");
tray.on('click', () => {
mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
})
mainWindow.on('show', () => {
tray.setHighlightMode('always')
const pos = tray.getBounds()
mainWindow.setPosition(pos.x - 195, pos.y + 30);
})
mainWindow.on('hide', () => {
tray.setHighlightMode('never')
})
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {
mainWindow = null
})
}
I want it to works how it works on windows and mac, when I click the tray icon, the app window appears, someone knows how to do it? Thanks!
just change your tray method from
tray.setHighlightMode()
to
tray.setToolTip()
this my code to prevent close win
win.on('show', () => {
//tray.setHighlightMode('always');
tray.setToolTip("Server Started");
});
win.on('hide', () => {
//tray.popUpContextMenu();
tray.setToolTip("Server Started");
});
This is an open issue with the electron project, there is nothing wrong with your code.
https://github.com/electron/electron/issues/14941
I have been looking for Electron app events for when the application is shown or hidden. I see in the docs that there is 'browser-window-blur' and 'browser-window-focus' but those do not do what I want.
I would like to know when the user has switched to another application or switched back to my app. The above events get triggered if the user switches between browser windows – including the "developer's tools" window.
The code in main.js
app.on('browser-window-focus', () => {
if (mainWindow) {
console.log('browser-window-focus');
mainWindow.webContents.send('projectMsg', { "event": "focus" });
}
});
app.on('browser-window-blur', () => {
console.log('browser-window-blur');
if (mainWindow) {
mainWindow.webContents.send('projectMsg', { "event": "blur" });
}
});
It seems to me that it works exactly as you described, so maybe the requirements are different.
This code
const {app, BrowserWindow} = require('electron')
app.on('browser-window-focus', (event, win) => {
console.log('browser-window-focus', win.webContents.id)
})
app.on('browser-window-blur', (event, win) => {
if (win.webContents.isDevToolsFocused()) {
console.log('Ignore this case')
} else {
console.log('browser-window-blur', win.webContents.id)
}
})
app.once('ready', () => {
new BrowserWindow()
new BrowserWindow().webContents.openDevTools({detach: true})
})
works the following way (in 3.0.3) given that nothing is focused initially:
Clicking on window 1 prints browser-window-focus 1
Clicking on window 2 prints browser-window-blur 1 browser-window-focus 2
Clicking on devtools window prints browser-window-blur 2 Ignore this case
So as far as I see devtool is not included in these events, windows are getting blurred for any other window focused (including devtool)
There is also show and hide, though you have to explicitly show/hide the app with win.show() and win.hide() to trigger these events.
Check out of these BrowserWindow's events:
Event: 'blur': Emitted when the window loses focus.
Event: 'show': Emitted when the window is shown.
For example:
app.once('ready', () => {
let mainWindow = new BrowserWindow({show: false}) //Create main window
mainWindow.on('show', () => {
//Do something
})
})
Hope this help.