Dock

Electron a des APIs pour configurer l'icône de l'application dans le macOS Dock. Une API sur macOS existe pour créer un menu de dock personnalisé, mais Electron utilise également l'icône de l'application dock comme point d'entrée pour les fonctionnalités multi-plateformes telles que les documents récents et la progression de l'application.

Le dock personnalisé est généralement utilisé pour ajouter des raccourcis aux tâches pour lesquelles l'utilisateur ne voudrait pas ouvrir toute la fenêtre de l'application.

Menu du Dock de Terminal.app :

Menu Dock

Pour configurer votre menu de dock personnalisé, vous devez utiliser l'API app.dock.setMenu , qui n'est disponible que sur macOS.

docs/fiddles/features/macos-dock-menu (28.0.0)Open in Fiddle

main.js
index.html

const { app, BrowserWindow, Menu } = require('electron/main')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

const dockMenu = Menu.buildFromTemplate([
  {
    label: 'New Window',
    click () { console.log('New Window') }
  }, {
    label: 'New Window with Settings',
    submenu: [
      { label: 'Basic' },
      { label: 'Pro' }
    ]
  },
  { label: 'New Command...' }
])

app.whenReady().then(() => {
  if (process.platform === 'darwin') {
    app.dock.setMenu(dockMenu)
  }
}).then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>Right click the dock icon to see the custom menu options.</p>
</body>
</html>

Après avoir lancé l'application Electron, faites un clic droit sur l'icône de l'application. Vous devriez voir le menu personnalisé que vous venez de définir :