Detect Electron in remote environment and hook code


#1

I’m familiarizing myself with Electron and I must say it is quite cool.

I’m looking to release a desktop version of a SPA (built on React.js), however, I don’t want to distribute the webapp code along with the Electron container. Easy enough:

mainWindow.loadURL('http://url.com');

What I’m wondering is if there’s a way to detect that my webapp is running in an electron shell, to customize functionality specific to that environment. Also, I’m wondering if it would be possible to “hook” Electron-only functions to enable more powerful functionality around the Electron app.

class Foo extends React.Component {
   // constructor, proptypes, etc.

  onClick() {
    if (window.__IS_ELECTRON__) {
      // do stuff
      callElectronOnlyFunction();
    }
  }

  render() {
    return (
      <div onClick={::this.onClick}>Click me!</div>
    );
  }

}

Is this a feasible approach (most of the extra functionality will be minor or inconsequential) or am I better off hooking up Squirrel, running an extra webserver to manage updates, and deploying to both web and Electron separately?

Thanks for your help.


#2

I don’t think it’s the best way of doing it, especially if your user has no internet connection, but you can use myBrowserWindow.webContents.executeJavaScript from your main.js to inject JS, either to set a global variable, or to fire off an event in the webpage.


#3

Thanks for that snippet – seems quite useful. If the user has no internet connection the app will not function due to its reliance on an external API. Still, I understand why this might not be the most sane way of handling Electron interop.