2018年如何检测浏览器是否离线？

Question

曾经存在用于检测连接的offline.js ，但该项目不再维护。 此外，众所周知，浏览器的“navigator.onLine”属性不可靠。

用于主动检测浏览器在线状态的最佳/最新方法是什么，与现代浏览器（包括移动设备浏览器）兼容，可以在在线状态发生变化时引发各种事件？ 我需要自己写这个，还是重新发明轮子？

请注意，我的用户群中没有人会为了联机/脱机而更改浏览器中的“脱机工作”设置。 相反，他们会拔掉网线，断开 wifi 网络，开车到没有信号的地方等等。

我的想法是简单地设置一个超时来重复对我服务器上的 URL 进行 AJAX 调用，并简单地将“在线”变量设置为 true/false 以及根据 AJAX 的错误/成功调用在线/离线回调函数打电话。 这是推荐的方式吗？

Answer 1

简单地使用

navigator.onLine

查看浏览器支持https://caniuse.com/#feat=online-status

Answer 2

使用

`var wentOffline, wentOnline;
 function handleConnectionChange(event){
    if(event.type == "offline"){
        console.log("You lost connection.");
        wentOffline = new Date(event.timeStamp);
    }
    if(event.type == "online"){
        console.log("You are now back online.");
        wentOnline = new Date(event.timeStamp);
        console.log("You were offline for " + (wentOnline — wentOffline) / 1000 + "seconds.");
    }
}
window.addEventListener('online', handleConnectionChange);
window.addEventListener('offline', handleConnectionChange);`

检查帖子： https : //medium.com/@MateMarschalko/online-and-offline-events-with-javascript-d424bec8f43

Answer 3

我进行了类似的实现，这是我使用 setInterval 和 fetch API 的解决方案。 将有 2 个功能，第一个功能将每 30 秒运行一次，检查互联网连接。 一个标志变量被设置为 true，它将控制函数的执行。 在断开连接的情况下，将调用第二个函数以每 5 秒调用一次 fetch API。 如果成功连接，则该标志设置为 true，因此可以每 30 秒再次执行第一个函数并清除间隔。

doesConnectionExist: function() {
setInterval(function () {
if(flag === true){
let randomNum = Math.round(Math.random() * 10000);
let url = "google.com?rand=";
const response = fetch(url + randomNum)
                .then(function () {
                    clearInterval(interval);
                })
                .catch(function () {
                     console.log("You are currently offline.");
                     interval = setInterval(function () { checkForConnectivity(); }, 5000);
                });
}
}, 30000);
}

checkConnectivity: function() {
flag = false;
let randomNum = Math.round(Math.random() * 10000);
let url = "google.com?rand=";
const response = fetch(url + randomNum)
                .then(function () {
                    console.log("Your Internet connection was restored.");
                     clearInterval(interval);
                     flag = true;
})
.catch(function () {
                    return null;
                });
};