Question

I need to understand while my web app working if browser is connect to internet or not. This mean I have to use cloud data or localstore one.

When i use navigator.onLine only chrome tell me the truth. Firefox or Safari only check if I am connect to wi-fi.

I create a function that send a ping to a specific website and try to download a little file every time, but if I use my web app on a mobile this is not a good solution.

Can anyone can tell me another idea?

Answer 1

It depends what you mean by ‘connected to the internet’. There are so many points on the path from your browser to a server resource which could fail. Is it your local connection? A problem at your default gateway? A routing problem on the wider network? A problem with the server application you’re trying to access?

The only way to be absolutely sure that the resource you need is available, with no issues anywhere on the journey, is to try to obtain the resource you need. But it could be quite slow to check this if you’re having to wait for timeouts before determining that there really is a problem.

Have you considered a different approach to running a browser application offline, whereby you always persist data to localstore and regularly synchronise it to the server asynchronously? You could provide feedback to the user as to whether or not the sync to the server was successful, but be satisfied that data would always get saved locally regardless.

I know of one library which helps with this, that being the new Microsoft Single Page Application framework. Surely there must be other non-Microsoft equivalents too.

EDIT: This looks like a very interesting ground-up approach as to how you might do this.

There are questions on SO about this approach, should you want to write something yourself: Question on offline HTML5 database sync.