Ionic 4 local notification sound not working in Oreo+ - ionic-framework

I am building an Ionic 4 app and the Local Notification sound was working in Nougat, but is not working Oero.
Is just playing the default sound, and ignoring the sound
I have read here:
https://distriqt.github.io/ANE-PushNotifications/m.FCM-GCM%20Payload
Sounds on individual notifications were deprecated in Android O (API 26). You now have to set them on a channel.
Different notification sound not working in Oreo
that Channel is necessary
this.localNot.schedule({
id: id,
// channel: id, // IS NOT Possible to set
title: title,
text: 'Some text',
sound: `file://assets/audio/mySOUNDFILE.mp3`,
icon: 'file://assets/img/logo/favicon.png', // TODO resident Img,
color: colour
});
But Like I had not field "channel" available in ionic I set an issue here, but was close.
https://github.com/ionic-team/ionic/issues/19696
Do you have a suggestion how can I make it work?

I am using this
"git+https://github.com/Steffaan/cordova-plugin-local-notifications.git",
home.ts
declare var cordova: Cordova;
#Component({
selector: 'app-home', ...
and to send notification
cordova.plugins.notification.local.schedule({
id: Myid,
title: tit,
text: txt,
priority: MyPriority,
channel: 'MyChannel',
sound: `file://assets/audio/${sound}.mp3`,
foreground: true,
lockscreen: true,
vibrate: vib,
wakeup: true,
});
Where
priority: MyPriority,
channel: 'MyChannel',
must be different, for each different sound
in file /node_modules/#types/cordova/index.d.ts I set:
interface CordovaPlugins {
notification: any;
...
}

Related

Facebook Message API

I am creating a Facebook message. For the moment I am sending a message with title, subtitle, image and a button using the following message data.
var messageData = {
recipient: {
user_ref: recipientId
},
message: {
attachment: {
type: 'template',
payload: {
template_type: 'generic',
sharable: true,
image_aspect_ratio: 'square',
elements: [ {
title: new_title,
subtitle: messageText,
image_url: new_image_url,
default_action: {
type: 'web_url',
url: new_link,
webview_height_ratio: 'tall'
}
}
]
}
},
metadata: "DEVELOPER_DEFINED_METADATA"
}
};
I want to able to add a video in the same Facebook message. Is it possible?
So far, I have seen you can send videos in a separate message but not using a template with title, image, subtitle, etc (https://developers.facebook.com/docs/messenger-platform/send-messages#sending_attachments)
The generic template does not support videos. You can use the attachment API or media template (preferred) to send videos.
However, generic templates with an option to show an actual video are not available.

Ionic 4 Arrow Functions

I am creating a to do list app with Ionic 4. When the user clicks add a task an alert opens. However when a task is put it the input and the add task button is clicked, nothing happens. I feel like there is an issue with my arrow function but I am not familiar enough with them to spot the problem. I have attached a photo of the bit of code I think is the issue and the link to my github. I would really appreciate feedback and a solution!
To do list github
I see two issues with the code here:
this.tasks = this.taskList.valueChanges();
This returns an observable so you must use an async pipe to retrieve its value within the template such as:
*ngFor="let task of tasks | async"
The input was set for a different name, the input name here is "title" and that is how the data returned within the arrow function should be referenced as well
async addItem(){
let addItem = await this.alertCtrl.create({
header: 'Add a Task',
message: 'Please enter a Task',
inputs: [{
name: 'title',
type: 'text'
}],
buttons:[{
text: 'Cancel',
role: 'cancel'
},{
text: 'Add Task',
handler: data => {
let newTaskRef = this.taskList.push(
{ id: '', title: data.title, status: 'open' }
);
newTaskRef.update( { id: newTaskRef.key } );
}
}]
})
await addItem.present();
}

Realtime Tracking using leaflet

I was wondering I can Realtime Tracking my location with leaflet using Ionic ,I was able to get my current location, but I also want to keep track of it when I move
this.map.locate({
setView: true,
maxZoom: 16
}).on('locationfound', (e) => {
let markerGroup = leaflet.featureGroup();
this.marker = leaflet.marker([e.latitude, e.longitude], { icon: carIcon }).addTo(this.map);
locate accepts a watch option that will let you continuously update your marker position:
watch Type: Boolean Default: false
If true, starts continuous watching of location changes (instead of detecting it once) using W3C watchPosition method. You can later stop watching using map.stopLocate() method.
For example:
this.map.locate({
watch: true,
setView: true,
maxZoom: 16
}).on('locationfound', (e) => {
if (!this.marker) {
this.marker = leaflet.marker([e.latitude, e.longitude], { icon: carIcon }).addTo(this.map);
} else {
this.marker.setLatLng([e.latitude, e.longitude]);
}
}

Multiple geofencing in ionic

In my ionic project, I used geofence.
when I open the app in the region the notification is showing.
How can I view the notification only when crossing the border of the geofence.
and I used 3 fences(12Km.300m,50m).when in the range of 50m the app shows the three notification(notifications of three fences).
How i can show the only one notification when i am in the range of the 50m range condition.
in app.component.ts
constructor(public platform: Platform,
public statusBar: StatusBar,
...........) {
this.addGeofence();
}
private addGeofence() {
let fence = [{
id: '69ca1b88-6fbe-4e80-add-sd-4d3748-far',
latitude: 8.556498,
longitude: 76.881820,
radius: 12000,
transitionType: 1,
notification: {
id: 111111111,
title: 'Welcome ',
text: '12km range.',
openAppOnClick: true
}
},
{
id: '69ca1b88-6fbe-4e80-add-sd-4d3748-closevicinity',
latitude: 8.556498,
longitude: 76.881820,
radius: 300,
transitionType: 1,
notification: {
id: 222222222,
title: 'Welcome',
text: '300m range',
openAppOnClick: true
}
},
{
id: '69ca1b88-6fbe-4e80-add-sd-4d3748-near',
latitude: 8.556498,
longitude: 76.881820,
radius: 50,
transitionType: 1,
notification: {
id: 333333333,
title: 'Welcome',
text: '50m range',
openAppOnClick: true
}
},]
My suggestion: You can use the geolocation plugin of ionic to get the current location. Either use this to maybe check location once a minute, or use the background geolocation plugin to do so in background mode. For every location update you get, check whether you are in one of the radii of your geofences. You can use a library like turf to do the mathematics.
If you just want to be notified once you cross the border, save the geofence you were last in into the storage and each time you start the app check, whether the geofence changed.
Be careful though with location subscriptions and background modes as it might cost lots of battery.

How to add splitview to the sancha touch application and how to change the title (kitchen sink) on the title bar in xcode 4 iphone

I have implemented a sencha touch phone gap application on ipad.
using the kitchen sink application and its files.
It shows all the demo objects (list user interface buttons etc etc).
I need to add a split view as home page as per our application requirement on sencha touch appp.
And when i execute the application it displays title as "Kitchen sink" how should rename it as my application name
In the kitchen sink app, there are two folders phone and tablet, each for specific devices.
In each of these folders, there's a file called Main.js which is the starting file of your application.
Hence, in that Main.js, change the title here ...
{
id: 'mainNavigationBar',
xtype : 'titlebar',
docked: 'top',
title : 'My Title',
items: {
xtype : 'button',
.....
.....
EDIT :
For your Split-view need, you can use hbox layout.
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
html: 'TableView/Rootview goes here ...',
flex: 1
},
{
xtype: 'panel',
html: 'Message Detail view goes here ....',
flex: 2
}
]
});