display push notification in pretty way in ionic 3 - ionic-framework

I implemented push notification FCM in my ionic 3 app and I want to display it in pretty way.
for now, I just show alert when get any notification.
I'm looking for another way to display it
ionViewDidLoad() {
FCMPlugin.onNotification(function (data) {
if (data.wasTapped) {
//Notification was received on device tray and tapped by the user.
alert(data.message);
} else {
//Notification was received in foreground. Maybe the user needs to be notified.
alert(data.message);
}
});
FCMPlugin.onTokenRefresh(function (token) {
alert(token);
});
}

You can use local notifications for this. Local notifications are device native and hence will have, as the name suggests, native look and feel.
Refer to https://ionicframework.com/docs/native/local-notifications/ for implementation details.

Related

Simple app to buzz the watch when it gets disconnected from phone

I would like a simple app that periodically checks the bluetooth connection between the phone and my watch (GTR 3 Pro), and buzzes the watch when it gets disconnected from my phone. This will be useful if I accidentally leave my phone somewhere and walk away from it, or my phone gets stolen or something like that.
Some previous amazfit watches had this feature built-in, but it doesn't seem to be available in my GTR 3 Pro right now. Thank you.
I made it, but only in ACTIVE application. So, if you open your mini-app, then it is possible to handle bluetooth status events (see the picture). Couldn't apply it in the background yet :-(.
You'll need to do a little hack to poll the Bluetooth connection to achieve the desired behavior, but first let's understand why.
Per ZeppOS architectural decision, your app will never run in background on the device. I believe this is for battery efficiency reasons or even available processing power.
With that in mind, We'll use hmApp.alarmNew and hmApp.alarmCancel in order to get it working, as follows:
Create a new page that will be responsible for checking the bluetooth connection, something like page/connectionCheck.js and declare it in your app.json target (you can also use the default index.js if you want)
In the onInit() of the page, register a new hmApp.alarm and cancel the existing ones if needed to avoid waking up the app unnecessarily
In the build() call, verify if it's connected to the cellphone using the hmBle.connectStatus() and alert the user.
Summarizing, it'll look like this:
(I'm using zeppOS API v1.0 here to make it work on all devices)
const WAKE_UP_INTERVAL_SECONDS = 30 // this value must be higher than the screen on time on app
const POLL_ALARM_PREF_ID = 'my_bluetooth_poll_alarm'
const vibrate = hmSensor.createSensor(hmSensor.id.VIBRATE)
Page({
onInit(param) {
vibrate.stop() // stop any vibration
vibrate.scene = 27 // set the vibration scene to 27 (1000ms vibration, high intensity)
// verify if this launch was triggered by an alarm or not
if(param === POLL_ALARM_PREF_ID) {
const existingAlarm = hmFS.SysProGetInt(POLL_ALARM_PREF_ID) // get existing alarm reference from system preferences
if(existingAlarm) {
// cancel existing alarm
hmApp.alarmCancel(existingAlarm)
}
}
// always create a new alarm to avoid alarm trigger while using the app
const alarm = hmApp.alarmNew({
file: 'pages/connectionCheck',
appid: 123123, // <YOU APP ID HERE>
delay: WAKE_UP_INTERVAL_SECONDS,
param: POLL_ALARM_PREF_ID
})
hmFS.SysProSetInt(POLL_ALARM_PREF_ID, alarm) // Save new alarm reference on system preferences
},
build() {
if(hmBle.connectStatus() === true) {
// Do something if already connected, maybe return to the home screen, exit the program or even turn the sreen off
hmApp.exit()
} else {
// show a message to the user / vibrate the watch
vibrate.start()
}
},
onDestroy() {
vibrate && vibrate.stop() // stop any vibration
}
})

Detecting flutter app opened from a terminated state with FCM and flutter_local_notifications

I am working on a flutter app that uses FCM data messages sent through cloud functions. In my app I'm receiving that data messages and then displaying a local notification. I need to be able to tap the local notification and have it direct the user to the correct screen. My current solution works when the app is in the foreground, or background, but NOT terminated. When it's terminated tapping on the notification appears to just open the app. Is there a way to detect if the app just opened from a terminated state? Below is my current code for when the notification is tapped, and the comments show what I want it to do
Future onSelectNotification(String payload) async {
Map data = json.decode(payload);
print('onSelectNotification: $data');
// if app is in foreground or background do this
if (data.containsKey('conversation_with')) {
print('Notification was for a conversation');
String conversationID = data['conversation_with'];
print('Conversation with UID: $conversationID');
PublicAppUser conversationWith =
await FriendDatabase().getPublicAppUser(conversationID);
navigatorKey.currentState!.pushNamed(
ConversationPublicUserScreen.routeName,
arguments: conversationWith);
}
// if it just opened from a terminated state do this
// ...
}

Is there any way to recieve sensor events when app is closed in flutter?

I am new to flutter and working on the women safety app. I am doing this for the community's help and to make my society safe for everyone. I want to receive event updates when my app is closed and wandering if there is any way to do this in flutter. Specifically, I want to listen to shake events and run a specific code.
Use Case: For example, an app user feels uncomfortable or is in danger. She will shake her phone rapidly and the app will detect the shake and send the SOS alert. Regardless of the running state of the app.
I have used Work-manager and android_alarm_manager_plus plugins to listen to events. But they have limitations for time. Work-manager can be triggered only after 15 minutes and alarm_manager can trigger after 1 minute. I want to listen to shake events all the time. Please let me know if it is possible or not.
Another possible solution can be putting a menu tray in the notification panel and by clicking it the app will send a notification. I searched for this scenario but found nothing. Any help would be appreciated. Thank you
you can using:
flutter_background_service
shake
Step 1: using Shake:
ShakeDetector detector = ShakeDetector.autoStart(
onPhoneShake: () {
// Do stuff on phone shake
}
);
Step 2: custom flutter background service:
final service = FlutterBackgroundService();
service.onDataReceived.listen((event) {
if (event!["action"] == "setAsForeground") {
service.setForegroundMode(true);
return;
}
if (event["action"] == "setAsBackground") {
service.setForegroundMode(false);
}
if (event["action"] == "stopService") {
service.stopBackgroundService();
}
});

Ionic cannot navigate to a specific tab upon notification clicked?

I am using Ionic and FCM(firebase) plugin to send push notification. I can receive notifications, when I tap the notification it triggers the alert successfully but it is not navigating to the specified tab. Just to make sure this line:
this.tab.select(2);
works I have tested navigating with that code with a button and it works
FCMPlugin.onNotification(function(data){
if(data.wasTapped){
//Notification was received on device tray and tapped by the user.
alert('data was tapped');
this.tab.select(2);
//this.navCtrl.push(ViewurgentnewsPage); also tried this
}else{
//Notification was received in foreground. Maybe the user needs to be notified.
alert('this was received on foreground');
}
});
You should use arrow functions
FCMPlugin.onNotification((data) => {
if(data.wasTapped){
//Notification was received on device tray and tapped by the user.
alert('data was tapped');
this.tab.select(2);
} else {
//Notification was received in foreground. Maybe the user needs to be notified.
alert('this was received on foreground');
}
});
By using arrow function, the this keyword still references the component code, where the this.tab property exists.

Check a web page periodically in background

I need to check periodically a web page.
My idea is to set a local notification periodically, for example every 20 minutes. When notification leaves, device should load the web page, check a condition and if the condition is true, device should rang, otherwise nothing.
(NOTIFICATION) -> (LOAD WEB PAGE) -> [VERIFY CONDITION]-|if true|-> (RING)
Is this technically possible to do? How can I load a web page while app isn't running?
My sketch of code was like this:
func check () {
pageCode = // find a way to load the page
let delayTime = dispatch_time(DISPATCH_TIME_NOW, Int64(NSEC_PER_MSEC * 100))
dispatch_after(delayTime, dispatch_get_main_queue()){
let readCode = self.pageCode.stringByEvaluatingJavaScriptFromString("document.getElementsByTagName('body')[0].outerHTML")
if letturaCodice?.containsString("Some text") == true {
ringPhone()
}
}
}
Not possible using UILocalNotification, you could do it with a remote notification though.
Apple has a guide here: See - "Using Push Notifications to Initiate a Download"
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/BackgroundExecution/BackgroundExecution.html
A remote notification platform I've used before is called OneSignal, it's completely free and allows you to schedule notifications. https://onesignal.com
Edit:
Doesn't answer question about ringing, not sure about that bit sorry!
Option 1:
You could build the app to use background app refresh function that you could cause an alert if lets say you do not get an http status code of 200.
If you use this option you could build in the function to have a custom tone to play that you build into the app.
Option 2:
Use a server side script todo the checking and have it fire off a push notification. This method would depend on phone settings as to how the notification would function.
You can try to use Grand Central Dispatch to run a background process and inside it add notification observer.
UPD: Like this:
dispatch_async(dispatch_get_global_queue(QOS_CLASS_BACKGROUND, 0)) {
() -> Void in
// catch notifications here
}