2016-01-05 19:52:57 +08:00
|
|
|
# Electron FAQ
|
|
|
|
|
|
|
|
|
|
## When will Electron upgrade to latest Chrome?
|
|
|
|
|
|
|
|
|
|
The Chrome version of Electron is usually bumped within one or two weeks after
|
|
|
|
|
a new stable Chrome version gets released.
|
|
|
|
|
|
2016-03-16 09:37:04 -07:00
|
|
|
Also we only use stable channel of Chrome. If an important fix is in beta or dev
|
2016-01-05 19:52:57 +08:00
|
|
|
channel, we will back-port it.
|
|
|
|
|
|
|
|
|
|
## When will Electron upgrade to latest Node.js?
|
|
|
|
|
|
|
|
|
|
When a new version of Node.js gets released, we usually wait for about a month
|
|
|
|
|
before upgrading the one in Electron. So we can avoid getting affected by bugs
|
|
|
|
|
introduced in new Node.js versions, which happens very often.
|
|
|
|
|
|
|
|
|
|
New features of Node.js are usually brought by V8 upgrades, since Electron is
|
|
|
|
|
using the V8 shipped by Chrome browser, the shiny new JavaScript feature of a
|
|
|
|
|
new Node.js version is usually already in Electron.
|
|
|
|
|
|
2016-02-16 11:52:47 +08:00
|
|
|
## How to share data between web pages?
|
|
|
|
|
|
|
|
|
|
To share data between web pages (the renderer processes) the simplest way is to
|
|
|
|
|
use HTML5 APIs which are already available in browsers. Good candidates are
|
|
|
|
|
[Storage API][storage], [`localStorage`][local-storage],
|
|
|
|
|
[`sessionStorage`][session-storage], and [IndexedDB][indexed-db].
|
|
|
|
|
|
2016-03-16 09:37:04 -07:00
|
|
|
Or you can use the IPC system, which is specific to Electron, to store objects
|
2016-02-16 11:52:47 +08:00
|
|
|
in the main process as a global variable, and then to access them from the
|
|
|
|
|
renderers through the `remote` module:
|
2016-02-06 19:57:21 +01:00
|
|
|
|
|
|
|
|
```javascript
|
2016-02-16 11:52:47 +08:00
|
|
|
// In the main process.
|
|
|
|
|
global.sharedObject = {
|
|
|
|
|
someProperty: 'default value'
|
|
|
|
|
};
|
2016-02-06 19:57:21 +01:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```javascript
|
2016-02-16 11:52:47 +08:00
|
|
|
// In page 1.
|
|
|
|
|
require('remote').getGlobal('sharedObject').someProperty = 'new value';
|
2016-02-06 19:57:21 +01:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```javascript
|
2016-02-16 11:52:47 +08:00
|
|
|
// In page 2.
|
2016-02-06 19:57:21 +01:00
|
|
|
console.log(require('remote').getGlobal('sharedObject').someProperty);
|
|
|
|
|
```
|
|
|
|
|
|
2016-01-05 19:52:57 +08:00
|
|
|
## My app's window/tray disappeared after a few minutes.
|
|
|
|
|
|
|
|
|
|
This happens when the variable which is used to store the window/tray gets
|
|
|
|
|
garbage collected.
|
|
|
|
|
|
2016-03-16 09:37:04 -07:00
|
|
|
If you encounter this problem, the following articles may prove helpful:
|
2016-01-05 19:52:57 +08:00
|
|
|
|
|
|
|
|
* [Memory Management][memory-management]
|
|
|
|
|
* [Variable Scope][variable-scope]
|
|
|
|
|
|
|
|
|
|
If you want a quick fix, you can make the variables global by changing your
|
|
|
|
|
code from this:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
app.on('ready', function() {
|
|
|
|
|
var tray = new Tray('/path/to/icon.png');
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
to this:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
var tray = null;
|
|
|
|
|
app.on('ready', function() {
|
|
|
|
|
tray = new Tray('/path/to/icon.png');
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
|
|
|
|
|
|
|
|
|
|
Due to the Node.js integration of Electron, there are some extra symbols
|
2016-03-17 00:03:24 -07:00
|
|
|
inserted into the DOM like `module`, `exports`, `require`. This causes problems for
|
2016-03-16 09:37:04 -07:00
|
|
|
some libraries since they want to insert the symbols with the same names.
|
2016-01-05 19:52:57 +08:00
|
|
|
|
|
|
|
|
To solve this, you can turn off node integration in Electron:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
// In the main process.
|
|
|
|
|
var mainWindow = new BrowserWindow({
|
|
|
|
|
webPreferences: {
|
|
|
|
|
nodeIntegration: false
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
But if you want to keep the abilities of using Node.js and Electron APIs, you
|
|
|
|
|
have to rename the symbols in the page before including other libraries:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<head>
|
|
|
|
|
<script>
|
|
|
|
|
window.nodeRequire = require;
|
|
|
|
|
delete window.require;
|
|
|
|
|
delete window.exports;
|
|
|
|
|
delete window.module;
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/javascript" src="jquery.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
```
|
|
|
|
|
|
2016-01-25 18:41:34 +08:00
|
|
|
## `require('electron').xxx` is undefined.
|
|
|
|
|
|
|
|
|
|
When using Electron's built-in module you might encounter an error like this:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
> require('electron').webFrame.setZoomFactor(1.0);
|
|
|
|
|
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined
|
|
|
|
|
```
|
|
|
|
|
|
2016-01-26 17:00:12 +08:00
|
|
|
This is because you have the [npm `electron` module][electron-module] installed
|
|
|
|
|
either locally or globally, which overrides Electron's built-in module.
|
|
|
|
|
|
|
|
|
|
To verify whether you are using the correct built-in module, you can print the
|
|
|
|
|
path of the `electron` module:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
console.log(require.resolve('electron'));
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
and then check if it is in the following form:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
"/path/to/Electron.app/Contents/Resources/atom.asar/renderer/api/lib/exports/electron.js"
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
If it is something like `node_modules/electron/index.js`, then you have to
|
|
|
|
|
either remove the npm `electron` module, or rename it.
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm uninstall electron
|
|
|
|
|
npm uninstall -g electron
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
However if your are using the built-in module but still getting this error, it
|
2016-03-16 09:37:04 -07:00
|
|
|
is very likely you are using the module in the wrong process. For example
|
2016-01-26 17:00:12 +08:00
|
|
|
`electron.app` can only be used in the main process, while `electron.webFrame`
|
|
|
|
|
is only available in renderer processes.
|
2016-01-25 18:41:34 +08:00
|
|
|
|
2016-03-29 10:47:31 -07:00
|
|
|
## Why is my app's background transparent?
|
2016-03-30 10:55:50 +09:00
|
|
|
|
|
|
|
|
Since Electron `0.37.3`, the default user-agent background color is `transparent`.
|
|
|
|
|
Simply specify a background color in HTML:
|
2016-03-29 10:47:31 -07:00
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<style type='text/css'>
|
|
|
|
|
html {
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
```
|
|
|
|
|
|
2016-01-05 19:52:57 +08:00
|
|
|
[memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
|
|
|
|
|
[variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
|
2016-01-26 17:00:12 +08:00
|
|
|
[electron-module]: https://www.npmjs.com/package/electron
|
2016-02-16 11:52:47 +08:00
|
|
|
[storage]: https://developer.mozilla.org/en-US/docs/Web/API/Storage
|
|
|
|
|
[local-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
|
|
|
|
|
[session-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
|
|
|
|
|
[indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
|
