Add an Offline Status Indicator to a PWA with React

Share this video with your friends

Send Tweet

Since we can view our app offline now, it may be important to tell our users that the app is operating in an offline mode. That way, we can let the user know that the app may not be fully functional until then re-connect to the Internet.

We'll use navigator.onLine to detect if there is a network connection present or not, and then we'll listen for the window's online and offline events to update the offline badge.

zarcode
zarcode
~ 6 years ago

There is an issue here. When I run production build I get "Offline" label even when I am online. It's easy to replicate, just run production build of the app, you will see "Offline" label showing.

Chris Achard
Chris Achard(instructor)
~ 6 years ago

@zarcode: I freshly cloned the repo and re-ran and re-built it, and it seemed to work ok. Which OS and browser are you running?

zarcode
zarcode
~ 6 years ago

All good, really don't know what was wrong that day, maybe my network.

~ 6 years ago

Why do we need to remove event listeners in unmount method ? It works fine without that ?

Chris Achard
Chris Achard(instructor)
~ 6 years ago

It works without removing the event listeners, yes - but in large web apps you want to make sure to remove any event listeners that you add so that you don't have memory leaks. So it might not matter much for this small example, but it's good practice to remove any event listeners when you unmount.