I am developing pusher application by using ionic framework and pusher realtime technologies. 'pusher-angular' dependency injection in app.js is not work in ionic application when I run it in android application. Any suggestion how to solved it? I want to enable $pusher dependency injection in controller so that I can use Pusher realtime API in my application. Any suggestion?
index.html
<!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>
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="//js.pusher.com/3.2/pusher.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" >
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova'])
.run(function($ionicPlatform, $cordovaSQLite) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
db = window.openDatabase("chatChannel.db", "1", "Demo SQLite Test", "2000");
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS chat_channel(id interger primary key, chat_room text, last_text text, username text, chat_channel text unique)")
});
})
Controller.js
.controller('ChatRoomCtrl', ['$scope', '$state', '$rootScope', '$ionicScrollDelegate',
function($scope, $state, $rootScope,$ionicScrollDelegate){
var client = new Pusher('ed05a79be9c11b452872', {
cluster: 'ap1',
encrypted: true
});
var my_channel = client.subscribe(subscribeChannel);
my_channel.bind('chat_message', function(data) {
console.log(data);
$scope.messages.push(data);
});
}
The first issue I see is with the index.html.
<script src="//js.pusher.com/3.2/pusher.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
This lines wont work in Android application but will work in browser. It is because android files are loaded from file:// so it will try to load file://js.pusher.com/3.2/pusher.min.js for example.
You will need to precise the protocol like this :
<script src="https://js.pusher.com/3.2/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
Related
1) Added inappbrowser plugins
2) added googleplus plugins
3) installed ngcordova
4) install ng-cordova-oauth
angular.module('starter', ['ionic','ngCordova','ngCordovaOauth'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('WelcomeCtrl', function($scope, $state, UserService, $ionicLoading,$cordovaOauth) {
$scope.googleSignIn = function() {
console.log('In My Method');
$cordovaOauth.google("here i am using my client id", ["https://www.googleapis.com/auth/urlshortener", "https://www.googleapis.com/auth/userinfo.email"]).then(function(result) {
console.log(JSON.stringify(result));
}, function(error) {
console.log('In Error');
console.log(error);
});
};
})
.service('UserService', function() {
var setUser = function(user_data) {
window.localStorage.starter_google_user = JSON.stringify(user_data);
};
var getUser = function(){
return JSON.parse(window.localStorage.starter_google_user || '{}');
};
return {
getUser: getUser,
setUser: setUser
};
});
<!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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<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="js/ng-cordova.js"></script>
<script src="js/ng-cordova-oauth.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="WelcomeCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<a class="google-sign-in button button-block" ng-click="googleSignIn()">Sign in with Google</a>
</ion-content>
</ion-pane>
</body>
</html>
This code is for login by google in ionic app. but after this, i got a issue "Google no longer supports authentication requests from the web view. More information can be found at https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html.'
Please help me to solve this issue
Unfortunately, you have chosen to implement a soon-to-be-deprecated authentication mechanism for Google. Apr. 2017 is what I believe is the deprecation date, after which this method will not work, and it currently does not work for newer clients.
You will have to implement Google Auth login using the mechanism suggested at that website. Or you can use one of the plugins available, like onymos access.
YES ,Google no longer supports authentication requests from the web view
Just try to make use of Native Oauth Process ,
Please See the link for better understanding
https://www.joshmorony.com/implementing-google-plus-sign-in-with-oauth-2-0-in-ionic-2/
This is geo js file which id directly connected via index.html can you please explain me why i am unable to run. whether it is debugging problem or apk extraction problem.
my ionic project works fine with ionic serve --lab ,but while copied the.apk file in build folder to my phone and install the app but blank screen appears ,
Please can anyone suggest what might be my problem
my app is using google maps,key is provieded for both app and browser in index.html
here is my code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.3850, lng: 78.4867},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
//var posOptions={timeout:10000, enableHighAccuracy:true};
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Here');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
<!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>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJWfIcxV1Q1-lG66bpqhLfBB1zevi9bG4&callback=initMap">
</script>
<!-- your app's js -->
<script src="js/geo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Geo Location example</h1>
</ion-header-bar>
<ion-content>
<div id="map"></div>
</ion-content>
</ion-pane>
</body>
</html>
I am new to Ionic an wanted to create an app to send push notifications. I want to start with ANdroid. These are the commands I have used to setup my project:
ionic plugin add https://github.com/phonegap-build/PushPlugin.git
ionic add ngCordova
ionic add ionic-service-core
ionic add ionic-platform-web-client
ionic add angular-websocket
Here is my app.js:
angular.module('starter', ['ionic',
'ngCordova',
'ionic.service.core'])
.run(function($ionicPlatform) {
$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();
}
});
})
.config(['$ionicAppProvider', function($ionicAppProvider) {
$ionicAppProvider.identify({
app_id: 'xx',
api_key: 'xx'
});
}])
.controller('PushCtrl', function($scope, $rootScope, $ionicUser) {
$rootScope.$on('$cordovaPush:tokenReceived', function(event, data) {
//alert("Successfully registered token " + data.token);
alert('Ionic Push: Got token ', data.token, data.platform);
$scope.token = data.token;
});
$scope.identifyUser = function() {
var user = $ionicUser.get();
if(!user.user_id) {
// Set your user_id here, or generate a random one.
user.user_id = $ionicUser.generateGUID();
};
// Metadata
angular.extend(user, {
name: 'Martijn',
});
// Identify your user with the Ionic User Service
$ionicUser.identify(user).then(function(){
$scope.identified = true;
alert('Identified user ' + user.name + '\n ID ' + user.user_id);
});
};
// Registers a device for push notifications
$scope.pushRegister = function() {
alert('Ionic Push: Registering user');
var user = $ionicUser.get();
alert("User Id:" + user.user_id);
Ionic.io();
var push = new Ionic.Push();
var callback = function(data) {
alert('Registered token:', data.token);
//console.log(data.token);
push.addTokenToUser(user);
user.save();
}
push.register(callback); // ERROR
};
});
Index.html:
<!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/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<script src="lib/angular-websocket/angular-websocket.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ionic-service-core/ionic-core.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script></head>
<body ng-app="starter" ng-controller="PushCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<button class="button button-block button-dark" ng-click="identifyUser()">
Identify a user
</button>
<button class="button button-block button-positive" ng-if="identified" ng-click="pushRegister()">
Register for Push
</button>
</ion-content>
</ion-pane>
</body>
</html>
When running this code I can see the User in my Ionic dashboard. But when I hit the Register for push button, I get an exception: ReferenceError: PushNotification is not defined and then it points to /lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js:3:873.
What do I have to do to make this work?
You need to use new tutorial, libraries you have installed are deprecated.
Notifications are not shown in development version, just callback is called.
When setting Android production push notifications up, you need to use GCM project number, not project ID or API key.
I need to wrap a URL inside the ionic application. I test with windows 8, inside chrome broswer.
On Windows Chrome: redirect to the page inside browser
On Android Phone: close the application without any warning or something else in console.
Please give me a solution to what I need without using iframes.
I followed all the info that each docs gave me and this is how I implement it:
app.js file:
// 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) {
$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('CheckController', function($scope, $cordovaInAppBrowser) {
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
function onDeviceReady() {
window.open = $cordovaInAppBrowser.open('http://apache.org', '_self', {
location: 'no',
hidden: 'yes'
}).then(function(event) {
alert('success');
})
.catch(function(event) {
console.log(event);
});
}
});
<!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>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Lunch External App Demo</h1>
</ion-header-bar>
<ion-content ng-controller="CheckController">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-pane>
</body>
</html>
This is working on Android:
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
onDeviceReady3();
});
function onDeviceReady3(){
var options = {
location: 'no',
clearcache: 'no',
toolbar: 'yes', //only for IOS
hidden:'yes'
};
$cordovaInAppBrowser.open('http://google.com', '_self', options)
.then(function(event) {
// success
alert("success");
})
.catch(function(event) {
// error
alert("error");
});
$cordovaInAppBrowser.close();
}
I am developing an android app using phonegap. I have added google-play-services library project successfully. Now I want to integrate AdMob for advertising purpose. I have followed these steps https://developers.google.com/mobile-ads-sdk/docs/. My project is built and run successfully but ads are not showing there.
I have added AdMob Cordova Plugin and the SCRIPT in index.html. Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<!-- <link href="lib/ionic/css/ionic.css" rel="stylesheet"> -->
<link href="css/app.css" rel="stylesheet">
<!-- <link href="css/leaflet.css" rel="stylesheet">
<link href="css/leaflet.draw.css" rel="stylesheet">
<link href="css/nv.d3.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">
-->
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {
/*background-color: #FA787E;*/
outline: none;
box-shadow:0px 0px 7px #FA787E;
border-color:#FA787E;
}
.css-form input.ng-valid.ng-dirty {
/*background-color: #78FA89;*/
outline: none;
box-shadow:0px 0px 7px #78FA89;
border-color:#78FA89;
}
</style>
<!-- ionic/angularjs js -->
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.js"></script>
<script src="js/geolocation.js"></script>
<script src="js/angularjs-nvd3-directives.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-leaflet-directive.min.js"></script>
<script src="js/leaflet.draw.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view animation="slide-left-right-ios7">
</ion-nav-view>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="deviceinfo.js"></script>
<script type="text/javascript" src="telephonenumber.js"></script>
<script type="text/javascript" src="sharedprefs.js"></script>
<!-- your app's js -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/geolib.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript">
Date.prototype.deductHours= function(h){
this.setHours(this.getHours()-h);
return this;
}
Date.prototype.addHours= function(h){
this.setHours(this.getHours()+h);
return this;
}
</script>
<script>
function onDocLoad() {
initApp();
}
function initApp() {
initAd();
console.log("initApp is running");
// display the banner at startup
window.plugins.AdMob.createBannerView();
}
function initAd(){
if ( window.plugins && window.plugins.AdMob ) {
console.log("initAd is running");
var ad_units = {
ios : {
banner: 'ca-app-pub-2899535788334936/6458250207',
interstitial: 'ca-app-pub-2899535788334936/3672907408'
},
android : {
banner: 'ca-app-pub-2899535788334936/6458250207',
interstitial: 'ca-app-pub-2899535788334936/3672907408'
}
};
var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;
window.plugins.AdMob.setOptions( {
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
bannerAtTop: false, // set to true, to put banner at top
overlap: false, // set to true, to allow banner overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: false, // receiving test ad
autoShow: true // auto show interstitial ad when loaded
});
registerAdEvents();
} else {
alert( 'admob plugin not ready' );
}
}
function registerAdEvents() {
document.addEventListener('onReceiveAd', function(){});
document.addEventListener('onFailedToReceiveAd', function(data){});
document.addEventListener('onPresentAd', function(){});
document.addEventListener('onDismissAd', function(){ });
document.addEventListener('onLeaveToAd', function(){ });
document.addEventListener('onReceiveInterstitialAd', function(){ });
document.addEventListener('onPresentInterstitialAd', function(){ });
document.addEventListener('onDismissInterstitialAd', function(){ });
}
function onResize() {
var msg = 'web view: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('sizeinfo').innerHTML = msg;
}
</script>
</body>
</html>
Can anyone tell me what actually I have missed here? I think my project is not finding the plugin anyhow. But I have added the the plugin in config.xml also. Then whats wrong? Please reply!!
No need to add separate sdk's for both GCM and AdMob, google play services contains both sdk you can use it. Use latest android google play services that contains both sdk packages.
You are doing with old way, actually, google have declared updated google_play_services library, which contains all your individual libraries in it. So dont use individual libs, just get updated google_play_service lib and go on...!!!
Ok my problem solved. The problem was not related to google-play-sevices configuration. So I can't accept any answer. Thank you everyone to help me. At least I got the surety that I was not wrong in google-play-services and admob configuration.