electron/docs/tutorial/online-offline-events.md

# Online/Offline Event Detection

[Online and offline event](https://developer.mozilla.org/en-US/docs/Online_and_offline_events) detection can be implemented in the renderer process using the [`navigator.onLine`](http://html5index.org/Offline%20-%20NavigatorOnLine.html) attribute, part of standard HTML5 API.
The `navigator.onLine` attribute returns `false` if any network requests are guaranteed to fail i.e. definitely offline (disconnected from the network). It returns `true` in all other cases.
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:

_main.js_

```javascript
const {app, BrowserWindow} = require('electron')

let onlineStatusWindow

app.on('ready', () => {
  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
  onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
```

_online-status.html_

```html
<!DOCTYPE html>
<html>
<body>
<script>
  const alertOnlineStatus = () => {
    window.alert(navigator.onLine ? 'online' : 'offline')
  }

  window.addEventListener('online',  alertOnlineStatus)
  window.addEventListener('offline',  alertOnlineStatus)

  alertOnlineStatus()
</script>
</body>
</html>
```

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
Electron's inter-process communication utilities, the events can be forwarded
to the main process and handled as needed, as shown in the following example.

_main.js_

```javascript
const {app, BrowserWindow, ipcMain} = require('electron')
let onlineStatusWindow

app.on('ready', () => {
  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
  onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})

ipcMain.on('online-status-changed', (event, status) => {
  console.log(status)
})
```

_online-status.html_

```html
<!DOCTYPE html>
<html>
<body>
<script>
  const {ipcRenderer} = require('electron')
  const updateOnlineStatus = () => {
    ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
  }

  window.addEventListener('online',  updateOnlineStatus)
  window.addEventListener('offline',  updateOnlineStatus)

  updateOnlineStatus()
</script>
</body>
</html>
```
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00			`# Online/Offline Event Detection`

Updated online-offline-events.md Improved readability and simplicity. 2017-10-18 13:56:19 +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 the [`navigator.onLine`](http://html5index.org/Offline%20-%20NavigatorOnLine.html) attribute, part of standard HTML5 API.
			The `navigator.onLine` attribute returns `false` if any network requests are guaranteed to fail i.e. definitely offline (disconnected from the network). It returns `true` in all other cases.
Updated online-offline-events.md Added more info, to clarify things. 2017-10-18 10:58:18 +00:00			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:`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00
			`_main.js_`

			```javascript
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`const {app, BrowserWindow} = require('electron')`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`let onlineStatusWindow`
:memo: Update tutorials to ES6 [ci skip] 2016-05-04 18:11:51 +00:00
			`app.on('ready', () => {`
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })`
			onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
			`})`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00			```

			`_online-status.html_`

			```html
Update online-offline-events.md Add HTML5 doctype. 2015-03-04 13:29:02 +00:00			`<!DOCTYPE html>`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00			`<html>`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00			`<body>`
			`<script>`
:memo: Update tutorials to ES6 [ci skip] 2016-05-04 18:11:51 +00:00			`const alertOnlineStatus = () => {`
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`window.alert(navigator.onLine ? 'online' : 'offline')`
			`}`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`window.addEventListener('online', alertOnlineStatus)`
			`window.addEventListener('offline', alertOnlineStatus)`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`alertOnlineStatus()`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00			`</script>`
			`</body>`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00			`</html>`
			```

Standardize online-offline 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
docs: Atom Shell => Electron 2015-04-16 03:31:12 +00:00			`Electron's inter-process communication utilities, the events can be forwarded`
Renamed browser-side to main process renamed a few occurances of "web page" to "renderer" renamed a few files that had "browser" in their name to "main-process" note that there are still many occurances of web page. 2015-03-26 15:20:31 +00:00			`to the main process and handled as needed, as shown in the following example.`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00
			`_main.js_`

			```javascript
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`const {app, BrowserWindow, ipcMain} = require('electron')`
			`let onlineStatusWindow`
:memo: Update tutorials to ES6 [ci skip] 2016-05-04 18:11:51 +00:00
			`app.on('ready', () => {`
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })`
			onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
			`})`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00
:memo: Update tutorials to ES6 [ci skip] 2016-05-04 18:11:51 +00:00			`ipcMain.on('online-status-changed', (event, status) => {`
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`console.log(status)`
			`})`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00			```

			`_online-status.html_`

			```html
Update online-offline-events.md Add HTML5 doctype. 2015-03-04 13:29:02 +00:00			`<!DOCTYPE html>`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00			`<html>`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00			`<body>`
			`<script>`
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`const {ipcRenderer} = require('electron')`
:memo: Update tutorials to ES6 [ci skip] 2016-05-04 18:11:51 +00:00			`const updateOnlineStatus = () => {`
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')`
			`}`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`window.addEventListener('online', updateOnlineStatus)`
			`window.addEventListener('offline', updateOnlineStatus)`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00
standardize all javascript blocks in English docs 2016-07-26 01:39:25 +00:00			`updateOnlineStatus()`
docs: Update with new IPC modules 2015-11-10 08:48:24 +00:00			`</script>`
			`</body>`
Add tutorial on online/offline event detection 2014-11-05 14:47:38 +00:00			`</html>`
			```