2014-11-05 14:47:38 +00:00
# Online/Offline Event Detection
2017-10-18 13:41:05 +00:00
[Online and offline event ](https://developer.mozilla.org/en-US/docs/Online_and_offline_events ) detection can be implemented in the renderer process using [NavigatorOnLine ](http://html5index.org/Offline%20-%20NavigatorOnLine.html ) attribute, part of standard HTML5 API.
2017-10-18 10:58:18 +00:00
The navigator.onLine attribute returns `false` if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail) i.e. definitely offline (disconnected from the network) and must return `true` otherwise.
Since all other conditions return `true` , one has to be mindful of getting false positives, as we cannot assume `true` value necessarily means that Electron can access the internet. Such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always “connected.”
Therefore, if you really want to determine the internet access status of Electron,
you should develop additional means for checking.
Example:
2014-11-05 14:47:38 +00:00
_main.js_
```javascript
2016-07-26 01:39:25 +00:00
const {app, BrowserWindow} = require('electron')
2014-11-05 14:47:38 +00:00
2016-07-26 01:39:25 +00:00
let onlineStatusWindow
2016-05-04 18:11:51 +00:00
app.on('ready', () => {
2016-07-26 01:39:25 +00:00
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
2014-11-05 14:47:38 +00:00
```
_online-status.html_
```html
2015-03-04 13:29:02 +00:00
<!DOCTYPE html>
2014-11-05 14:47:38 +00:00
< html >
2015-11-10 08:48:24 +00:00
< body >
< script >
2016-05-04 18:11:51 +00:00
const alertOnlineStatus = () => {
2016-07-26 01:39:25 +00:00
window.alert(navigator.onLine ? 'online' : 'offline')
}
2015-11-10 08:48:24 +00:00
2016-07-26 01:39:25 +00:00
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
2015-11-10 08:48:24 +00:00
2016-07-26 01:39:25 +00:00
alertOnlineStatus()
2015-11-10 08:48:24 +00:00
< / script >
< / body >
2014-11-05 14:47:38 +00:00
< / html >
```
2015-09-01 02:17:59 +00:00
There may be instances where you want to respond to these events in the
main process as well. The main process however does not have a
`navigator` object and thus cannot detect these events directly. Using
2015-04-16 03:31:12 +00:00
Electron's inter-process communication utilities, the events can be forwarded
2015-03-26 15:20:31 +00:00
to the main process and handled as needed, as shown in the following example.
2014-11-05 14:47:38 +00:00
_main.js_
```javascript
2016-07-26 01:39:25 +00:00
const {app, BrowserWindow, ipcMain} = require('electron')
let onlineStatusWindow
2016-05-04 18:11:51 +00:00
app.on('ready', () => {
2016-07-26 01:39:25 +00:00
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
2014-11-05 14:47:38 +00:00
2016-05-04 18:11:51 +00:00
ipcMain.on('online-status-changed', (event, status) => {
2016-07-26 01:39:25 +00:00
console.log(status)
})
2014-11-05 14:47:38 +00:00
```
_online-status.html_
```html
2015-03-04 13:29:02 +00:00
<!DOCTYPE html>
2014-11-05 14:47:38 +00:00
< html >
2015-11-10 08:48:24 +00:00
< body >
< script >
2016-07-26 01:39:25 +00:00
const {ipcRenderer} = require('electron')
2016-05-04 18:11:51 +00:00
const updateOnlineStatus = () => {
2016-07-26 01:39:25 +00:00
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
}
2015-11-10 08:48:24 +00:00
2016-07-26 01:39:25 +00:00
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
2015-11-10 08:48:24 +00:00
2016-07-26 01:39:25 +00:00
updateOnlineStatus()
2015-11-10 08:48:24 +00:00
< / script >
< / body >
2014-11-05 14:47:38 +00:00
< / html >
```
