Cordova PushPlugin onNotification ecb not fired - angularjs

myApp.services.factory('GCMHelper', ($q)->
pushNotification = {}
_init = ()->
defer = $q.defer()
ionic.Platform.ready(()->
pushNotification = window.plugins.pushNotification;
window.onNotification = (res)->
console.log('onNotification', res)
defer.resolve()
)
return defer.promise
return {
register: ()->
_init().then(()->
pushNotification.register(
(res)->
console.log('gcm register success', res)
(err)->
console.log('gcm register err', err)
{
"senderID": "*********",
"ecb": "onNotification"
}
);
)
}
)
in controller:
GCMHelper.register()
(Please excuse my poor English)
I'm tring Cordova PushPlugin with Cordova 4.2 and Ionic beta 14, it got success callback every time with "OK" string, but ecb onNotification never fired, and no error at console. I almost have no ideal with that..., any one help?

Use the following for Push Notification in Android and iOS. It will work properly for you. After install the app, user will need to open the app for call ecb methods. In iOS, PushNotifcation's register success method will returns the mobile register id in result but in android, it will return only OK. In Android, onNotificationGCM method will be called for two type event 1) RegisterId and 2) Notification Message. I have also added the showNotificationAPN/GCM method for show notification popups with $ionicPopup.alert().
.run(function ($ionicPlatform, PushProcessingService) {
$ionicPlatform.ready(function () {
try {
PushProcessingService.initialize();
} catch (e) {
//hide event
}
})
})
.factory('PushProcessingService', ["$window", "$ionicPopup", function ($window, $ionicPopup) {
function onDeviceReady() {
var pushNotification = window.plugins.pushNotification;
if (ionic.Platform.isAndroid()) {
pushNotification.register(gcmSuccessHandler, gcmErrorHandler, {'senderID': 'XXXXXXXXXXXXXX', 'ecb': 'onNotificationGCM'});
} else if (ionic.Platform.isIOS()) {
var config = {
"badge": "true",
"sound": "true",
"alert": "true",
"ecb": "pushCallbacks.onNotificationAPN"
};
pushNotification.register(gcmSuccessHandler, gcmErrorHandler, config);
}
var addCallback = function addCallback(key, callback){
if(window.pushCallbacks == undefined){
window.pushCallbacks = {};
}
window.pushCallbacks[key] = callback({registered:true});
}
}
function gcmSuccessHandler(result) {
console.log("Register push notification successfully : " + result);
if (ionic.Platform.isIOS()) {
var mobileType = "ios";
var mobileRegisterId = result;
// Save the ios mobile register Id in your server database
// call the following method on callback of save
addCallback("onNotificationAPN", onNotificationAPN);
}
}
function gcmErrorHandler(error) {
console.log("Error while register push notification : " + error);
}
return {
initialize: function () {
document.addEventListener('deviceready', onDeviceReady, false);
},
registerID: function (id) {
var mobileType = "android";
// Save the android mobile register Id in your server database
console.log("RegisterId saved successfully.");
},
showNotificationGCM: function (event) {
$ionicPopup.alert({
title: "Pajhwok Notification",
subTitle: event.payload.type,
template: event.payload.message
});
},
showNotificationAPN: function (event) {
$ionicPopup.alert({
title: event.messageFrom + "..",
subTitle: event.alert,
template: event.body
});
}
}
}])
onNotificationAPN = function(event) {
if (!event.registered) {
var elem = angular.element(document.querySelector('[ng-app]'));
var injector = elem.injector();
var myService = injector.get('PushProcessingService');
myService.showNotificationAPN(event);
} else {
console.log("Registered successfully notification..");
}
}
function onNotificationGCM(e) {
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
// Your GCM push server needs to know the regID before it can push to this device
// here is where you might want to send it the regID for later use.
var elem = angular.element(document.querySelector('[ng-app]'));
var injector = elem.injector();
var myService = injector.get('PushProcessingService');
myService.registerID(e.regid);
}
break;
case 'message':
// if this flag is set, this notification happened while we were in the foreground.
// you might want to play a sound to get the user's attention, throw up a dialog, etc.
var elem = angular.element(document.querySelector('[ng-app]'));
var injector = elem.injector();
var myService = injector.get('PushProcessingService');
myService.showNotificationGCM(e);
break;
case 'error':
alert('<li>ERROR :' + e.msg + '</li>');
break;
default:
alert('<li>Unknown, an event was received and we do not know what it is.</li>');
break;
}
}

Related

Delay loading data in Angular JS

I have code like this
(function (app) {
app.controller('productListController', productListController)
productListController.$inject = ['$scope', 'apiService', 'notificationService', '$ngBootbox', '$filter'];
function productListController($scope, apiService, notificationService, $ngBootbox, $filter) {
$scope.products = [];
$scope.page = 0;
$scope.pagesCount = 0;
$scope.getProducts = getProducts;
$scope.keyword = '';
$scope.search = search;
$scope.deleteProduct = deleteProduct;
$scope.selectAll = selectAll;
$scope.deleteMultiple = deleteMultiple;
function deleteMultiple() {
var listId = [];
$.each($scope.selected, function (i, item) {
listId.push(item.ID);
});
var config = {
params: {
checkedProducts: JSON.stringify(listId)
}
}
apiService.del('/api/product/deletemulti', config, function (result) {
notificationService.displaySuccess('Deleted successfully ' + result.data + 'record(s).');
search();
}, function (error) {
notificationService.displayError('Can not delete product.');
});
}
$scope.isAll = false;
function selectAll() {
if ($scope.isAll === false) {
angular.forEach($scope.products, function (item) {
item.checked = true;
});
$scope.isAll = true;
} else {
angular.forEach($scope.products, function (item) {
item.checked = false;
});
$scope.isAll = false;
}
}
$scope.$watch("products", function (n, o) {
var checked = $filter("filter")(n, { checked: true });
if (checked.length) {
$scope.selected = checked;
$('#btnDelete').removeAttr('disabled');
} else {
$('#btnDelete').attr('disabled', 'disabled');
}
}, true);
function deleteProduct(id) {
$ngBootbox.confirm('Are you sure to detele?').then(function () {
var config = {
params: {
id: id
}
}
apiService.del('/api/product/delete', config, function () {
notificationService.displaySuccess('The product hase been deleted successfully!');
search();
}, function () {
notificationService.displayError('Can not delete product');
})
});
}
function search() {
getProducts();
}
function getProducts(page) {
page = page || 0;
var config = {
params: {
keyword: $scope.keyword,
page: page,
pageSize: 20
}
}
apiService.get('/api/product/getall', config, function (result) {
if (result.data.TotalCount == 0) {
notificationService.displayWarning('Can not find any record.');
}
$scope.products = result.data.Items;
$scope.page = result.data.Page;
$scope.pagesCount = result.data.TotalPages;
$scope.totalCount = result.data.TotalCount;
}, function () {
console.log('Load product failed.');
});
}
$scope.getProducts();
}
})(angular.module('THTCMS.products'));
So my problem is when i loading data the application take me some time to load data.
I need load data as soon as
Is the any solution for this?
Since you are loading data via api call, there will be a delay. To handle this delay, you should display a loading screen. Once the data is loaded, the loading screen gets hidden and your main screen is visible. You can achieve this using $http interceptors.
See : Showing Spinner GIF during $http request in angular
The api-call is almost certainly causing the delay. Data may be received slowly via the api-call so you could display any sort of loading text/image to notify the use that the data is being loaded.
If u want the data ready at the time when controller inits, u can add a resolve param and pass the api call as a $promise in the route configuration for this route.

AngularJS update Service values when connected or disconnected to firebase

I wish to change the icon color when connected or disconnected to the firebase server. I got this far:
HTML
<button class="button button-icon ion-cloud" ng-style="dbConnectedStyle"></button>
Controller
firebaseRef.$loaded().then( function() {
$scope.dbConnectedStyle = {'color': dbConnectStatus.color};
}
Service
.service('dbConnectStatus', function(firebaseRef){
var status = false;
var color = 'transparent';
var connectedRef = firebaseRef.child(".info/connected");
connectedRef.on("value", function(snap) {
status = snap.val();
if (status) {
color = 'lightgrey';
console.log("Connected to DB (" + color + ")" );
} else {
color = 'transparent';
console.log("Disonnected to DB (" + color + ")" );
}
});
return {
'boolean': status,
'color': color
}
})
It change color the first time. But when disconnecting it doesn't change... seems like it's not two-way binding to the service. How do I achieve this?
UPDATE
Tried to do a reference to the Service as an object rather than doing primitives assignments as explained in the good tutorial A Tale of Frankenstein and Binding to Service Values in Angular.js
I changed the code to the following
HTML
<button class="button button-icon ion-cloud"
ng-style="dbConnectionStatus.connectionStyle">
</button>
Service
.service('dbConnectStatus', function(firebaseRef, $rootScope){
this.status = false;
var styles = {
'offlineStyle': {'color': 'red'},
'onlineStyle': {'color': 'lightgrey'}
};
this.connectionStyle = styles.offlineStyle;
firebaseRef.child(".info/connected")
.on("value",
function(snap) {
this.status = snap.val();
if (snap.val()) {
console.log("Connected to DB.");
this.connectionStyle = styles.onlineStyle;
console.log(this.connectionStyle);
} else {
console.log("Disconnected to DB.");
this.connectionStyle = styles.offlineStyle;
console.log(this.connectionStyle);
}
console.log(this.status);
$rootScope.$broadcast('dbConnection:changed');
}
);
})
Controller
$scope.dbConnectionStatus = dbConnectStatus;
$scope.$on('dbConnection:changed', function() {
console.log("'on(...)' called. This is the $scope.dbConnectionStatus.connectionStyle:");
$scope.dbConnectionStatus = dbConnectStatus;
console.log($scope.dbConnectionStatus.connectionStyle);
console.log("This is the dbConnectStatus.connectionStyle:");
console.log(dbConnectStatus.connectionStyle);
});
$rootScope.$watch('dbConnectStatus', function (){
$scope.dbConnectionStatus = dbConnectStatus;
});
//$rootScope.$apply();
I then reloaded the code and got this console message
I then turned off the connection
I then turn on the connection
It is clear to me that the service dbConnectionStatus isn't updated as a global variable in the way that I expected. I was on the assumption that a service is called once when the application is load and that assigning a scope variable to a service (object) is not a call but a reference...
What am I doing wrong?
I worked in a jsFiddle using $emit and $on to handle the status changes inside the service. The main problem is that when going online the angular binding was not working properly so I needed to force an angular cycle with $scope.$apply().
I started working on the first version of your code but made some refactoring. You can find the full code on the jsFiddle but the service and the controller look like the following:
Service
.service('dbConnectStatus', function($rootScope){
var status = false;
var color = 'red';
var self = {
startWatchingConnectionStatus: function(){
var connectedRef = firebase.database().ref().child(".info/connected");
connectedRef.on("value", function(snap) {
console.log(snap.val());
status = snap.val();
if (status) {
color = 'blue';
console.log("Connected to DB (" + color + ")" );
} else {
color = 'red';
console.log("Disonnected to DB (" + color + ")" );
}
$rootScope.$emit('connectionStatus:change', {style: {'color': color}, status: status}});
});
},
getStatus: function(){
return status;
},
getColor: function(){
return color;
}
};
return self;
})
Controller
.controller('HomeCtrl', ['$scope', 'dbConnectStatus', '$rootScope',function($scope, dbConnectStatus, $rootScope) {
dbConnectStatus.startWatchingConnectionStatus();
$rootScope.$on('connectionStatus:change', function currentCityChanged(event, value){
$scope.color = value.style;
//if changed to connected then force the $apply
if(value.status === true){
$scope.$apply();
}
});
}]);
Let me know if there is anything that is still not clear.
Inspired from #adolfosrs great answer I found the following solution to work for me.
Service
.service('dbConnectStatus', function(firebaseRef, $rootScope){
// Initial setup
var styles = {
'offlineStyle': {'color': 'red'},
'onlineStyle': {'color': 'skyeblue'}
};
// Functions to switch status
var offline = function () {
this.boolean = false;
this.style = styles.offlineStyle;
}
var online = function () {
this.boolean = true;
this.style = styles.onlineStyle;
}
var get_status = function(){
return {
boolean: this.boolean,
style: this.style
}
}
// Read the firebase info and update when changed
firebaseRef.child(".info/connected")
.on("value", function(snap) {
if (snap.val()) {
online();
} else {
offline();
}
$rootScope.$emit('dbConnection:changed', get_status() );
});
})
Controller
// Hide it before the status is known.
$scope.dbConnectionStatus = {'color': 'transparent'};
// Getting and reading status changes
$rootScope.$on('dbConnection:changed', function(event, status) {
$scope.dbConnectionStatus = status.style;
$scope.$apply();
});
You should be able to get this working simply by storing the color in an object in the service and referencing it from the controller. e.g.
View
<button class="button button-icon ion-cloud" ng-style="dbStatusService.style"></button>
Controller
$scope.dbStatusService = dbConnectStatus;
Service
.service('dbConnectStatus', function(firebaseRef){
var status = false;
var style = {color: 'transparent'};
var connectedRef = firebaseRef.child(".info/connected");
connectedRef.on("value", function(snap) {
status = snap.val();
if (status) {
style.color = 'lightgrey';
} else {
style.color = 'transparent';
}
});
return {
'boolean': status,
'style': style
}
});

Second jsonp http get request - using $q gives 404 error despite GET showing 200

I've found a couple of similar posts to this, but the answers (which boil down to putting callback=JSONP_CALLBACK into the get request) aren't working for me. Using that in the request generates an immediate 404 error, while using callback=angular.callbacks._0 at least lets the first request return a successful response. The problem is that using the very same request function with the very same params a second time to refresh the data or get the next 20 objects, returns a 404 error even though the actual get returns a 200 and the data can be seen in chrome tools.
I'm, new to using $q deferred promises, so I'm hoping that the issue has something to do with that not allowing enough time for a response before executing the reject. I'm attaching the code, which involves the Yelp API as did the other couple of posts I found on this issue. The most closely related is: (Subsequent JSONP requests give status 404 despite GET status 200), but there's another which uses the same callback string I'm using (Yelp API and AngularJS).
This particular project is for an ionic mobile app that gets coffee shops based on users geolocation.
Here's the code for the service (secret stuff removed):
var app = angular.module('caffeine.services', []);
app.service("YelpService", function ($q, $http, $cordovaGeolocation, $ionicPopup) {
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
};
var method = 'GET';
var url = 'http://api.yelp.com/v2/search';
var consumerSecret = ''; //Consumer Secret
var tokenSecret = ''; //Token Secret
var self = {
'page': 1,
'isLoading': false,
'hasMore': true,
'results': [],
'ranStr': randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
'timeStamp':new Date().getTime(),
'lat': 51.544440,
'lon': -0.022974,
'term': 'coffee',
'oauthConKey': '', //Consumer Key
'oauthToken': '', //Token
'oauthSigMeth': 'HMAC-SHA1',
'refresh': function () {
self.page = 1;
self.isLoading = false;
self.hasMore = true;
self.results = [];
return self.load();
},
'next': function () {
self.page += 1;
return self.load();
},
'load': function () {
self.isLoading = true;
var deferred = $q.defer();
ionic.Platform.ready(function() {
$cordovaGeolocation
.getCurrentPosition({timeout:10000, enableHighAccuracy:false})
.then(function(position){
self.lat = position.coords.latitude;
self.lon = position.coords.longitude;
console.log('latlong = '+self.lat+','+self.lon);
var params = {
callback: 'angular.callbacks._0',
page: self.page,
ll: self.lat+','+self.lon,
term: self.term,
oauth_consumer_key: self.oauthConKey, //Consumer Key
oauth_token: self.oauthToken, //Token
oauth_signature_method: self.oauthSigMeth,
oauth_timestamp: self.timeStamp,
//new Date().getTime(),
oauth_nonce: self.ranStr
};
var signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});
params['oauth_signature'] = signature;
console.log('url ='+url);
console.log('params.ll = '+params.ll);
$http.jsonp(url, {params: params}).success(function (callback) {
self.isLoading = false;
console.log(callback.businesses);
if (callback.businesses.length == 0) {
self.hasMore = false;
} else {
angular.forEach(callback.businesses, function (business) {
self.results.push(business);
});
}
self.isLoading = false;
deferred.resolve(callback.businesses);
})
.error( function (callback, status, headers, config) {
self.isLoading = false;
console.error('data not received');
console.error('data: '+callback);
console.error('status: '+status);
console.error('headers: '+headers);
console.error('congig: '+config);
deferred.reject(callback);
});
}, function(err) {
console.error('Error getting position');
console.error(err);
$ionicPopup.alert({
'title': 'Please turn on geolocation',
'template': 'It looks like you have geolocation turned off. Please turn on geolocation in your app settings to use this app.'
});
})
});
return deferred.promise;
}
};
self.load();
return self;
});

iOS emulator GPS does not work?

I tested my app in the iOS emulator and noticed that the gps does not work.
In the emulator I set the location to "Apple"
and installed the corodova plugin by: "cordova plugin add org.apache.cordova.geolocation".
Here is my Code:
angular.module('home', ['services'])
.controller('homeCtrl',
function ($scope, $location, $state, serverAPI, $ionicPopup) {
$scope.buttonType = "icon ion-search";
$scope.buttonDisable = false;
$scope.text = 'Search';
var UID = JSON.parse(window.localStorage.getItem('Credentials')).UID;
serverAPI.getUserData(UID, function (data) {
$scope.userName = data.userName;
$scope.points = data.points;
$scope.fotoId = data.fotoId;
console.log(data);
});
$scope.click = function () {
$scope.buttonDisable = true;
$scope.text = 'Searching';
$scope.buttonType = 'icon ion-loading-a';
// //Grap geoLocation
var location = navigator.geolocation.getCurrentPosition(saveGeoData, onError);
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
};
var saveGeoData = function (geoData) {
console.log("nach geo");
var myPosition = {
'longitude': geoData.coords.longitude,
'latitude': geoData.coords.latitude
};
console.log("ss");
console.log(myPosition.latitude);
window.localStorage.setItem('myPosition', JSON.stringify(myPosition));
//If geoloaction is saved successfully => Send geodata to server to receive teammate
sendToServer(myPosition);
}
//Send current location to Server to receive teammate
var sendToServer = function (myPosition) {
serverAPI.searchPartnerToPlayWith(myPosition.longitude, myPosition.latitude, UID, function (data) {
//No other players around you. Server returns -1
if (data == -1) {
$ionicPopup.alert({
title: 'Too bad :(',
template: 'Unfortunateley there are no other players around you. Try it some other time!'
});
} else {
window.localStorage.setItem('teammate', data.username);
window.localStorage.setItem('isEnummeration', data.taskType);
window.localStorage.setItem('task', data.task);
var teammatePosition = {
'longitude': data.longitude,
'latitude': data.latitude
};
window.localStorage.setItem('teammatePosition', teammatePosition);
//TODO: data.fotoId => request foto from server
$state.go('tab.play-screen');
}
})
}
};
})
When the function click is called, it just stops in Line:
var location = navigator.geolocation.getCurrentPosition(saveGeoData, onError);
Do you have a guess whats my problem? In the browser it works just fine.
Thanks!
Make sure you include this file into your project.
https://github.com/apache/cordova-plugin-geolocation/blob/master/www/geolocation.js
It can be high probability cause from there, this function not exist in your project, getCurrentPosition.

ngCordova get GCM regid inside a controller

I'm having troubles trying to register my GCM regid with ngCordova and $cordovaPush.
I can't manage to retrieve my regid inside my controller to send it to my API via $http:
var gcmToken;
gcmNotificationHandler = function(e) {
if (e.event === "registered") {
gcmToken = e.regid;
console.log(gcmToken);
}
};
var aTonAvis = angular.module('aTonAvis', ['ngCordova']);
aTonAvis.value('serverUrl', "http://atonavis.local/");
aTonAvis.controller('RegisterCtrl', function($scope, $cordovaPush,
$cordovaDevice, $http, serverUrl) {
var gcmConfig = {
"senderID": "00000000000"
};
var iosConfig = {
"badge": "true",
"sound": "true",
"alert": "true",
};
gcmConfig.ecb = "gcmNotificationHandler";
iosConfig.ecb = "iosNotificationHandler";
var configHandler = function() {
if ($cordovaDevice.getPlatform().toLowerCase() ===
'android' || $cordovaDevice.getPlatform() ===
'amazon-fireos') {
return gcmConfig;
} else {
return iosConfig;
}
};
this.registered = false;
document.addEventListener("deviceready", function onDeviceReady() {
$cordovaPush.register(configHandler()).then(function(
result) {
console.log("Inside register " + gcmToken);
var pushToken;
if ($cordovaDevice.getPlatform().toLowerCase() ===
'ios') pushToken = result;
else pushToken = gcmToken;
$http.post(serverUrl + 'api/setdevice', {
token: pushToken,
device: $cordovaDevice.getPlatform(),
version: $cordovaDevice.getVersion(),
model: $cordovaDevice.getModel()
}).success(function(data, status,
headers, config) {
this.registered = true;
});
}, function(err) {
console.log("Registering Error : " + err);
});
});
});
The .then function is fired before the gcmNotificationHandler so my gcmToken is undefined, and here's what I get in my logs :
Inside register : undefined app.js:41
APA91bEzVUk3T1T6WpIsEHOq43hCh_pZeBPjRDPSPxV2j6VjVW-KcUepbmf6snaCiqGvYp3H_XYHIXQdbVtvMF3t-NtoZJaJzV9FkNtUlutuWYs5XPAZ-H1ixQnAyhTO6fAPDMn7Ef5f5HgBR9fgWpmXc0u_xBM4yKvoXCnVXEG18IZV2hvY app.js:6
I don't know what I'm doing wrong here, can anybody help ?
You need to install these two cordova plugins before run the app.
Device cordova plugin: https://github.com/apache/cordova-plugin-device
cordova plugin add https://github.com/apache/cordova-plugin-device
Console cordova plugin: https://github.com/apache/cordova-plugin-console
cordova plugin add https://github.com/apache/cordova-plugin-console
http://blog.revivalx.com/2014/11/14/implement-push-notifications-for-android-and-ios-phonegap-part-3/
Here is my code that uses ngCordova with PushPlugin. The regid comes in the same callback for event 'pushNotificationReceived' for android. Here is the code I use within the callback for that event to receive the regid from GCM:
Checking for (notification.event === 'registered') is the most important.
$rootScope.$on('pushNotificationReceived', function(event, notification) {
//console.log("result: " + JSON.stringify(event));
console.log("result: " + JSON.stringify(notification));
console.log('Success: Inside the push notification received callback with this payload JSON' + notification);
if(( platform == 'android' || platform == 'Android' ) && notification.regid && (notification.event === 'registered'))
{
var googDevToken = notification.regid;
console.log(googDevToken);
}
});

Resources