Develop Reference

A phone call notification simulation using ionic framework

I want to send a push notification from server to an ionic client and show this notification in client like a phone call (mobile device should play a sound and show 'Accept' or 'Reject' buttons with caller information). It should work if mobile app is not running or in background, that's why I decided to use FCM messages.
this.storage.get('firebase_token').then((token) => {
console.log('Orders get firebase token and call register. Token: ' + token);
this.agentService.registerPushNotifications(token, () => {
this.firebase.onNotificationOpen().subscribe((notification) => {
// How to open the app and show the page with a ringtone ??
});
});
});
How can I open the app and show the call page with a ringtone in incoming push notification? Or maybe there is a better way for this kind of feature.

What you are asking for (the same format like a phone call) isn't possible with Ionic. You can however redirect the user to a view inside the application where you ask him to take action.
Take the following example for push notification. In app.components.ts I initialize this function when the platform is ready
initializePushNotifications() {
let pushObject = this.push.init({
android: {
senderID: 'Your ID Here',
icon: 'logo'
},
ios: {
alert: true,
badge: false,
sound: true
},
windows: {}
});
if (!pushObject['error']) {
pushObject.on('registration').subscribe((data: RegistrationEventResponse) => {
// Whatever you want to do
}, err => {
console.log('Couldnt register:', err);
})
pushObject.on('notification').subscribe((data: any) => {
let self = this;
// When the user click the push notification
if (!data.additionalData.foreground) {
switch (data.additionalData.entity_type) {
case 'takeAction':
this.openView(data.additionalData.user_name, data.additionalData.id);
break;
......
}
}
});
pushObject.on('error').subscribe((e: any) => {
console.log(e.message);
});
} else {
console.error(pushObject);
}
}
See, in the pushed message we add an object under the key additionalData where you can pass whatever you want. You can pass something like entity_type with the value takeAction. When the user click it, you can open a new view and pass additional parameters like the name of the user and the id of the entity or whatever.
On this screen you can open an alert asking the user to click yes or no and based on his input you fire the correct request.
Note
I know this is different from what you were asking for but your request cannot be fulfilled using Ionic.

addEventListener in ionic 3

I need to read sms on it arrive. I get cordova-plugin-sms and use this code. But how i could change this code in order to work in ionic 3?
if(window.SMS){
window.SMS.startWatch(data => {
console.log('watching', 'watching started');
}, error => {
console.log('failed to start watching');
});
}
document.addEventListener('onSMSArrive', function(e) {
var sms = e.data;
console.log(sms);
});

This plugin is not meant to read/receive/listen to SMS.
From the FAQ section of the repo:
How can I receive SMS?
You can't receive SMS via this plugin. This plugin only sends SMS.

There is a major difference between the plugins
cordova-sms-plugin and
cordova-plugin-sms
the last one supports receiving SMS, but not the first

There are some open issues with cordova-plugin-sms and Ionic 3 compatibility.
You can use an alternate plugin cordova-plugin-sms-receive
It has below code that you can use in your app for receiving sms:
Event: onSMSArrive
Triggered when a new SMS has arrived. You need call startWatch() first.
/* Initialize incoming SMS event listener */
document.addEventListener('onSMSArrive', function(e) {
console.log('onSMSArrive()');
var IncomingSMS = e.data;
console.log('sms.address:' + IncomingSMS.address);
console.log('sms.body:' + IncomingSMS.body);
/* Debug received SMS content (JSON) */
console.log(JSON.stringify(IncomingSMS));
});

try with following change-
if((<any>window).SMS){
(<any>window).SMS.startWatch(data => {
console.log('watching', 'watching started');
}, error => {
console.log('failed to start watching');
});
}
(<any>window).addEventListener('onSMSArrive', function(e) {
var sms = e.data;
console.log(sms);
});

Cordova pickcontact doesn't work

I try to pick a contact with cordova plugin contacts, but I still have a bug. My button #pickContact opens correctly the activity where I can tap on a contact. But when I tap on one, nothing happens. When I go back to my page, I have the error message OPERATION_CANCELLED_ERROR (code 6).
I really don't understand where is the problem. I run my app on Android Marshmallow. I thought about a permission problem, but my app can find correctly contacts with navigator.contacts.find, but not with navigator.contacts.pickContact
Here is my code :
function pickContact() {
navigator.contacts.pickContact(function(contact){
alert('ok !');
},function(err){
alert('bug !' + err);
console.log('Error: ' + err);
});
}
var app = {
// Application Constructor
initialize: function() {
this.onDeviceReady();
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", this.onDeviceReady, false);
} else {
this.onDeviceReady();
}
},
onDeviceReady: function() {
$("#pickContact").click(pickContact);
},
// Update DOM on a Received Event
receivedEvent: function(id) {
}
};
app.initialize();
Thanks for your help !

As per the reference doc of contacts plugin your selected contact will set into JSON.stringify(contact) you can alert it to see which contacts are selected (I have used this plugin but I don't need this function to pick any single contact so not sure if there is any done button or not) then press done or ok button, which will redirect you to your another function where you can get that contacts or fulfill your next requirements.
function pickContact() {
navigator.contacts.pickContact(function(contact){
alert(JSON.stringify(contact));
//This is added by me, on done button click or single selection
setContacts(contact);
},function(err){
alert('bug !' + err);
console.log('Error: ' + err);
});
}
//This is added by me
function setContacts(ct)
{
alert(JSON.stringify(ct));
$("#contactlist").append(ct);
//or
var getData = JSON.parse(ct);
if(getData.length > 1)
{
for(i=0;i<getData.length;i++)
{
$("#contactlist").append(getData[i]);
}
}
}
Let me know if I am wrong or right.

Thanks a lot for your answer. Unfortunately , your code doesn't works for me, but I found what to do :
When pickcontact opens your native app "contacts", your cordova app is removed on background. On android, that means that you loose the state of your app, and so you have a bug. To solve the problem, you need to add onresume event on your js file, like this :
var app = {
// Application Constructor
initialize: function() {
this.onDeviceReady();
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", this.onDeviceReady, false);
} else {
this.onDeviceReady();
}
},
onDeviceReady: function() {
$("#pickContact").click(pickContact);
},
onResume: function(resumeEvent) {
//alert('onResume');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
}
};
app.initialize();
After that, you can retrieve your picked contact with a function like this :
function pickContact() {
navigator.contacts.pickContact(function(contact){
$("#divTest").append('<p>The following contact has been selected:' + JSON.stringify(contact));
},function(err){
alert('bug !' + err);
console.log('Error: ' + err);
});
}
So, like everytime in programming, when you know the answer, that's easy. But when you don't know, you loose hours and hours...
I hope that will help someone.

plot projects - Plot plugin is not initialised successfully in app

I am using plotprojects plugin for location based notifications in app: http://www.plotprojects.com/.
The app is build on ionic cordova framework.I am calling plot.init() inside $ionicPlatform.ready() function. However the plot.isEnabled () function gives output as Plot is disabled sometimes after launching the app. It happens randomly. Should I call plot.isEnabled() method later in the code to get correct status of plot?
$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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
//org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
//window.localStorage.setItem("IsLaunched","YES");
var plot = cordova.require("cordova/plugin/plot");
plot.init();
console.log('after plot init');
plot.isEnabled(function(enabled) {
var plotEnabledState = enabled ? "enabled" : "disabled";
console.log("Plot is " + plotEnabledState);
}, function (err) {
console.log("Failed to determine whether Plot is enabled: " + err);
});

It takes some time before Plot is initialized. Plot initializes in the background. When calling plot.isEnabled() straight after calling plot.init() then it will return false. If you wait a second before calling plot.isEnabled() then it will return true.

ionic + cordova plugin and background mode

I'm making an app with ionic for car drivers. The app takes coordinates every one minute and write them on remote server, this helps me to tracking route and show cars on Google map.
I use Cordova plugin and it works fine except when screen turns off or the app goes into the background. I installed katzer cordova-plugin-background-mode, when the app go into background I see the message : app is now in background, the plugin informs me but nothing else, the app stopped! .
No data sent to remote server, when I resume the app all is back to normal, I use Android platform. How can i solve?
app.js code
angular.module('starter', ['ionic', 'ngCordova','LocalStorageModule', 'starter.controllers', 'starter.services'])
.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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
cordova.plugins.backgroundMode.enable();
});
})
.....
controllers.js
angular.module('starter.controllers', [])
.controller('GeoCtrl', function($scope, $cordovaGeolocation, $cordovaNetwork, $http, $interval) {
var reloadCoordinates = function() {
var watchOptions = {
timeout : 10000,
enableHighAccuracy: false // may cause errors if true
};
var watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.then(
null,
function(err) {
// error
},
function(position) {
//Latitudine e Longitudine
var lat = position.coords.latitude
var lon = position.coords.longitude
$scope.latitude = lat
$scope.longitude = lon
$http.post('http://192.168.1.2/get-data.php', { "lat": lat, "lon" : lon }).then(function(resp) {
console.log('Success Lat:'+resp.data.lat+' Lon:'+resp.data.lon);
watch.clearWatch();
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
});
};//end reloadCoordinates
$interval(reloadCoordinates, 60000);
reloadCoordinates();
})

I know this is an old thread, but I did manage to get this working, with:
cordova.plugins.backgroundMode.on('enable', function(){
//your code here, will execute when background tasks is enabled
loop();
});
function loop(){
console.log("loop");
$timeout(loop, 1000);
}
cordova.plugins.backgroundMode.enable();

#Cristian,
after enabling plugin, you should call your function or write your logic in this function.
cordova.plugins.backgroundMode.onactivate = function() {
// your logic here
// or call any other service, factory function
};

Are you trying to make an app that does something every x minutes, even when the app is in the background and/or the screen is turned off.... tried backgound-mode plugin but it only works reliably when the phone is plugged in... did you ever found a solution to this?
Install the plugin using the cordova command line utility:
$ cordova plugin add https://github.com/boltex/cordova-plugin-powermanagement.git
here's how i use it along with the background mode plugin so the app is never in background and always running as a service...:
if( ionic.Platform.isAndroid() ){
cordova.plugins.backgroundMode.enable();
window.powerManagement.dim(function() {
console.log('Wakelock acquired');
}, function() {
console.log('Failed to acquire wakelock');
});
window.powerManagement.setReleaseOnPause(false, function() {
console.log('setReleaseOnPause successfully');
}, function() {
console.log('Failed to set');
});
}
Final Step Deactivate your plugin when you finished your service as
cordova.plugins.backgroundMode.disable()