OnLine and OffLine Detection Web navigator API using VueJS
Web Browser navigator API that represents the current internet connection state of the user agent using VueJS.
The feature from the web API navigator.onLine
Using the simple web API navigator.onLine that has offline and online values combined with javascript addEventListener on the window , document , or document.body you could have real-time automatic detection on your VueJS apps.
This feature will determine your application's online or offline internet connection status.
Many use cases for this navigator online quality in your VueJS web application. For example, you need a notification to your users that their internet connection is disconnected from the web application and somehow they have to reconnect to the internet and login again to the application or just a simple warning that they are disconnected from the internet.
And you can do this by simply vanilla JavaScript and implementing it on the VueJS web application. Below is my version of the navigator online web API:
VueJS Script
VueJS Template
VueJS Style
To fully tested it, run these CodePen snippets and disconnect your Wifi/Internet. It will replace the ”Welcome to Vue!” text into Your are Offline... and when your turn on the Wifi/Internet back in, and then you will see a Back Online... text.
CodePen
There are other web browsers navigator APIs such as navigator.geolocation that you could use in your VueJS web application just like this one from me that utilizes current browser geolocation.
Web APIs can get your VueJS web application more interesting and interactive for your users. You can creatively combine the web APIs to create a great VueJS portfolio using these features.
Hope this will give you a hint to help you with your VueJS apps for online or offline detection. Thank you for stopping by.
Read Also:
Update - Thursday, February 3, 2022:
Currently Navigator.onLine web API is supported in most major browsers, but only in android WebView Android has partial support.
