在Ionic应用程序上检查网络状态 [英] Checking network status on Ionic application

问题描述

我编写了以下服务，尝试检查应用程序的连通性，就像在Ionic应用程序中一样，我需要根据用户是离线还是在线来执行某些操作.目前，我遇到3个问题.

I have written the following service which attempts to check for the connectivity of an application, as in my Ionic app, I need to perform certain actions based on whether user is offline or online. Currently I am experiencing 3 problems.

1)在我的桌面上，在浏览器中进行测试时，即使我的wifi不能正常工作，我也总是收到一条 You not connected 消息.如何获得在桌面上显示正确消息的信息?

1) On my desktop, when testing in the browser, I always get an You are not connected message even when my wifi is not work. How can I get it to display the right message on my desktop?

2)在我的手机上，我已经对此进行了测试，是的，它确实可以在加载时正常工作，并且可以正确设置连接状态，但是如果我打开/关闭wifi连接，它不会立即刷新，并且会花费一些时间.如何获取它以在移动应用程序上实时"更新.

2) On my mobile, I've tested this and yes it does work initially onload and sets the connection status correctly but if I switch on/off my wifi connection it does not refresh immediately and takes some time. How can I get it to update "real-time" on my mobile application.

connection.service.js

(function() {
    'use strict';

    angular
    .module('dingocv.services')
    .service('ConnectionService', ConnectionService)


    function ConnectionService($rootScope, $cordovaNetwork) {

    this.isOnline = function() {
      if(ionic.Platform.isWebView()) {
        return $cordovaNetwork.isOnline();
      } else {
        return navigator.OnLine;
      }
    }

    this.isOffline = function() {
      if(ionic.Platform.isWebView()) {
        return !$cordovaNetwork.isOnline();
      } else {
        return !navigator.OnLine;
      }
    }

    this.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);
      }
    }
    }

})();

search.controller.js

(function() {
    'use strict';

    angular
    .module('dingocv.controllers')
    .controller('SearchController', SearchController)


    function SearchController($scope, CategoryService, ConnectionService) {

        if(ConnectionService.isOnline()){
            $scope.connected = true;
        } else {
            $scope.connected = false;
        }

        CategoryService.getCategoryList().then(function(dataResponse) {
            $scope.categories = dataResponse.data;
        });
    }

})();

search.view.html

<ion-view view-title="Search">
    <ion-content>
    <div ng-show="!connected">
        You are not connected
    </div>
    <div ng-show="connected">
        You are connected
    </div>
    </ion-content>
</ion-view>

推荐答案

您可以在下面实现以下代码:

在您的app.js中

var app = angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.service', 'ngCordova']);

app.run(function($ionicPlatform, $ionicPopup, $timeout) {
    $ionicPlatform.ready(function() {
        if(window.Connection) {
            if(navigator.connection.type == Connection.NONE) {
                $ionicPopup.confirm({
                    title: "Internet Disconnected on your device",
                    content: "App requires Network Connection..."
                })
                .then(function(result) {
                    if(!result) {
                        ionic.Platform.exitApp();
                    }
                });
            }
        }
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }   
    });
    var backButton =0;
    $ionicPlatform.registerBackButtonAction(function(){
        if(backButton == 0){
            backButton++;
            $timeout(function(){
                backButton = 0;
            },2000);
        }else{
            navigator.app.exitApp();
        }
    },100);
    window.addEventListener("online", function(e){  },false);
    window.addEventListener("offline", function(e){
        console.log(e);
        $ionicPopup.alert({
            title: "Message",
            template: "There is no internet connection"
        });
    },false);
});

这篇关于在Ionic应用程序上检查网络状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！