System Tray Guide

import { Application } from '@webviewjs/webview';

const app = new Application();

app.whenReady().then(() => {
  // Create tray icon here
});

app.run();

import { Application } from '@webviewjs/webview';

const app = new Application();

const win = app.createBrowserWindow({
  title: 'Tray Example',
});

win.createWebview({
  html: '<h1>Hello!</h1>',
});

const size = 16;
const rgba = Buffer.alloc(size * size * 4);

for (let i = 0; i < rgba.length; i += 4) {
  rgba[i] = 70;
  rgba[i + 1] = 150;
  rgba[i + 2] = 240;
  rgba[i + 3] = 255;
}

let tray;

app.whenReady().then(() => {
  tray = app.createTrayIcon({
    icon: {
      data: rgba,
      width: size,
      height: size,
    },
    tooltip: 'My Application',
    menu: {
      items: [
        {
          id: 'show',
          label: 'Show window',
        },
        {
          role: 'separator',
        },
        {
          id: 'quit',
          label: 'Quit',
        },
      ],
    },
  });
});

app.on('custom-menu-click', ({ customMenuEvent }) => {
  switch (customMenuEvent.id) {
    case 'show':
      win.show();
      break;

    case 'quit':
      app.exit();
      break;
  }
});

app.run();

tray.on('click', () => {
  if (win.isVisible()) {
    win.hide();
  } else {
    win.show();
    win.focus();
  }
});

// `buffer` contains encoded PNG/JPEG/WebP/etc. bytes.
tray.setIcon(buffer);

tray.setIcon(rgba, width, height);

tray.setTooltip('Downloading updates...');

tray.setMenu({
  items: [
    {
      id: 'pause',
      label: 'Pause',
    },
    {
      id: 'quit',
      label: 'Quit',
    },
  ],
});

tray.on('click', (event) => {
  console.log(event.button);
});

tray.on('double-click', () => {
  win.show();
});

tray.on('enter', () => {
  console.log('Mouse entered');
});

tray.on('leave', () => {
  console.log('Mouse left');
});

app.on('custom-menu-click', ({ customMenuEvent }) => {
  console.log(customMenuEvent.id);
});

tray.setVisible(false);

// ...

tray.setVisible(true);

tray.dispose();