如何在渐进式 Web 应用程序中检查您是否在线

Question

我正在开发一个渐进式 Web 应用程序，我试图确保最终用户可以在离线状态下在本地访问和编辑他们的信息，然后在重新上线后将其与数据库同步。我知道有可能，我似乎找不到指导我如何做到这一点的资源。 我想检查用户是否在线 -> 是的，然后使用我的 api 来验证/授权他们访问应用程序内容
-> 否，然后设置免责声明，如果他们之前在线时没有登录到此设备并选择让设备记住他们，那么他们将无法访问应用程序内容。但如果他们有那么他们就可以登录。

检查他们是否在线是我目前正在努力解决的问题。

我尝试使用 ping 发现浏览器不支持 ping。 我还尝试使用 navigator.onLine，如下面的链接所示： https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine#basic_usage

我考虑过调查await方法是否超时，但我还是个新手，我找不到任何解释我是否可以这样做以及如何做到这一点的内容。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用这3种方法：

console.log(navigator.onLine); // Returns a Boolean  


// This event is called when the internet is connected:

window.addEventListener('online', ()=>{
  console.log('onlined...');
})


// This event is called when the internet is disconnected:

window.addEventListener('offline', ()=>{
  console.log('offlined...');
})

Answer 2

要查看您是否在渐进式 Web 应用程序 (PWA) 中在线，请使用 Navigator.onLine。这个方便的属性会告诉您是否有互联网连接（true 表示您在线， false 表示您离线）。您还可以为在线和离线事件设置侦听器以实时检测变化，以便您调整应用程序或在连接变化时通知用户。