プログラミングBlog

Electron タスクバーからアイコンが消える。

現象

Electronを起動後、数秒したらタスクバーからアイコンが消えてしまう。

f:id:Tokuty:20220126205940p:plain f:id:Tokuty:20220126205928p:plain

コントロールパネル>個人用設定>タスクバー>タスクバー設定のオーバーフロー

Electronアプリは存在しているがなぜかアイコンが消える。
f:id:Tokuty:20220126210404p:plain

タスクバーにトレイを生成する
new Tray('img/bookmark.png')

修正前のコード

const { app, Tray, BrowserWindow } = require('electron')

let tray = null

function createWindow () {
    const win = new BrowserWindow({
      width: 400,
      height: 300,
      webPreferences: {
        nodeIntegration: true,
      }
    })
  
    win.loadFile('view/index.html')

    console.log('createWindow');
   
    // タスクバーにトレイを生成する
    tray = new Tray('img/bookmark.png')
  }

// Electron初期化後の処理
app.whenReady().then(createWindow);

修正前はウィンドウとトレイを一緒に生成するようにしていた。

修正後のコード

const { app, Tray, BrowserWindow } = require('electron')

let tray = null

function createWindow () {
    const win = new BrowserWindow({
      width: 400,
      height: 300,
      webPreferences: {
        nodeIntegration: true,
      }
    })
  
    win.loadFile('view/index.html')

    console.log('createWindow');

  // タスクバーにトレイを生成する
    tray = new Tray('img/bookmark.png')
  }

function createTray(){
    // タスクバーにトレイを生成する   
    tray = new Tray('img/bookmark.png')

    const contextMenu = Menu.buildFromTemplate([
      { label: 'Item1', type: 'radio' },
      { label: 'Item2', type: 'radio' },
      { label: 'Item3', type: 'radio', checked: true },
      { label: 'Item4', type: 'radio' }
    ])

    tray.setToolTip('bookmark')
    tray.setContextMenu(contextMenu)

    console.log('createTray');
  }
  
// Electron初期化後の処理
app.whenReady().then(createWindow);

// アプリケーション初期化後の処理
app.on('ready', createTray);

修正後は、ウィンドウとトレイを一緒に生成していた箇所を、ウィンドウ生成後にトレイを生成するように修正。
無事にタスクバーからアイコンが消えないようになりました。
原因としてはElectronの初期処理ができていない状態でトレイを生成することで不具合が起こっていたみたいです。

検証

検証のため、isReady()イベントを使用。
このイベントは初期化が終了した場合はTrue、それ以外の場合Falseを返却してくれる。
app.isReady()

今度は修正前のコードを以下のコードに修正する。
無事タスクバーからアイコンが消えなくなったため、やはり初期化処理が上手くいっていなかった。

// Electron初期化後の処理
app.whenReady().then(createWindow);
if (app.isReady()) createWindow()
  else app.once('ready', createWindow)

参考サイト

www.electronjs.org www.electronjs.org www.youtube.com www.electronjs.org