创建一个很棒的网站，只是让用户由于他们的Internet连接而无法浏览是您可能遇到的更大的噩梦之一。用户通常没有意识到，虽然您的网站运行良好，但他们的互联网连接存在问题。如果用户在浏览您的网站时与互联网断开连接，则JavaScript提供了一种与用户交流的简便方法。这涉及JavaScript导航器API和窗口对象上的eventListener，这将帮助我们跟踪用户的连接。onLine属性返回一个布尔值，指定浏览器是处于在线模式还是离线模式您可能希望向用户添加一个小的弹出消息，通知他们他们已经断开连接，并在他们重新在线时欢迎他们回到您的网站。您应该将这些事件侦听器添加到加载事件侦听器，以便在用户访问（加载）您的站点时初始化它们。showOnlineStatus函数可以帮助您向用户显示自定义消息。例如，如下所示：Showcustommessagebasedonconnectionstatus您可以在CodePen上找到上述示例的完整源代码。CodePen：https://codepen.io/varunjoshi995/pen/MWazKjB然而，这个属性可能不完全可信，如MDN中所述：在Chrome和Safari中，如果浏览器无法连接到局域网(LAN)或路由器,表示浏览器离线；所有其他条件返回真。所以，当浏览器返回一个假值时，你可以认为它离线了，但你不能假设一个真值就一定意味着浏览器在线。这意味着navigator.onLine属性可能会导致误报。因此，我们可能需要考虑其他的确定方法。其中一种方法是使用OfflineJS，这是一个很酷的库，用于通知您的用户他们已失去与您站点的连接。它提供漂亮的主题，几乎不需要配置。OfflineJS：https://github.hubspot.com/offline/docs/welcome/如果你不想使用OfflineJS，更好的解决方案是调用服务器端API。如果客户端/用户离线，API调用将失败并返回错误响应。如果您使用的是Axios，则可能缺少error.response，这可能意味着客户端/用户处于离线状态。上面的示例与navigator.onLine属性一起可以帮助避免误报，并且您可以确定用户是否连接到Internet或网络。希望这可以帮助！现在，您可以通知用户是否连接到互联网。它只能为访问您网站的用户带来更好的体验！编码愉快！
