0

I've a tried a lot of things to check the internet connection of the users of my app. My first researches brought me to the navigator.onLine method. It works sometimes. But sometimes it doesn't. Of course it's not new, I have seen multiples people complaining about that.

Then I tried the XHR request. It was working on every devices, whatever the internet navigator (not like the previous method). But I got some warnings from Chrome and Firefox cos it was synchronous and may slow the whole app.

So I converted my function to an asynchronous function :

function verification() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "//" + window.location.hostname + "/ressources/favicon.ico?rand=" + Date.now(), true);

    xhr.onload = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            reconnection();
        }
    };

    xhr.onerror = function (e) {
        deconnexion();
    };

    xhr.send(null);
}

The idea is simple, I check if I can access to the favicon (with a rand to make it unique and avoid cache ressource). If the request is a success then I consider I'm connected. If not, I'm not connected. So far, it seems to work pretty well.

My question is : is it the best way to do that with pure JS ? Or should I maybe consider using fetch ? Or is there a better way I didn't find ?

  • 4
    `fetch` is not pure JS? – Ivar Jul 29 '20 at 12:45
  • The [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) method returns a `Promise` and is completely `async`. – Mr. Polywhirl Jul 29 '20 at 12:48
  • I didn't mean that `fetch`is not pure JS. I just wonder what's the best method for what I want to do –  Jul 29 '20 at 12:57
  • If it works like this, then go with it. It's not necessarily better or worst than the `fetch` API. (You can see the differences [here](https://stackoverflow.com/questions/35549547/fetch-api-vs-xmlhttprequest).) Personally I would use an endpoint that returns a [`204`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204) with a [`Cache-Control: no-store`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) response header. That way you don't need to load an image for every request. – Ivar Jul 29 '20 at 13:13

0 Answers0