Electron 在線/離線事件探測

2023-02-16 17:15 更新

概覽

在渲染進程中，在線/離線事件 的探測，是通過標準 HTML5 API 中 navigator.onLine 屬性來實現(xiàn)的。

navigator.onLine 屬性返回值：

  • ?false?：如果所有網(wǎng)絡請求都失敗(例如，斷開網(wǎng)絡)。
  • ?true?: 在其他情況下都返回 true

由于許多情況都會返回 true，你應該小心對待誤報的情況， 因為我們不能總是假設 true 值意味著 Electron 可以訪問互聯(lián)網(wǎng)。 例如，當計算機運行的虛擬化軟件時，虛擬以太網(wǎng)適配器處于 "always connected" 狀態(tài)。 因此，如果您想要確定 Electron 的互聯(lián)網(wǎng)訪問狀態(tài)，您應該為此檢查進行額外的開發(fā)。

示例

從HTML文件 index.html 開始，這個例子會演示 navigator.onLine API 是如何被用來構建一個連接狀態(tài)指示器的。

<!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，創(chuàng)建一個 renderer.js 文件，添加事件監(jiān)聽器到 'online' 和 'offline' 窗口 中. 事件處理器設置基于 navigator.onLine 的結果到 <strong id='status'> element 的內容中。

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

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

updateOnlineStatus()

最后，創(chuàng)建一個 main.js 文件用來給主進程創(chuàng)建窗口。

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 應用程序后，您應該能看到通知：


注意：如果你需要將連接狀態(tài)發(fā)送給主流程，請使用 IPC 渲染器 API。


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號