651.288.7000 info@intertech.com

Detecting Online Connections Using Angular 7 and NgRx

by | Dec 3, 2018

If you’ve ever seen the Gmail website say “Not connected, retrying in 3s” and wondered how they detected that it was offline (not connected to the internet), this post is for you!   Using Angular 7 and NgRx, I plan to show you how to detect online connection status with a simple effect and an “isOnline” property in state.

Note that there is software called Offline.js that does this for you but I found that it wasn’t 100% reliable in an Angular application.  Sometimes it said it was online but it was actually offline.  Also, it didn’t handle the retry of requests at all.  It may be that the interceptor that I had interfered with it but I’m not sure.

The code for this example is available on github.

 

Initialize the Project Using Angular 7 CLI

The first thing I do is create a project using the Angular 7 CLI and add NgRx using my previous post here.  I don’t want to make the post about initializing a project so if you have questions, see the code on github.

 

Add the NgRx Code

 

Actions

These are the actions I’ll need for NgRx:

  • StartOnlineOfflineCheck is needed to initiate the listening of window events (online/offline)
  • SetIsOnline will update the store with the new value of isOnline to true or false

Reducers

This “network” reducer will handle the SetIsOnline action:

  • Note that I’m defaulting the “isOnline” value to navigator.onLine for an accurate value initially, see below for more about navigator.onLine

This is the main reducer:

  • The getIsOnline selector will be the way we access the “isOnline” slice of state in the app.component

Effect

The meat of the code lies in the effect I’m about to add.  It is code lifted from a stack overflow post.

  • The “merge” command will take the 3 observables and whenever they emit, it will create an action “SetIsOnline” which will update the state with the new value

Add the User Interface

In app.component, I’ll add the following code to get the NgRx “isOnline” value and start the listening in the NetworkEffect:

The HTML will look like this:

Output

The output should look as follows for online/offline states:

On Chrome, you can test this by hitting F12 to get into developer tools and going to the Network tab.  Look for the “Offline” checkbox and click it on and off to see it work.  Unfortunately, IE has no similar checkbox to test it with, that was removed in IE11.

 

Conclusion

As you can see from this article, it isn’t hard to set up in NgRx an “isOnline” state property that updates whenever the internet connection goes down or up.  What you do with that boolean value is up to you.  Most likely you would give the user some sort of indication that it is up or down at a minimum.

 

About Intertech

Founded in 1991, Intertech delivers technology training and software development consulting to Fortune 500, Government and Leading Technology institutions. Learn more about us. Whether you are a developer interested in working for a company that invests in its employees or a company looking to partner with a team of technology leaders who provide solutions, mentor staff and add true business value, we’d like to meet you.

Follow Us

Categories

Intertech Consulting
Course Finder
Design and Code Review Checklist

Like What You've Read?

Subscribe to the Blog.

Every Friday we send that week's content from our Developers via email. Try it out!

Some ad blockers can block the form below.

You have Successfully Subscribed!

Pin It on Pinterest

Share This