Tester le statut en ligne / hors ligne de la connexion Internet avec JavaScript

Publié le 12/07/2020 • Actualisé le 12/07/2020

Dans ce bout de code, nous allons voir comment détecter le statut de la connexion Internet avec JavaScript. Un message est affiché juste au-dessus du code du snippet JavaScript. Pour tester si ça marche, vous pouvez activer l'option "Travailler hors connexion" du menu "Fichier" de Firefox, vous pouvez aussi désactiver votre Wifi ou encore débrancher votre câble réseau. Le message change dès qu'une modification est détectée. Attention, car l'implémentation de cette fonctionnalité peut varier d'un navigateur à un autre ; veuillez lire la documentation pour bien comprendre les implications (lien ci-dessous).

/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  data: {
    isOnline: null
  },
  methods: {
    snippet101 () {
      const self = this
      window.addEventListener('offline', function (e) { self.snippet101() })
      window.addEventListener('online', function (e) { self.snippet101() })
      this.updateOnlineStatus()
    },
    updateOnlineStatus () {
      this.isOnline = navigator.onLine
    }
  },
  mounted () {
    if (this.isArticle(101)) {
      this.snippet101()
    }
  }
}

Démo HTML du snippet