Member-only story

Online and Offline events with JavaScript

Mate Marschalko
3 min readJan 5, 2016

Not many websites handle lost Internet connection and give the user feedback and information but this question should be looked at more often by front-end developers especially when working on mobile websites.

Checking the Internet connection with Javascript is easier than you think. When I first looked at this topic found many libraries like offline.js and others that give you IE8 and desktop browser support but I don’t really see the point. The most important is to give support for mobile devices as that’s where the Internet connection could be unreliable. The below example code will work on most mobile browsers. I works perfectly on Android 2 and better, iOS 6 and better, Blacbkerry 7 and 10 and of course all modern desktop browsers.

“Checking the Internet connection with Javascript is easier than you think…”

Checking the connection status

The navigator global object has many useful properties and methods and the one that we most often use is navigator.userAgent to get the user’s browser and operating system version.

Apart from that it has another one that happens to return true or false depending on whether the device is connected to the network or not:

var connected =…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Mate Marschalko
Mate Marschalko

Written by Mate Marschalko

Senior Creative Developer, Generative AI, Electronics with over 15 years experience | JavaScript, HTML, CSS

Responses (5)

What are your thoughts?

Hey man ! Have you tested this on chrome? Or at least have you checked the documentation for the events before writing this post ? :( Why so many genius out there who are not able to shoot a simple test at least :(

Can you please give brief about when you’re connected to WiFi but network is slower or limited.

Hello,
I am working on PWA app. It looks good when I change the connection status from online to offline or offline to online. I have a case when this code returns incorrect status. for example when running the app in offline and redirect to new…