Блог

Я написал следующую службу, которая пытается проверить подключение приложения, так как в моем приложении Ionic мне нужно выполнить определенные действия в зависимости от того, находится пользователь в автономном режиме или онлайн. В настоящее время я испытываю 3 проблемы.

1) На моем рабочем столе при тестировании в браузере я всегда получаю You are not connected сообщение, даже если мой Wi-Fi не работает. Как я могу заставить его отображать правильное сообщение на моем рабочем столе?

2) На моем мобильном телефоне я протестировал это, и да, оно работает при начальной загрузке и правильно устанавливает статус соединения, но если я включаю / выключаю свое Wi-Fi-соединение, оно обновляется не сразу и занимает некоторое время. Как я могу заставить его обновлять «в режиме реального времени» в моем мобильном приложении.

подключение.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 amp;amp; 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);
});