2014-11-05 07:47:38 -07:00
# Online/Offline Event Detection
2020-10-21 09:46:56 +03:00
## Overview
2017-10-18 16:28:18 +05:30
2020-10-21 09:46:56 +03: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.
2014-11-05 07:47:38 -07:00
2020-10-21 09:46:56 +03:00
The `navigator.onLine` attribute returns:
2020-11-05 14:12:43 -08:00
2020-10-21 09:46:56 +03:00
* `false` if all network requests are guaranteed to fail (e.g. when disconnected from the network).
* `true` in all other cases.
Since many cases return `true` , you should treat with care situations of
getting false positives, as we cannot always assume that `true` value means
that Electron can access the Internet. For example, in cases when the computer
is running a virtualization software that has virtual Ethernet adapters in "always
connected" state. Therefore, if you want to determine the Internet access
status of Electron, you should develop additional means for this check.
## Example
2021-05-24 01:34:00 -06:00
Starting with an HTML file `index.html` , this example will demonstrate how the `navigator.onLine` API can be used to build a connection status indicator.
```html title="index.html"
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title > Hello World!< / title >
< meta http-equiv = "Content-Security-Policy" content = "script-src 'self' 'unsafe-inline';" / >
< / head >
< body >
< h1 > Connection status: < strong id = 'status' > < / strong > < / h1 >
< script src = "renderer.js" > < / script >
< / body >
< / html >
2020-10-21 09:46:56 +03:00
```
2021-05-24 01:34:00 -06:00
In order to mutate the DOM, create a `renderer.js` file that adds event listeners to the `'online'` and `'offline'` `window` events. The event handler sets the content of the `<strong id='status'>` element depending on the result of `navigator.onLine` .
2020-10-21 09:46:56 +03:00
2021-05-24 01:34:00 -06:00
```js title='renderer.js'
2021-08-01 21:57:37 -04:00
const updateOnlineStatus = () => {
2021-05-24 01:34:00 -06:00
document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
}
2020-10-21 09:46:56 +03:00
2021-05-24 01:34:00 -06:00
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
2020-10-21 09:46:56 +03:00
2021-05-24 01:34:00 -06:00
updateOnlineStatus()
2014-11-05 07:47:38 -07:00
```
2021-05-24 01:34:00 -06:00
Finally, create a `main.js` file for main process that creates the window.
2014-11-05 07:47:38 -07:00
2021-05-24 01:34:00 -06:00
```js title='main.js'
const { app, BrowserWindow } = require('electron')
2020-10-21 09:46:56 +03:00
2021-08-01 21:57:37 -04:00
const createWindow = () => {
2021-05-24 01:34:00 -06:00
const onlineStatusWindow = new BrowserWindow({
width: 400,
height: 100
})
2014-11-05 07:47:38 -07:00
2021-05-24 01:34:00 -06:00
onlineStatusWindow.loadFile('index.html')
}
2016-05-04 12:11:51 -06:00
2020-02-03 16:43:22 -06:00
app.whenReady().then(() => {
2021-05-24 01:34:00 -06:00
createWindow()
2014-11-05 07:47:38 -07:00
2021-05-24 01:34:00 -06:00
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
2016-07-25 18:39:25 -07:00
})
2020-10-21 09:46:56 +03:00
2021-05-24 01:34:00 -06:00
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
2020-10-21 09:46:56 +03:00
```
2021-05-24 01:34:00 -06:00
After launching the Electron application, you should see the notification:
2020-10-21 09:46:56 +03:00
2021-05-24 01:34:00 -06:00
2020-10-21 09:46:56 +03:00
2021-05-24 01:34:00 -06:00
> Note: If you need to communicate the connection status to the main process, use the [IPC renderer](../api/ipc-renderer.md) API.
