Online/Offline Event Detection
Overview
Online and offline event detection can be implemented in both the main and renderer processes:
- Renderer process: Use the
navigator.onLineattribute and online/offline events, part of standard HTML5 API. - Main process: Use the
net.isOnline()method or thenet.onlineproperty.
The navigator.onLine attribute returns:
falseif all network requests are guaranteed to fail (e.g. when disconnected from the network).truein 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.
Main Process Detection
In the main process, you can use the net module to detect online/offline status:
const{ net }=require('electron')
// Method 1: Using net.isOnline()
const isOnline = net.isOnline()
console.log('Online status:', isOnline)
// Method 2: Using net.online property
console.log('Online status:', net.online)
Both net.isOnline() and net.online return the same boolean value with the same reliability characteristics as navigator.onLine - they provide a strong indicator when offline (false), but a true value doesn't guarantee successful internet connectivity.
The net module is only available after the app emits the ready event.
Renderer Process Example
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.
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Hello World!</title>
<metahttp-equiv="Content-Security-Policy"content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<h1>Connection status: <strongid='status'></strong></h1>
<scriptsrc="renderer.js"></script>
</body>
</html>
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.
constupdateOnlineStatus=()=>{
document.getElementById('status').innerHTML=navigator.onLine?'online':'offline'
}
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
updateOnlineStatus()
Finally, create a main.js file for main process that creates the window.
const{ app,BrowserWindow}=require('electron')
constcreateWindow=()=>{
const onlineStatusWindow =newBrowserWindow()
onlineStatusWindow.loadFile('index.html')
}
app.whenReady().then(()=>{
createWindow()
app.on('activate',()=>{
if(BrowserWindow.getAllWindows().length===0){
createWindow()
}
})
})
app.on('window-all-closed',()=>{
if(process.platform!=='darwin'){
app.quit()
}
})
After launching the Electron application, you should see the notification:
If you need to check the connection status in the main process, you can use net.isOnline() directly instead of communicating from the renderer process via IPC.