Seamless Connectivity - Implementing Online and Offline Detection in Vue.js

January 28, 2022 • Dykraf

web development

vuejs

javascript

Web Browser navigator API that represents the current internet connection state of the current browser's user agent.

Web Story

The great feature from web API `navigator.onLine`

Using the web API navigator.onLine that has offline and online values combined with javascript addEventListener on the window, document, or document.body you could have a real-time automatic detection on VueJS Online and Offline Detection. Here is the VueJS Online and Offline Detection version from me:

<template>
  <div id="app">
    <h1>
      {{
        !onLine
          ? 'You are Offline...'
          : showBackOnline
          ? 'Back Online...'
          : message
      }}
    </h1>
    <p>
      Learn more with the
      <a href="https://vuejs.org/" target="_blank" rel="noopener"
        >Vue Docs &amp; Resources</a
      >.
    </p>
    <button @click="doSomething">Say hello.</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!',
      onLine: navigator.onLine,
      showBackOnline: false
    }
  },
  methods: {
    doSomething() {
      alert('Hello!')
    },
    updateOnlineStatus(e) {
      const { type } = e
      this.onLine = type === 'online'
    }
  },
  watch: {
    onLine(v) {
      if (v) {
        this.showBackOnline = true
        setTimeout(() => {
          this.showBackOnline = false
        }, 1000)
      }
    }
  },
  mounted() {
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
</style>

CodePen

To fully tested it for Vue internet connection, disconnect your wifi/internet and it will show a button that says Your are Offline... and when your turn on the wifi/internet back in, and then you will see an Back Online... text.

If you use VueJS SSR such as NuxtJS there is a function built-in for VueJS Online and Offline Detection which is: $nuxt.isOffline method. This is very useful so you do not have to write additional utility for this feature and would be a nice feature to your VueJS Website or Web Application for the addition of interactivity for the users.

Closing

This is a sample of using the browser's navigator API that you can use on your application. You might want to check this one from me that uses another browser's API which is the navigator.geolocation API within this link and the demo link.

Thank you for reading the post about VueJS Online and Offline Detection. I hope these will inspire you well enough for your project.