Seamless Connectivity - Implementing Online and Offline Detection in Vue.js
Web Browser navigator API that represents the current internet connection state of the current browser's user agent.
navigator.onLine
The great feature from web API 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.
Topics
Recent Blog List Content:
How To Use JavaScript Promises In Reactjs useEffect
Node.js ORMs with Prisma and Sequelize Developer Experiences
Archive
Stories
Code Road’s Web Development Story List
Code Road
Material UI Administrator Dashboard with Next.js
Code Road
Nuxt.js and Chakra UI Website Template
Code Road
How To Use Apex Charts in Nuxt.js Web Application Dashboard
Code Road
Nuxt.js Dynamic Sitemap and Feed for Static Websites
Code Road
Nuxt.js SEO Head Component
Code Road
Chart.js in Nuxt.js: How To Implement
Code Road
On-page SEO List to Have in your Nuxt.js Static Website
Code Road
How To Build VueJS Geo Location Weather Application
Code Road
MySQL Docker Container with MySQL Workbench and PhpMyAdmin
Code Road