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

91 lines
2.5 KiB
Markdown
Raw Normal View History

# Online/Offline Event Detection
Online and offline event detection can be implemented in the renderer process
using standard HTML5 APIs, as shown in the following 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>
2015-11-10 08:48:24 +00:00
<body>
<script>
const alertOnlineStatus = () => {
window.alert(navigator.onLine ? 'online' : 'offline')
}
2015-11-10 08:48:24 +00:00
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
2015-11-10 08:48:24 +00:00
alertOnlineStatus()
2015-11-10 08:48:24 +00:00
</script>
</body>
</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
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>
2015-11-10 08:48:24 +00:00
<body>
<script>
const {ipcRenderer} = require('electron')
const updateOnlineStatus = () => {
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
}
2015-11-10 08:48:24 +00:00
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
2015-11-10 08:48:24 +00:00
updateOnlineStatus()
2015-11-10 08:48:24 +00:00
</script>
</body>
</html>
```
2016-10-13 21:16:37 +00:00
2016-10-13 14:42:44 +00:00
**NOTE:** If Electron is not able to connect to a local area network (LAN) or
2016-10-13 21:16:37 +00:00
a router, it is considered offline; all other conditions return `true`.
2016-10-13 14:52:40 +00:00
So while you can assume that Electron is offline when `navigator.onLine`
2016-10-13 21:16:37 +00:00
returns a `false` value, you cannot assume that a `true` value necessarily
2016-10-13 14:52:40 +00:00
means that Electron can access the internet. You could be getting false
2016-10-13 14:42:44 +00:00
positives, such as in cases where the computer is running a virtualization
software that has virtual ethernet adapters that are always "connected."
2016-10-13 14:52:40 +00:00
Therefore, if you really want to determine the internet access status of Electron,
2016-10-13 14:42:44 +00:00
you should develop additional means for checking.