在线/离线事件探测

概览

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.

示例

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}/online-status.html`)
})

create the online-status.html file and add the following line before the closing </body> tag:

<script src="renderer.js"></script>

并添加 渲染器.js 文件：

const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
alertOnlineStatus()

启动 Electron 应用程序后，您应该看到通知：

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(). hen(() =>
  OnlineStatuswindow = 新的 BrowserWindow(。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。) 显示: false, web首选项: { nodeIntegration: true } })
  onlineStatusWindow. oadURL(`file://${__dirname}/online-status.html`)
})
ipcMain.on('online-status-changed', (events, status) => *
  console.log(status)
})

create the online-status.html file and add the following line before the closing </body> tag:

<script src="renderer.js"></script>

并添加 渲染器.js 文件：

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