Значок электронного лотка не отображается после того, как я упаковал

Question

У меня есть приложение Electron, которое показывает иконку в трее, которая при нажатии показывает мое главное окно.прекрасно работает в режиме разработки, но когда я упаковываю его (в файл .app) и дважды щелкаю по файлу .app, ни одно из меню не отображается, и, что более важно, значок не отображается, и поэтомупользователь никогда не увидит мое приложение.

Я использую электронную React / Redux Boilerplate (https://github.com/chentsulin/electron-react-boilerplate)

вот мой файл main.dev.js - любые предположения приветствуются:

import { app, BrowserWindow, Tray } from 'electron';
import MenuBuilder from './menu';

let mainWindow = null;
let tray;

if (process.env.NODE_ENV === 'production') {
  const sourceMapSupport = require('source-map-support');
  sourceMapSupport.install();
}

if (
  process.env.NODE_ENV === 'development' ||
  process.env.DEBUG_PROD === 'true'
) {
  require('electron-debug')();
  const path = require('path');
  const p = path.join(__dirname, '..', 'app', 'node_modules');
  require('module').globalPaths.push(p);
}

const installExtensions = async () => {
  const installer = require('electron-devtools-installer');
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];

  return Promise.all(
    extensions.map(name => installer.default(installer[name], forceDownload))
  ).catch(console.error);
};

/**
 * Add event listeners...
 */

app.on('window-all-closed', () => {
  // Respect the OSX convention of having the application in memory even
  // after all windows have been closed
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

const getWindowPosition = () => {
  const windowBounds = mainWindow.getBounds();
  const trayBounds = tray.getBounds();

  // Center window horizontally below the tray icon
  const x = Math.round(
    trayBounds.x + trayBounds.width / 2 - windowBounds.width / 2
  );

  // Position window 4 pixels vertically below the tray icon
  const y = Math.round(trayBounds.y + trayBounds.height + 4);

  return { x, y };
};

function createTray() {
  const path = require('path');
  const iconPath = path.join(__dirname, 'confluence.png');
  tray = new Tray(iconPath);
  tray.setToolTip('Confluence Helper');
  tray.on('click', event => {
    toggleWindow();

    // Show devtools when command clicked
    if (mainWindow.isVisible() && process.defaultApp && event.metaKey) {
      mainWindow.openDevTools({ mode: 'detach' });
    }
  });
}
const toggleWindow = () => {
  if (mainWindow.isVisible()) {
    mainWindow.hide();
  } else {
    showWindow();
  }
};

const showWindow = () => {
  const position = getWindowPosition();
  mainWindow.setPosition(position.x, position.y, false);
  mainWindow.show();
  mainWindow.focus();
};

app.on('ready', async () => {
  if (
    process.env.NODE_ENV === 'development' ||
    process.env.DEBUG_PROD === 'true'
  ) {
    await installExtensions();
  }

  mainWindow = new BrowserWindow({
    show: false,
    width: 500,
    height: 728,
    icon: `${__dirname}/confluence.icns`
  });

  mainWindow.loadURL(`file://${__dirname}/app.html`);

  createTray();
  // @TODO: Use 'ready-to-show' event
  //        https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event
  mainWindow.webContents.on('did-finish-load', () => {
    if (!mainWindow) {
      throw new Error('"mainWindow" is not defined');
    }
    if (process.env.START_MINIMIZED) {
      mainWindow.minimize();
    }
  });
  mainWindow.on('blur', () => {
    mainWindow.hide();
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();
});

Answer 1

Когда я щелкнул правой кнопкой мыши по файлу .app и выбрал «Показать содержимое пакета» , я увидел папку Contents / Mac, и внутри нее находился исполняемый файл Unix, который при запуске вкомандная строка показала мне отклоненное обещание, которое было связано с иконкой в ​​трее - я делал path.join(__dirname,'icon.png'), что в итоге оказалось неправильным путем (console.log(path.join(__dirname,'icon.png')) к спасению!

Когда я изменил эток абсолютному пути ( 'users / myname / app / icon.png' ) и восстановленному, это сработало!

Однако, очевидно, это не сработает на компьютерах ДРУГИХ людей - оно сработалоработать на моем компьютере (тм), но это не достаточно хорошо.

Чтобы ДЕЙСТВИТЕЛЬНО это исправить, я, возможно, перешел за борт - но это то, что сработало для меня - создав NativeImage ,используя path.join (__dirname, 'resources', 'icon.png') в том, что я передал в это. Я также добавил ресурсы в build / files в package.json.

Если вы столкнетесь с такой проблемой, я бы порекомендовал сделать то же, что и я ( show package contents и т. д.), чтобы увидеть проблему в упакованном электронном приложении.