- 9Add an Offline Status Indicator to a PWA with React1m 42s
Add an Offline Status Indicator to a PWA with React
Share this video with your friends
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.
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.
@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?
All good, really don't know what was wrong that day, maybe my network.
Why do we need to remove event listeners in unmount method ? It works fine without that ?
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.