Our team has started using Offline.js, a library that can detect if a user is offline. We have currently set it up to look for an image on our server using the following code:
Offline.options = {checks: {xhr: {url: 'resources/bower/offline/img/tiny-image.gif'}}};
However, we have found that if our server goes down, the end user gets an error saying that their internet is disconnected, which is not true. Their internet is fine, it is a problem on our end.
I do not believe it is possible to check with a website that has more reliable uptime; it must be something on our server. From the Offline.js documentation:
Make sure that the URL you check has the same origin as your page (the connection method, domain and port all must be the same), or you will run into CORS issues.
So how can I make Offline.js distinguish between genuine offline behavior and the server being down?
I saw this in the offline.js docs at https://github.com/hubspot/offline:
If you do want to run tests on a different domain, try the image method. It loads an image, which are allowed to cross domains.
Offline.options = {checks: {image: {url: 'my-image.gif'}, active: 'image'}}
So you could use something like the google logo:
Offline.options = {checks: {image: {url: 'https://www.google.com/images/srpr/logo11w.png'}, active: 'image'}}