Online/Offline Event Detection

Overview

Online and offline event detection can be implemented in the Renderer process using the navigator.onLine attribute, part of standard HTML5 API.

The navigator.onLine attribute returns:

  • 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

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.

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body>
  9.     <h1>Connection status: <strong id='status'></strong></h1>
  10.     <script src="renderer.js"></script>
  11. </body>
  12. </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.

renderer.js

  1. const updateOnlineStatus = () => {
  2.   document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
  3. }
  5. window.addEventListener('online', updateOnlineStatus)
  6. window.addEventListener('offline', updateOnlineStatus)
  8. updateOnlineStatus()

Finally, create a main.js file for main process that creates the window.

main.js

  1. const { app, BrowserWindow } = require('electron')
  3. const createWindow = () => {
  4.   const onlineStatusWindow = new BrowserWindow({
  5.     width: 400,
  6.     height: 100
  7.   })
  9.   onlineStatusWindow.loadFile('index.html')
  10. }
  12. app.whenReady().then(() => {
  13.   createWindow()
  15.   app.on('activate', () => {
  16.     if (BrowserWindow.getAllWindows().length === 0) {
  17.       createWindow()
  18.     }
  19.   })
  20. })
  22. app.on('window-all-closed', () => {
  23.   if (process.platform !== 'darwin') {
  24.     app.quit()
  25.   }
  26. })

After launching the Electron application, you should see the notification:

Connection status

Note: If you need to communicate the connection status to the main process, use the IPC renderer API.