Skip to main content

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.在线和离线事件检测可以使用标准HTML5 API的navigator.onLine属性在渲染器进程中实现。

The navigator.onLine attribute returns:navigator.onLine属性返回：

  • false if all network requests are guaranteed to fail (e.g. when disconnected from the network).如果所有网络请求都保证失败（例如，从网络断开连接时），则为false。
  • true in all other cases.在所有其他情况下为true。

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. 由于许多情况下返回true，您应该小心处理误报的情况，因为我们不能总是假设真值意味着Electron可以访问互联网。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.因此，如果您想确定Electron的Internet访问状态，则应开发其他检查方法。

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.从HTML文件index.html开始，本示例将演示如何使用navigator.onLineAPI构建连接状态指示器。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Connection status: <strong id='status'></strong></h1>
    <script src="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. 为了改变DOM，创建一个renderer.js文件，将事件监听器添加到'online'和'offline' 窗口事件中。The event handler sets the content of the <strong id='status'> element depending on the result of navigator.onLine.事件处理程序根据navigator.onLine的结果设置<strong id='status'>元素的内容。

renderer.js
const updateOnlineStatus = () => {
  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.最后，为创建窗口的主进程创建main.js文件。

main.js
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const onlineStatusWindow = new BrowserWindow({
    width: 400,
    height: 100
  })

  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:启动Electron应用程序后，您应看到通知：

Connection status

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