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

Question

曾经存在offline.js 用于检测连接，但该项目不再维护。此外，浏览器的 'navigator.onLine' 属性是臭名昭著的unreliable。

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

请注意，我的用户群中的 nobody 将更改浏览器中的“脱机工作”设置以联机/脱机。相反，他们会拔掉网线、断开 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 = "test.js?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 = "test.js?rand=";
const response = fetch(url + randomNum)
                .then(function () {
                    console.log("Your Internet connection was restored.");
                     clearInterval(interval);
                     flag = true;
})
.catch(function () {
                    return null;
                });
};