How to check if the user is online using javascript or any library?

前端未结

关注

 10  1683

I need some help on how I could check the internet connection using Javascript or jQuery or any library if available. cause i\'m developing an offline appl

相关标签:

10条回答

失恋的感觉

2020-12-03 01:36
My solution is to grab a very small image (1x1), not cached and always onLine.
```
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>
```
Notes:
- Use a local copy of jQuery otherwise it won't work offLine.
- I've tested the code onLine/offLine and it works without delay.
- Works with all browsers, Desktop or Mobile.
- In case you wonder, there's no tracking made from Google Analytics as we don't use any arguments.
- Feel free to change the image, just make sure it doesn't get cached and it's small in size.
0 讨论(0)
发布评论:

提交评论
- 加载中...
情话喂你

2020-12-03 01:39
You can use the new Fetch API which will trigger an error almost immediately if no network is present.

The problem with this is that the Fetch API has infant support at the moment (currently Chrome has the most stable implementation, Firefox and Opera is getting there, IE does not support it). There exists a polyfill to support the fetch principle but not necessarily the rapid return as with a pure implementation. On the other hand, an offline app would require a modern browser...

An example which will try to load a plain text file over HTTPS to avoid CORS requirements (link is picked at random, you should set up a server with a tiny text file to test against - test in Chrome, for now):
```
fetch("https://link.to/some/testfile")
    .then(function(response) {
        if (response.status !== 200) {  // add more checks here, ie. 30x etc.
            alert("Not available");     // could be server errors
        }
        else
            alert("OK");
    })
    .catch(function(err) {
        alert("No network");           // likely network errors (incl. no connection)
    });
```
Another option is to set up a Service worker and use fetch from there. This way you could serve an optional/custom offline page or a cached page when the requested page is not available. Also this is a very fresh API.
0 讨论(0)
发布评论:

提交评论
- 加载中...
谎友^

2020-12-03 01:52

i think you should try OFFLINE.js.. it looks pretty easy to use, just give it a try.

it even provides the option checkOnLoad which checks the connection immediately on page load.

Offline.check(): Check the current status of the connection.

Offline.state: The current state of the connection 'up' or 'down'

haven't tried it, would be nice to know if it works as intended.

EDIT took a little peak into the code, it uses the method with FAILED XHR REQUEST suggested in THIS SO Question

0 讨论(0)
发布评论:

提交评论
- 加载中...

清歌不尽

2020-12-03 01:52

navigator.onLine is a property that maintains a true/false value (true for online, false for offline). This property is updated whenever the user switches into "Offline Mode".

window.addEventListener('load', function() {

  function updateOnlineStatus(event) {
     document.body.setAttribute("data-online", navigator.onLine);
  }
  updateOnlineStatus();
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

0 讨论(0)

孤独总比滥情好

2020-12-03 01:54
See How do I check connection type (WiFi/LAN/WWAN) using HTML5/JavaScript? answers:
- Rob W suggests navigator.connection;
- Bergi suggests Windows.Networking.Connectivity API through this tutorial;
- Gerard Sexton suggests Gmail approach.
0 讨论(0)
发布评论:

提交评论
- 加载中...

傲寒

2020-12-03 01:55

// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "http://www.yoursite.com/somefile.png";
    var randomNum = Math.round(Math.random() * 10000);

    xhr.open('HEAD', file + "?rand=" + randomNum, false);

    try {
        xhr.send();

        if (xhr.status >= 200 && xhr.status < 304) {
            return true;
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}

0 讨论(0)

1 2 下一页