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

Posted 2023-02-19

【中文标题】如何检测浏览器是不是在 2018 年离线？

【英文标题】：How to detect if browser is offline in 2018?如何检测浏览器是否在 2018 年离线？

【发布时间】：2018-09-12 03:58:50

【问题描述】：

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

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

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

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

【问题讨论】：

或许可以试试online/offline events？虽然它可能与 navigator.onLine 相同，但根据 MDN link?

在现代浏览器中应该是可靠的

@MalteR 我认为这些事件也不能保证提供真正的在线/离线状态......听起来更像是在offline.js库之后没有人为此开发一个新库被留下等死。我想知道为什么？我错过了什么吗？

@MalteR 事件也不起作用...

瑞恩你找到什么了吗？我自己写了一个；使用“连接服务”进行持续 ping 并跟踪“在线”属性（和行为主题），以及尝试根据对我的后端的任何请求设置状态的 http 拦截器。这真的很不稳定，但这就是我将浏览器解释为离线的方式，或者更确切地说，后端无法访问：(err.status === 0 && err.ok === false && err.name === 'HttpErrorResponse') || err.status === 504，但我很确定这是依赖于浏览器/库的。

@VincentSels 是的，这也是。只需点击一个 web api 并检查错误。

【参考方案1】：

简单地使用

navigator.onLine

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

【讨论】：

我不确定你为什么说它不再工作了，这是一个被广泛接受的功能，请参阅浏览器支持

如果你测试过它，你会发现它不起作用

刚刚在 chrome 版本 69.0.3497.100 中测试

你是如何通过打开和关闭 wifi 或通过 DevTools 来测试它的？在 DevTool 中它会工作，但如果你真的打开/关闭你的连接就不行

我用相同的 Chrome 浏览器版本（在 Ubuntu 上）对不同的笔记本电脑/用户进行了测试，出于某种原因，它适用于某些笔记本电脑，但不适用于其他笔记本电脑。

【参考方案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

【参考方案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;
                );
;

【讨论】：

我喜欢在连接断开时更快地轮询的想法，因此您会更快地检测到重新连接。

您可以尝试调用本地js文件而不是外部网站，响应时间会更快，在我的情况下，它在几毫秒内返回。我也更新了代码。