When Electron's window.setTitle keeps you driving crazy

As a reaction on my initial post about Electron, Ingo Richter came up with a comment on setting the window’s title. He described that he get errors when trying to set the window title to the app’s name.

browser-window is exposing the setTitle function and app is exposing the getName function. So my first impression was “well, that should be easy to realize”, but there is on common pitfall that I realized when trying to set the title of the window – which I’d like to share with you.

Take the following HTML as given:

<html>
  <head>
    <title>bar</title>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

moreover, you’re now trying to set the window’s title from within the main process like this

let app = require('app'),
    browserWindow = require('browser-window');

// .... stripped the unimportant part here
app.on('ready', () => {

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });

  // assume that app.getName() returns foo
  mainWindow.setTitle(app.getName());
  mainWindow.loadUrl('file://' + __dirname + '/../browser/index.html');

See the comment in the snippet, so we’re assuming that app.getName() returns foo so you might expect that the app shows foo as title, but when running the sample the title remains bar!

After reviewing my initial part of code, I thought “Well let’s call mainWindow.setTitle(app.getName()) after loading the website… However, changing the order of these two lines didn’t change anything. The MainWindow’s title remained bar.

The root cause is that loading a page happens async, so there are two ways how to fix that, a dirty (sync) way and the correct (async) way.

Get it working for sync code

HACK a dirty little hack how to get that working in a few secs is to delete the <title>bar</title> from my HTML file. When now title node is present, foo will not be replaced after loading the page. See the dirty implementation here on GitHub

Get it working the right (async) way

browser-window isn’t exposing an event when a page has loaded. However, when revisiting the inner WebContents instance (exposed by the webContents property, you’ll find the did-finish-load event which can be used to safely set the window’s title after the page is being loaded.

change the script to the following to get it working

// ...
app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });

  mainWindow.loadUrl('file://' + __dirname + '/../browser/index.html');

  mainWindow.webContents.on('did-finish-load',() => {
      mainWindow.setTitle(app.getTitle());
  });

});

Also, the title of your window will be set to your app’s name. See the correct (async) implementation right here on GitHub

I think this post was worth writing because it can save other electron developers a few WTFs when building their electron apps. 🙂