在线/离线事件探测

概览

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

navigator.onLine 属性返回值:

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

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

示例

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

index.html

  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 的内容中。

renderer.js

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

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

main.js

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

启动 Electron 应用程序后,您应该能看到通知:

连接状态

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