I'm making an app in cordova. I've installed some plugins, but problem is that I cannot use those plugins as when I try to call them like window.plugins.googleplus.login then it says property 'plugins' does not exists on window. So I searched from solution and they said use window['plugins'] I tried that too, but now it says undefined.
I tried cordova plugins ls and it lists all my plugins. Also checked available plugins in android.json, all plugins are there. Can anyone help me why it is undefined? My index.html looks like below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrmbl</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<base href="./">
<script type=”text/javascript” src="cordova.js"></script>
</head>
<body>
<app-root>
<center>
<div style="margin-top: 200px;">
<img src="./assets_v2/images/icon.png" alt="" >
<br><br>
<img src="./assets_v2/images/preloader.gif" alt="">
</div>
</center>
</app-root>
</body>
</html>
Any help will be highly appreciated.
cordova --version
8.0.0
I think you are calling it without deviceready. None of the googleplus methods should be called before deviceready has fired. The plugin should be called when everything's ready for the plugin to be called.
Example:
document.addEventListener('deviceready', deviceReady, false); function deviceReady() {
console.log('Device is ready!'); window.plugins.googleplus.trySilentLogin(...); }
Reference visit here
I am trying to build a simple cordova app on iOS and Android. It worked fine on iOS. However it fails to execute on android. I am using Android Studio.
The html file still runs in android, but the addEventListener for deviceReady is not working.
This piece of code works fine in iOS but not in android:
<p id="ready" style="text-align: center">deviceready not called yet</p>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
console.log("cordova ready");
var readyElement = document.getElementById("ready");
readyElement.innerHTML = "deviceready called but not finished";
readyElement.innerHTML = "Ready";
console.log('Ready');
}, false);
</script>
I have included the both cordova-2.4.0.js and cordova.js in the project folder, but I have no idea why it doesnt connect properly.
After the page loads, the label 'device ready not called yet should be changed to device ready' , but it doesnt change in android. Can anyone suggest me the right way to do it ?
Note: 'cordova.js' is generated by the cordova in android , and 'cordova-2.4.0.js' is the one generated in iOS.
Even though I copied the iOS cordova-2.4.0.js file, it didnt worked.
Looks like I have to include only one cordova.js file generated by the cordova .
I removed the line:
<script type="text/javascript" src="cordova-2.4.0.js"></script>
and I used only:
<script type="text/javascript" src="cordova.js"></script>
and it worked.
I have followed this article:
to get network information of the device in ionic app for android.
It works fine on browser but when I install the compiled apk in android phone, it gives an error that says Reference error : Connection is not defined. at line where I use $cordovaNetwork.isOnline();
I have been banging my head around and have done my due research and tried uninstalling and installing it in the order suggested but no help.
Help me fix this issue. This problem is probably not an issue with code and may be need some clever fix to get it working.
This same issue is being discussed here but I have not really understood where is that given piece of code coming from.
index.html :
<!DOCTYPE html>
<html ng-app="starter" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- <link href="lib/ionic/css/angular-datepicker.min.css" rel="stylesheet"> -->
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- angular date picker css-->
<link href="lib/datePicker/css/angular-pickadate.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/highcharts-ng.js"></script>
<script src="lib/ionic/js/jquery.min.js"></script>
<script src="lib/ionic/js/highcharts.js"></script>
<script src="lib/ionic/js/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="LoginCtrl">
<ion-nav-bar class="mob-bar-balanced">
<!-- <ion-nav-back-button>
</ion-nav-back-button> -->
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js:
app.factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', function($rootScope, $cordovaNetwork){
return {
isOnline: function(){
if(ionic.Platform.isWebView()){
$rootScope.online = $cordovaNetwork.isOnline();
return $cordovaNetwork.isOnline();
} else {
$rootScope.online = navigator.onLine;
return navigator.onLine;
}
},
isOffline: function(){
if(ionic.Platform.isWebView()){
$rootScope.online = $cordovaNetwork.isOnline();
return !$cordovaNetwork.isOnline();
} else {
$rootScope.online = navigator.onLine;
return !navigator.onLine;
}
},
startWatching: function(){
if(ionic.Platform.isWebView()){
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
$rootScope.online =true;
console.log("went online");
});
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
$rootScope.online =false;
console.log("went offline");
});
}
else {
window.addEventListener("online", function(e) {
$rootScope.online =true;
console.log("went online");
}, false);
window.addEventListener("offline", function(e) {
$rootScope.online =false;
console.log("went offline");
}, false);
}
}
}
}]);
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('Login',{
url:'/login',
onEnter:["$state","$localStorage", '$rootScope' , '$ionicViewSwitcher',function($state,$localStorage, $rootScope, $ionicViewSwitcher){
if((typeof($localStorage.userInfo)!== 'undefined') && (Object.keys($localStorage.userInfo).length !== 0)) {
$ionicViewSwitcher.nextTransition('none');
$state.go("Deployment");
}
}],
templateUrl:'templates/login.html',
controller:'LoginCtrl',
resolve: {
online: function(ConnectivityMonitor){
return ConnectivityMonitor.isOnline();
}
}
})
I don't know about the tutorial you're mentioning, however, you may want to check the post I wrote which goes literally step by step telling you where and why you should put some piece of code (may be useful if you're just starting with Ionic): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/.
Also, I made the example code available freely on Github: https://github.com/Hitman666/IonicNetworkInfo. You can download the project (if you don't want to go through the steps yourself) build it for your device and test it on the device.
Here are the steps from the blog posts:
Start a new Ionic project by doing:
ionic start IonicNetworkInfo blank
Then, change the directory to the newly created IonicNetworkInfo:
cd IonicNetworkInfo
Install ngCordova with Bower:
bower install ngCordova
If by some chance you don’t have bower installed, you can install it with npm:
npm install bower -g
Open up the www/index.html file in your favorite editor, and add the reference to ngCordova (just above the cordova.js script):
<!-- This is what you should add, the cordova below you'll already have -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
Install the ngCordova network plugin by executing the following command in your Terminal/Command prompt (you should do this from the root directory of your app; so, in our case the IonicNetworkInfo directory):
cordova plugin add org.apache.cordova.network-information
To check if you have successfully installed the plugin, you can run the following command (from the root directory – I won’t be repeating this anymore; when I say you should run some command from the Terminal/Command prompt that, in this case, means from the root directory of the application):
cordova plugin list
You should see the following output:
> cordova plugin list
com.ionic.keyboard 1.0.4 "Keyboard"
org.apache.cordova.network-information 0.2.15 "Network Information"
Open up the www/js/app.js file and add ngCordova to the dependencies list, so that basically the first line looks like this:
angular.module('starter', ['ionic', 'ngCordova'])
Create a new controller in the www/js/app.js file called MyCtrl, with the following content:
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
document.addEventListener("deviceready", function () {
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
})
In this controller you attach an event listener on the deviceready event (because it could be that the device would not have been yet initialized when this code runs) and you get the network information with:
$cordovaNetwork.getNetwork();
The information, about weather you’re connected to the internet is obtained with the following line:
$scope.isOnline = $cordovaNetwork.isOnline();
Then, you register two events $cordovaNetwork:online and $cordovaNetwork:online which trigger when the device gets online/offline. In them you then just update the $scope variables ().
Just for reference, the whole content of the www/js/app.js file should be:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
document.addEventListener("deviceready", function () {
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
});
In the index.html file, inside the ion-content tag paste the following content:
<div class="card">
<div class="item item-text-wrap">
<h1>Network: {{network}}</h1>
</div>
</div>
<div class="card">
<div class="item item-text-wrap">
<ion-toggle ng-model="isOnline" ng-checked="item.checked">
<h1 ng-show="isOnline">I'm online</h1>
<h1 ng-show="! isOnline">I'm offline</h1>
</ion-toggle>
</div>
</div>
Basically what we do here is we show the contents of the network variable (which is attached to the $scope via the controller). Also, by using the ion-toggle component we show the “I’m online” / “I’m offline” notifications.
Just for reference, the content of the whole index.html file should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="MyCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content padding="true">
<div class="card">
<div class="item item-text-wrap">
<h1>Network: {{network}}</h1>
</div>
</div>
<div class="card">
<div class="item item-text-wrap">
<ion-toggle ng-model="isOnline" ng-checked="item.checked">
<h1 ng-show="isOnline">I'm online</h1>
<h1 ng-show="! isOnline">I'm offline</h1>
</ion-toggle>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
In order to test this application you should run it on your device (because you can’t disable network in iOS simulator). If you have an Android device plugged to your computer (and all the SDKs in place) you can run the following to commands to get your application running on your Android device:
ionic build android && ionic run android
Maybe you have not installed Network-Plugin. Please check this.
Now, I think it would be a better approach to use
$ionicPlatform.ready(function() {
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
});
instead of document.addEventListener("deviceready", function () {
I don't know why the plugin manager throw exec() call to unknown plugin: StatusBarNotification, I downloaded a example and tried to make it equal, but I couldn't.
I am using phonegap 3.5
config.xml
<plugin name="StatusBarNotification" value="com.phonegap.plugins.statusBarNotification.StatusBarNotification"/>
index.html
<body>
<div class="app">
<h1>PhoneGap</h1>
<button onclick="sendNotification()"> Mensaje</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/statusbarnotification.js"></script>
<script type="text/javascript" charset="utf-8">
function sendNotification() {
window.plugins.statusBarNotification.notify("Sample Notification", "mensajito");
}
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
It looks like the plugin you are using is not for Cordova/PhoneGap >= version 3.0.
Since 3.0, everything should be done via the CLI, including installing plugins: https://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html
You then don't include references to any plugin javascript, as Cordova takes care of this.
You can search for compatible plugins on either of these 2 sites:
http://plugreg.com
http://plugins.cordova.io
Hopefully this helps.
I'm creating java script hybrid app with IntelXDK android build for android platform.
I'm unable to exit from my app using following code:
<html>
<head>
<title></title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript"">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function exitFromApp()
{
navigator.app.exitApp();
}
</script>
</head>
<body onload="onLoad();">
<button name="buttonClick" onclick="exitFromApp()">Click Me!</button>
</body>
</html>
The same code works well with IntelXDK crosswalk build.
How to close an app using android build?
I checked and it does not work in the android build. There will be an update late March that updates the android build to a newer cordova. I verified that it works here. Maybe you can continue to use crosswalk build until then?