跳至主要内容

在线/离线事件检测

概述​

可以使用 在线和离线事件 检测在渲染进程中使用 navigator.onLine 属性，它是标准 HTML5 API 的一部分。

navigator.onLine 属性返回

  • false 如果所有网络请求都保证失败（例如，当断开与网络的连接时）。
  • true 在所有其他情况下。

由于许多情况返回true，您应该谨慎对待出现假阳性情况，因为我们不能总是假设true值意味着 Electron 可以访问互联网。例如，在计算机运行虚拟化软件的情况下，该软件具有处于“始终连接”状态的虚拟以太网适配器。因此，如果您想确定 Electron 的互联网访问状态，您应该开发其他方法进行检查。

示例​

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

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'>元素的内容。

renderer.js
const updateOnlineStatus = () => {
  document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
}

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

updateOnlineStatus()

最后，创建一个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()
  }
})

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

Connection status

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