javascript - 检查 Ionic 应用程序的网络状态

Question

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

1) 在我的桌面上，在浏览器中进行测试时，即使我的 wifi 无法工作，我也总是会收到一条 您尚未连接 消息。我怎样才能让它在我的桌面上显示正确的消息？

2)在我的手机上，我已经对此进行了测试，是的，它确实可以在初始加载时工作并正确设置连接状态，但如果我打开/关闭我的 WiFi 连接，它不会立即刷新，并且需要一些时间。我怎样才能让它在我的移动应用程序上“实时”更新。

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>

Answer 1

您可以实现以下代码:

在你的 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);
});