在线/离线事件检测

¥Online/Offline Event Detection

概述

¥Overview

线上线下活动检测可以使用 navigator.onLine 属性（标准 HTML5 API 的一部分）在渲染器进程中实现。

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

navigator.onLine 属性返回：

¥The navigator.onLine attribute returns:

false 如果所有网络请求都保证失败（例如，当与网络断开连接时）。

¥false if all network requests are guaranteed to fail (e.g. when disconnected from the network).
true 在所有其他情况下。

¥true in all other cases.

由于许多情况返回 true，因此你应该小心对待误报的情况，因为我们不能总是假设 true 值意味着 Electron 可以访问互联网。例如，当计算机运行虚拟化软件时，该软件的虚拟以太网适配器处于 "始终连接" 状态。因此，如果你想确定 Electron 的互联网访问状态，你应该为此检查开发额外的手段。

¥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

从 HTML 文件 index.html 开始，此示例将演示如何使用 navigator.onLine API 构建连接状态指示器。

¥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
<!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>

为了改变 DOM，创建一个 renderer.js 文件，将事件监听器添加到 'online' 和 'offline' window 事件。事件处理程序根据 navigator.onLine 的结果设置 <strong id='status'> 元素的内容。

¥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
const updateOnlineStatus = () => {
  document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
}

window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)

updateOnlineStatus()

最后，为创建窗口的主进程创建一个 main.js 文件。

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

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()
  }
})

启动 Electron 应用后，你应该会看到通知：

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

Connection status

注意：如果你需要将连接状态传达给主进程，请使用 IPC 渲染器 API。

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

概述​

示例​

概述

示例