fadd513739
* docs: added fiddle support for code samples in quick start guide and features * docs: removed excessive fiddle links for not final steps * docs: added eof newlines to fiddle examples * docs: reworked fiddle examples to be more self-sufficient * docs: reworked fiddle examples according to mentions * docs: changed http to https in the offscreen rendering fiddle * docs: fix recent documents fiddle to be more consistent
3.6 KiB
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:
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.
Example
Event detection in the Renderer process
Starting with a working application from the
Quick Start Guide, update the main.js file
with the following lines:
const { app, BrowserWindow } = require('electron')
let onlineStatusWindow
app.whenReady().then(() => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
})
in the index.html file, add the following line before the
closing </body> tag:
<script src="renderer.js"></script>
and add the renderer.js file:
const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
alertOnlineStatus()
After launching the Electron application, you should see the notification:
Event detection in the Main process
There may be situations when you want to respond to online/offline events in
the Main process as well. The Main process, however, does not have a
navigator object and cannot detect these events directly. In this case, you
need to forward the events to the Main process using Electron's inter-process
communication (IPC) utilities.
Starting with a working application from the
Quick Start Guide, update the main.js file
with the following lines:
const { app, BrowserWindow, ipcMain } = require('electron')
let onlineStatusWindow
app.whenReady().then(() => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false, webPreferences: { nodeIntegration: true } })
onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
})
ipcMain.on('online-status-changed', (event, status) => {
console.log(status)
})
in the index.html file, add the following line before the
closing </body> tag:
<script src="renderer.js"></script>
and add the renderer.js file:
const { ipcRenderer } = require('electron')
const updateOnlineStatus = () => { ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline') }
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
updateOnlineStatus()
After launching the Electron application, you should see the notification in the Console:
npm start
> electron@1.0.0 start /electron
> electron .
online