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

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

Категория: Electron.js / JavaScript

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

Online/Offline Status

main.js

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>

Battery Status

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

1
2
3
4
5
6
7
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.

Теги :