Ionic 3 Notification - ionic-framework

I want to use notification with my app. I have checked ionic native and find some information.
First;
Local Notification
Second;
Push
What do I want to do? I am using MySQL Database and I have two tables users and points. When I add points for one user, I want to send notification for only this user. How can I do this? Which can I use service?

As per your required I suggest you to use Push Notifications using FCM.
push notifications help to send notification into two or more ionic apps.
please follow these steps.
go to 'http://console.firebase.google.com' and create an android app make sure that app package name also mention in config.xml file.
Install the Cordova and Ionic Native plugins in App:
ionic cordova plugin add cordova-plugin-fcm
npm install --save #ionic-native/fcm
use this code in your 'app.component.ts' file with in initializeApp
/getToken generates a device token that helps you to send notification on this device.you have to store this token in your database when app is open./
fcm.getToken().then(token=>{
console.log(token);
});
fcm.onNotification().subscribe(data=>{
if(data.wasTapped){
console.log("Received in background");
} else {
console.log("Received in foreground");
};
});
fcm.onTokenRefresh().subscribe(token=>{
console.log(token);
});
Now the real process that you have to follow for send notification
/here is you have to add device token that is you have store in your database and your firebase api key./
let body = {
"notification":{
"title":"New Notification has arrived",
"body":"Notification Body",
"sound":"default",
"click_action":"FCM_PLUGIN_ACTIVITY",
"icon":"fcm_push_icon"
},
"data":{
"param1":"value1",
"param2":"value2"
},
"to":"Device token/ID",
"priority":"high",
"restricted_package_name":""
}
let options = new HttpHeaders().set('Content-Type','application/json');
this.http.post("https://fcm.googleapis.com/fcm/send",body,{
headers: options.set('Authorization', 'key=YourAuthToken'),
}).subscribe();
hope this is helpful for you.
Thank You.

Push notification works the same way as local notification with a minor difference. Push notifications require connectivity and a server infrastructure of some kind to send the notification. With local notification you can trigger the notification with conditions. You will get the notification even if the app is closed and you’re offline. And having both notifications won’t cause implications.
In your case, you should go with Push Notification.If in future if you want to change the parameter to send notification it will be easy for you to maintain.No need to update the app
You can use FCM- Firebase Cloud Messaging on server side and in client side you can use PhoneGap push plugins to generate device token
here are the plugins
<plugin name="phonegap-plugin-push" source="npm" spec="1.8.4">
<variable name="SENDER_ID" value="XXXXXXX" />
</plugin>

Related

Is there way to use push notifications in our ionic 4 project?

We currently have an Ionic and Firebase project that we coded. In this project, we want to use push notifications. But our trouble is:
We are looking for a push notification plugin, like WhatsApp application. For example, when we send a message to a person, we want the notification to go to the person we're texting from, not everyone. But we couldn't find a free way to do that. Do you have any suggestions? Thank you.
Firebase Cloud Messaging By using cordova-plugin and ionic-native:Ref. Url
import { FCM } from '#ionic-native/fcm/ngx';
constructor(private fcm: FCM) {}
this.fcm.getToken().then(token => {
//you can store device token in firebase, later you can target push notification from firebase console this token id
backend.registerToken(token);
});
this.fcm.onNotification().subscribe(data => {
if(data.wasTapped){ / * true , means the user tapped the notification from the notification tray and that’s how he opened the app. */
console.log("Received in background");
} else {// false , means that the app was in the foreground (meaning the user was inside the app at that moment)
console.log("Received in foreground");
};
});
this.fcm.onTokenRefresh().subscribe(token => {
//update device token
backend.registerToken(token);
});
I don't recommend you to use FCM plugin. It has no methods to manage your notifications in your app (clear all or clear some special notification.
It is better to use phonegap-push-plugin or One Signal

Ionic 4 read SMS plugin for OTP Verification

I am developing the ionic4 app, to auto verification or whenever I will get SMS my app has to read that message. for this I used 'Cordova plugin add Cordova-plugin-SMS' but it is not working. i declared 'declare var window: any; and declare var SMS: any;' nothing has worked. it showing "java.lang.ClassNotFoundException: com.rjfun.cordova.sms.SMSPlugin" in Android, in the web while developing it showing " TypeError: Cannot read property 'listSMS' of undefined". can any one help me to solve this issue
There is one plugin which could solve your problem. Named cordova-plugin-sms-receive.
This will help to read sms when any phone received and you can do whatever you want.
https://www.npmjs.com/package/cordova-plugin-sms-receive
That plugin enables sending an SMS from the app, not receiving an SMS.
To get data from an SMS to your app, you could pass it as args using deeplinks. This would required the user to tap a link in the SMS. I am not aware of a way to have SMS data fed to your app automatically, and I would think it is not possible as it would be a security risk.
A custom URL scheme is the simplest way to do that (e.g. mycoolapp://some-path?p1=data1&p2=data2.
App Links (Android > 6.0) and Universal Links (iOS > 9.0) are more powerful but may be unnecessary and are not as well supported. It really depends on your use case.
Ionic has a community maintained plugin for this which I use and does the job, albeit with a workaround needed here and there. Branch.io's plugin is also an option but I haven't used it.
very nice question ... you need to use cordova plugin for that. Below are the
First you need to install Android Permission Ionic Native Plugin.
run these two commands first to install Android Permission Plugin.
ionic cordova plugin add cordova-plugin-android-permissions
npm install #ionic-native/android-permissions
Add android-permissions to your app's Module.
import { AndroidPermissions} from '#ionic-native/android-permissions';
#NgModule({
providers: [
AndroidPermissions
]
})
export class AppModule { }
Check permissions on page
import { AndroidPermissions } from '#ionic-native/android-permissions';
export class HomePage {
constructor(public androidPermissions: AndroidPermissions) { }
ionViewWillEnter()
{
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_SMS).then(
success => console.log('Permission granted'),
err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_SMS)
);
this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_SMS]);
}
}
After allowing Read SMS permission now you need to install cordova-plugin-sms. Run this command for install it.
ionic cordova plugin add cordova-sms-plugin
npm install #ionic-native/sms
and in your page while reading SMS -
place this in top before declare class
declare var SMS:any;
place below inside class
ionViewDidEnter()
{
this.platform.ready().then((readySource) => {
if(SMS) SMS.startWatch(()=>{
console.log('watching started');
}, Error=>{
console.log('failed to start watching');
});
document.addEventListener('onSMSArrive', (e:any)=>{
var sms = e.data;
console.log(sms);
});
});
}
You can use this Ionic/Cordova plugin for Auto OTP verification and this will not ask the user for SMS read Permissions.
Plugin: https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
Demo App: https://github.com/hanatharesh2712/sms-plugin-test

Background notifications using Ionic like a mortal

I have been trying for several months to implement an app that receives notifications whose content I want to be stored in the database of my application. I am using the Firebase Messagging plugin and I am receiving the notifications correctly, both in Foreground and in Background.
However, in the background I am unable to execute my callback without the need to press the notification explicitly by the user. Likewise, there is no way to increase the badge of the application when it is not open.
Now, I do not understand how applications like WhatsApp, Telegram and any other application that is not made by mere mortals work. How is it possible that they can get the data in backgroud, manage the badges, synchronize messages, etc? Being that, supposedly the services like Firebase are limited in background. Even with plugins like Background Mode my application is suspended by Android when the user closes it.
The code that I am currently using to handle notifications is the following:
// In foreground (WORKS)
this.firebaseMessaging.onMessage().subscribe((notificacion) => {
// Insert in DB
...
});
// In background (DOESN'T WORK)
this.firebaseMessaging.onBackgroundMessage().subscribe((notificacion) => {
// Insert in DB
...
});
What alternative is left? The only thing that occurs to me is to use notifications in Foreground and background only as a warning. So every time I open the application I'll have to call a message synchronization callback with the server (with badge management included).
If someone has some better way, I would greatly appreciate it if you throw a little light on the subject.
From already thank you very much
Ok, after more than a year I think it's time to close this question. I solved the problem this way:
Suppose I need to get a list of messages. This action is made by a function called getMessages()
When a new message is created in the backend, I send a push notification through Firebase service.
If the push notification is received in foreground I refresh call the method directly:
this.firebaseMessaging.onMessage().subscribe((notificacion) => {
getMessages();
});
If the push notification is received in background and the user taps on it there isn't a problem as it's supported by the plugin:
this.firebaseMessaging.onBackgroundMessage().subscribe((notificacion) => {
getMessages();
});
If the push notification is received in background but the user DOES NOT tap on it and opens the app in another way than the notification, we need to excecute the corresponing function when the app is opened in app.component.ts file:
this.platform.ready().then(() => {
getMessages();
// Extra stuff like this.statusBar.styleDefault(); or this.splashScreen.hide();
});
That way all the cases are considered! You should keep in mind that apps like Whatsapp or Telegram are developed in official technologies like Java or Kotlin which not only have official native plugins, also its code are excecuted natively and not in a limited browser as Cordova or Capacitor frameworks do

Push service ionic 2

I have follow this tutorial (https://devdactic.com/ionic-2-push-notifications/#disqus_thread)
I do not receive notification (status sent on ionic.io) on physical iOS Device with TestFlight. (But the token is generated).
app.component.ts and app.module.ts file: https://pastebin.com/HB97KdWL
I have try official tutorial but same problem..
Thank you in advance !
So, there are a bunch of things that could go wrong, especially with ios. Here are some things to look at:
Managing the certificates for the APNS can be rough. If you have
access to an android device, start there since it's a little more
straightforward to get notifications up and running.
Since you're using apps.ionic.io, you have the advantage of checking
to see if you have a push token assigned to a user. (I'm assuming
that you're using auth?) In the Auth tab, select the
user->View->check the push tab to see the token. Also, use the push
service to send a generic push notification to the users to see if
it arrives.
If you have a problem with ios, there's a strong likelihood that
there's something wrong with the certificates... so check for
another tutorial on that. I'd recommend using the Ionic Cloud Services website instead of Devdactics since Ionic is more in-depth. You can find it here: https://docs.ionic.io/services/push/#prerequisites
Make sure that the "Background Notifications" and "Push
Notifications are selected on the General tab in the Xcode project.
Since you're using Ionic, changing anything with 'cordova platform
add ios' can overwrite it. Make sure it looks like this: ![enter
image description here]3
This might be an oversight?...in your code, you have this:
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'XXXXXX' **<-- this should be a value. (not XXXXXX)**
},
'push': {
'sender_id': 'XXXXX', **<-- this should be a value. (not XXXXXX)**
'pluginConfig': {
'ios': {
'badge': true,
'sound': true
},
'android': {
'iconColor': '#ff0000'
}
}
}
};
app_id is something that is covered in the tutorial that you sent. It's under the IOS certificate section. It says, "After going through the Push guide you need to have your App Id from the Identifier you created inside your Apple profile. Copy that ID and open your config.xml and add your ID:" This is the same ID that you'll put in that section of code.
Unfortunately, there are a lot of things that can go wrong with the certificates. I would focus there since the errors that you get can be unannounced.

Implement Push notification in Android Phonegap app

Created UI using Angular and Ionic, and wrapper usign Phonegap, How can I have pushnotification in Android implemented.
Is there any effective and accurate library in Phonegap for Pushnotification Implemented.
Already using https://github.com/phonegap-build/PushPlugin, but getting some issues, like push notififcation not received, some time all notification coming at once.
First create a project in Google console
Enable GCM
Create a server api Key
use the following plugin
cordova plugin add phonegap-plugin-push --variable SENDER_ID="XXXXXXX"
replace the xxxxxx with your sender id
n your javascript add the following code for registering to GCM server it will give you a GCM id
var push = PushNotification.init({
android: {
senderID: "XXXXXXXX" //add your sender id here
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
});
push.on('registration', function(data) {
consol.log(data.registrationId); //this function give registration id from the GCM server if you dont want to see it please comment it
document.getElementById("gcm_id").value= data.registrationId; //showing registration id in our app. If it shows our registration process is suscess
//$("#gcm_id").val(data.registrationId); if you are using jquery
});
Send a message using GCM HTTP connection server protocol:
https://gcm-http.googleapis.com/gcm/send
Content-Type:application/json
Authorization:key=YOUR SERVER KEY
{
"to": "GCM ID",
"data": {
"message": "This is a GCM Topic Message!",
}
}
for more details..
http://phonegaptut.com/2016/05/31/how-to-send-push-notifications-in-phonegap-application/
I was having the same problem lately, using Ionic and Cordova (not Phonegap, but should work the same).
I ended up using this library for local push notifications https://github.com/Wizcorp/phonegap-plugin-localNotifications
They worked pretty well except the PN would not start the app on Android, but I opened a pull request with a fix for that.
If you encounter the same problem, you might also use my fork of this plugin which has this fix already included.
You should be using ngCordova's Push Plugin for this.
From the docs:
Allows your application to receive push notifications. To receive notifications in your controllers or services, listen for pushNotificationReceived event.
As Push Notification is a native feature, so to integrate Push in PhoneGap Android application you have to make a plugin that will communicate with Android Native code.
You can go through with Sample application available on Git Hub.
Please also follow the necessary steps require for it mentioned in ReadME file.