Ionic 应用程序上的 navigator.onLine答案

【问题标题】：navigator.onLine on Ionic appIonic 应用程序上的 navigator.onLine
【发布时间】：2016-08-06 13:59:34
【问题描述】：

在我的 Ionic 应用中，我需要根据用户是离线还是在线来执行某些操作。

我将在应用程序中使用 $cordovaNetwork 插件来查找连接状态。但是，在我的笔记本电脑上进行开发期间，我正在寻找一种简单的方法来测试连接性（无需在设备上进行部署）。

所以，我想到了使用 navigator.onLine 来测试离线/在线业务逻辑。但即使我关闭笔记本电脑上的 wifi（笔记本电脑上没有插入 LAN 电缆），navigator.onLine 仍然返回 true。

有人可以建议我如何让 navigator.onLine 返回 false 或任何其他方式来确定是否有互联网连接？

编辑： 浏览器是 Chrome

【问题讨论】：

请分享一些代码sn-ps，以便我们为您提供帮助
if(navigator.onLine) { console.log('用户在线'); } else { console.log('用户离线');即使在我的笔记本电脑上关闭 wifi 时，我总是得到“用户在线”

标签： javascript angularjs ionic-framework

【解决方案1】：

服务代码：

//service to check if device or (browser) is online or offline

.factory('ConnectivityMonitor', function($rootScope, $cordovaNetwork){

  return {
    isOnline: function(){
      if(ionic.Platform.isWebView()){
        return $cordovaNetwork.isOnline(); 
      } else {
        return navigator.onLine;
      }
    },
    isOffline: function(){
      if(ionic.Platform.isWebView()){
        return !$cordovaNetwork.isOnline();    
      } else {
        return !navigator.onLine;
      }
    },
startWatching: function(){
    if(ionic.Platform.isWebView()){

      $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
        console.log("went online");
      });

      $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
        console.log("went offline");
      });

    }else {

      window.addEventListener("online", function(e) {
        console.log("went online");
      }, false);    

      window.addEventListener("offline", function(e) {
        console.log("went offline");
      }, false);  
    }       
}
  }
})

然后在控制器中（一个例子）：

.controller('Map3Ctrl',   
function(ConnectivityMonitor) {

 if(ConnectivityMonitor.isOnline()){
    console.log("online")
 }else{
  console.log("offline");
 }

})

Monitoring Online and Offline States in an Ionic Application

【讨论】：