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

Publié le 12/07/2020 • Mis à jour le 12/07/2020


English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧 Close

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


Démo HTML du snippet

≪ isOnline ? trans.status_online : trans.status_offline ≫


/**
 * 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()
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Plus sur le web  Snippet aléatoire