原文:https://github.com/electron/electron/blob/master/docs/tutorial/online-offline-events.md
譯者:Lin
在線和離線事件監聽可以在渲染進程中使用HTML接口執行,就像下面例子中展示的一樣。
main.js
const {app, BrowserWindow} = require('electron')
let onlineStatusWindow
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
online-status.html
<!DOCTYPE html>
<html>
<body>
<script>
const alertOnlineStatus = () => {
window.alert(navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
alertOnlineStatus()
</script>
</body>
</html>
這里有可能有一些你想要在主進程中的同樣事情上作出響應的實例。然而主進程沒有navigator
對象因此不能直接檢測到這些事件。使用Electron的進程間通信工具,這些事件可以被轉發到主進程并按照需要進行處理,就像下面的例子展示的那樣。
main.js
const {app, BrowserWindow, ipcMain} = require('electron')
let onlineStatusWindow
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
ipcMain.on('online-status-changed', (event, status) => {
console.log(status)
})
online-status.html
<!DOCTYPE html>
<html>
<body>
<script>
const {ipcRenderer} = require('electron')
const updateOnlineStatus = () => {
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
updateOnlineStatus()
</script>
</body>
</html>
注意:如果Electron不能連接到局域網(LAN)或者路由器,它就被認為是離線的;其他的所有情況都會返回true
。所以你可以認為是Electron離線時navigator.onLine返回一個false
,你不能肯定的認為一個true
值就代表Electron可以訪問互聯網。你可能會被誤報,就像在計算機上運行的一個虛擬機總是“連接”上虛擬以太網適配器。因此,如果你想要確定網絡狀態,你需要其他的額外的檢測手段。