Vue - check if user is offline and then show div for a second once they come back online

Question

I currently am using a function on a timed loop to check if a user goes offline:

created() {
   setInterval(() => {
        this.checkOnline();
   }, 30000);
}

Method:

checkOnline(){
   this.onLine = navigator.onLine ? true : false;
}

Is there a way I can detect this without using the timer?

Secondly...

I am trying to show an 1 second alert to tell the user they are back online. When this.onLine is true, the div should be hidden. When it is false it should also be hidden, but when it goes from false to true I want to show the div for a second or so and then hide it again. I have tried this with a settimeout and using a watcher but neither give the desired effect.

Edit:

So one method that gets me there is:

 data() {
     return {
         onLine: navigator.onLine ? true : false,
     }
 }

then a watcher to show the back online message

watch: {
    onLine: function (val) {
        if(this.onLine === true){
            this.showBackOnline = true;
            setTimeout(()=>{ this.showBackOnline = false; }, 1000);
        }
    },
},

Is there a better way than a watcher to achieve this, other than using a dedicated notify plugin?

Answer 1

Is there a way I can detect this without using the timer? Yes. By using the online offline event.

Is there a better way than a watcher to achieve this, other than using a dedicated notify plugin? I think the watcher is the most suitable method here.

demo: https://jsfiddle.net/jacobgoh101/xz6e3705/4/

new Vue({
    el: "#app",
    data: {
        onLine: navigator.onLine,
        showBackOnline: false
    },
    methods: {
        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);
    }
})

Answer 2

you can handle this (update onLine status), just by set arrow function in event listener and set that varible true/false by listener. window object has online/offline events and you don't need to watch for navigator.online value or set interval to check it. you can just set event listener for it and do something on callback method. in below code i just change value of my 'isOnLine' variable value and in template show message by v-if directive to user about online/offline.

  data() {
    return {
      isOnLine:navigator.onLine
    }
  },
  mounted() {
     window.addEventListener('online', ()=>{this.isOnLine=true});
     window.addEventListener('offline', ()=>{this.isOnLine=false});
  },