在线/离线事件探测

概览

在渲染进程中，在线/离线事件 的探测，是通过标准 HTML5 API 中 navigator.onLine 属性来实现的。

navigator.onLine 属性返回值：

  • false：如果所有网络请求都失败(例如，断开网络)。
  • true: 在其他情况下都返回 true

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

示例

从HTML文件 index.html 开始，这个例子会演示 navigator.onLine API 是如何被用来构建一个连接状态指示器的。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body>
  9.     <h1>Connection status: <strong id='status'></strong></h1>
  10.     <script src="renderer.js"></script>
  11. </body>
  12. </html>

为了操作DOM，创建一个 renderer.js 文件，添加事件监听器到 'online' 和 'offline' 窗口 中. 事件处理器设置基于 navigator.onLine 的结果到 <strong id='status'> element 的内容中。

  1. function updateOnlineStatus () {
  2.   document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
  3. }
  5. window.addEventListener('online', updateOnlineStatus)
  6. window.addEventListener('offline', updateOnlineStatus)
  8. updateOnlineStatus()

最后，创建一个 main.js 文件用来给主进程创建窗口。

  1. const { app, BrowserWindow } = require('electron')
  3. function createWindow () {
  4.   const onlineStatusWindow = new BrowserWindow({
  5.     width: 400,
  6.     height: 100
  7.   })
  9.   onlineStatusWindow.loadFile('index.html')
  10. }
  12. app.whenReady().then(() => {
  13.   createWindow()
  15.   app.on('activate', () => {
  16.     if (BrowserWindow.getAllWindows().length === 0) {
  17.       createWindow()
  18.     }
  19.   })
  20. })
  22. app.on('window-all-closed', () => {
  23.   if (process.platform !== 'darwin') {
  24.     app.quit()
  25.   }
  26. })

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

连接状态

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