Dock

Electron には macOS Dock 内のアプリアイコンを設定する API があります。 A macOS-only API exists to create a custom dock menu, but Electron also uses the app dock icon as the entry point for cross-platform features like recent documents and application progress.

カスタム Dock は、ユーザーが全てのアプリウインドウを開きたくないであろう作業のショートカット追加によく使われます。

ターミナルアプリのDockメニュー

Dockメニュー

To set your custom dock menu, you need to use the app.dock.setMenu API, which is only available on macOS.

docs/fiddles/features/macos-dock-menu (33.2.1)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>

Electron アプリケーションの起動後、アプリケーションのアイコンを右クリックしてみましょう。先ほど定義したカスタムメニューが表示されるはずです。