So here’s how I did it.
I created a new Vue project which included the Vuex and Router libraries.
I created two functions and saved them in a file in the assets folder.
Is the browser connected?
The first function uses a promise to check whether the user’s browser is online. The result is returned in a callback. You don’t have to use a promise, I only used it because I didn’t want the main thread blocked while the app was installing.
Has the connection changed?
The second function registers listeners to check when the online status changes. The callback returns true or false each time the connection changes.
I created a Vuex store to store the state of a isInternetConnected object. This is the single source of truth for the app and will be updated each time the internet connection state changes. We will then be able to retrieve this value anywhere in the app to get the current state of the internet connection.
I created a mutation, setIsInternetConnected to set the state of the isInternetConnected object whenever the internet connection state changes and, the getIsInternetConnected getter to get the saved state of the internet connection.
All changes to the internet connection are monitored in the root component, App.vue . Any change is saved in the store.
We can then use the getIsInternetConnected getter to get the current state of the browser connection in any component at any time. It will always be the latest state of the browser connection.
The root component, App.vue
I edited the App.vue component and imported the above two functions.
The onlineState object
I also created a data object, onlineState which we use in the App.vue template together with a v-if/else block to display either the online or offline text. This version of the onlineState object is unique to this component. Although I used the same name for a data object in the About component, the two are unrelated.
The App.vue template
App.vue is the root component. We use the router to navigate between components. Any html code in the App component will be displayed in all the included components.
The created() lifecycle hook
I then created a Vue lifecycle hook, created() which is run immediately after the vue instance is created. Here we first call our isConnected() function to check whether the browser is connected to the internet. We retrieve the result in the callback and set the onlineState data object to this value. We also save this value in our store by calling setIsInternetConnected to set the state of our isInternetConnected stored object.
Then I registered the listeners to listen for internet connection changes by calling the listenForInternetChanges() function. Each time the internet connection changes, this functions’ callback will return the browsers’ online state. We use this result to set the App.vue components’ onlineState data object. We also save the new state in our store.
I included a watcher to watch the onlineState data object. This will be triggered each time the internet connection state changes. Here we set our App components’ onlineState object value to the new state and display an alert.
Note that the alert halts all code until it is dismissed so I used setTimeout() to delay the alert so that the rest of the code can execute without delay.
Next, lets notify the other components when the internet connection changes.
The About.vue component displays text indicating whether the browser is connected to the internet or not. It uses the value of the data object, onlineState which is unique to this component. We use it and the v-if/else block to display the online or offline text.
I imported the stores’ mapGetters from vuex. The getIsInternetConnected getter in the mapGetters() computed function is called in the About components’ mounted() function.
The mounted() lifecycle hook
The mounted() function is triggered when the component is mounted. This is where we get the current state of the internet connection from the store by calling the getter, getIsInternetConnected. We use its’ value to set the components onlineState data object.
Finally we have a watcher to watch getIsInternetConnected. This is triggered each time the internet connections’ state changes. When this happens, we set the About components’ onlineState data object which in turn toggles the online/offline displayed text.
The root component, App.vue monitors the internet connection and updates the status in the store. Each component gets the current connection status from the store and uses this value together with a v-if/else block to display an appropriate text message.
So, each time the internet connection changes, the root component displays an alert message as well as a text indicator (which will display in the About component as well) and the About component displays an appropriate text indicator (on or offline).
You can check if it works by running your app in localhost and toggling your internet connection on and off.
If you’re using Chrome, open up the Developer Tools and select the Network tab. Tick and un-tick the Offline box while navigating through your app and you should see the alert and text messages change.
I hope you found this tutorial useful