15. Electron.js – Основы. Electron API – Online/Offline Status, Battery Status

31 января, 2019 в 12:21

Это последняя заметка в которой я рассматриваю Electron API, здесь будут показана реализация отслеживания online и offline состояния сети и Battery Status – состояние батареи если приложение запускается на ноутбуке. Online и offline события состояния сети и Battery Status являются частью стандартного API в HTML5.

Online/Offline Status

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`)
})

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>

<!DOCTYPE html>

<html>

<body>

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)
})

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>

<!DOCTYPE html>

<html>

<body>

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>

Battery Status

Отслеживаем состояние заряда батареи у ноутбука

window.navigator.getBattery().then((battery) => {
   // Получим объект с полями содержащими информацию о состоянии источника питания
	console.log(battery)
	battery.onchargingchange = () => { 
		console.log(battery.charging)
	}
})

window.navigator.getBattery().then((battery) => {

// Получим объект с полями содержащими информацию о состоянии источника питания

console.log(battery)

battery.onchargingchange = () => {

console.log(battery.charging)

}

})

Методов и параметров значительно больше чем рассмотрено здесь, для поиска необходимого решения лучше всего обратиться к документации – Online/Offline Status и Battery Status.

Здесь можно более детально рассмотреть проект на GitHub с установленными настройкам и дополнениями – https://github.com/NetWorkRoom/electron-start/tree/network.