Aller au contenu principal

Détection des événements online/offline

Vue d'ensemble​

La détection des événements online et offline peut être implémentée dans le processus de rendu en utilisant l'attribut navigator.onLine, faisant partie de l'API HTML5 standard.

L'attribut navigator.onLine renvoie :

  • false si toute requête réseau est garantie vouée à l'échec (par exemple, lors de la déconnexion du réseau).
  • true dans tous les autres cas.

Puisque de nombreux cas retournent true, vous devrez traiter avec précaution les cas pouvant être des faux positifs, car la valeur true ne signifie pas toujours qu'Electron puisse accéder à Internet. Par exemple, dans les cas où l'ordinateur exécute un logiciel de virtualisation qui a des adaptateurs Ethernet virtuels avec l'état « toujours connecté ». Par conséquent, si vous voulez déterminer le statut de l'accès à Internet d'Electron, vous devrez mettre en œuvre des moyens supplémentaires de vérification.

Exemple​

En partant d'un fichier HTML index.html, cet exemple démontrera comment l'API navigator.onLine peut être utilisée pour construire un indicateur d'état de connexion.

index.html
<!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>Etat de la Connexion : <strong id='status'></strong></h1>
    <script src="renderer.js"></script>
</body>
</html>

Pour modifier le DOM, créez un fichier renderer.js qui ajoute des écouteurs pour les événements 'online' et 'offline' de window. Le gestionnaire d’événements détermine le contenu de l’élément dont l' id='status' en fonction du résultat de navigator.onLine.

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

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

updateOnlineStatus()

Enfin, créez le fichier main.js pour le processus principal qui va créer la fenêtre.

main.js
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()
  }
})

Après avoir lancé l’application Electron, vous verrez la notification:

État de la connexion

Remarque : Si vous devez communiquer l’état de la connexion au processus principal, utilisez l'API des IPC pour le moteur de rendu.