我编写了以下服务,试图检查应用程序的连接性,就像我的Ionic应用程序一样,我需要根据用户是离线还是在线执行某些操作。目前我遇到了3个问题。
1)在我的桌面上,当在浏览器中进行测试时,即使我的wifi无法正常工作,我也会收到You are not connected
消息。如何让它在我的桌面上显示正确的消息?
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>
答案 0 :(得分:2)
您可以在下面实施以下代码:
在您的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);
});