In the project, I’m trying to implement azure notification hub which use capacitor push notification which i following a Github Link suggest by the Azure
The below code is the service ts which the original code can be refer with the link below.
azure-notification-hubs.service.ts
Due to it uses the capacitor v2, i did my best to convert it to the v3 cause the push notification capacitor deprecated once i copy the code, After converting, I’m facing an issue where once I run the page in myapp (IOS), it does print AzureNotificationHubsService: Platform ready which i set the console log in the code below, after that it just went error in console log which state ERROR {“rejection”:{},“promise”…
ps. I did implement the push capability which i refer this link posted by the microsoft Using Azure Notification Hubs in Apache Cordova and Ionic Apps, I also did create a custom service events for this due to the events has been removed in Ionic 5
Sorry For Bad English…
⚡ [log] - HomePage constructor
⚡ [log] - AzureNotificationHubsService: Platform ready
⚡ [error] - ERROR {"rejection":{},"promise":{"_zone_symbolstate":0,"zone_symbol_value":"..."},"zone":{"_parent":{"_parent":null,"_name":"<root>","_properties":{},"_zoneDelegate":{"_taskCounts":{"microTask":0,"macroTask":0,"eventTask":0},"zone":"...","_parentDelegate":"...","_forkZS":"...","_forkDlgt":"...","_forkCurrZone":"...","_interceptZS":"...","_interceptDlgt":"...","_interceptCurrZone":"...","_invokeZS":"...","_invokeDlgt":"...","_invokeCurrZone":"...","_handleErrorZS":"...","_handleErrorDlgt":"...","_handleErrorCurrZone":"...","_scheduleTaskZS":"...","_scheduleTaskDlgt":"...","_scheduleTaskCurrZone":"...","_invokeTaskZS":"...","_invokeTaskDlgt":"...","_invokeTaskCurrZone":"...","_cancelTaskZS":"...","_cancelTaskDlgt":"...","_cancelTaskCurrZone":"...","_hasTaskZS":"...","_hasTaskDlgt":"...","_hasTaskDlgtOwner":"...","_hasTaskCurrZone":"..."}},"_name":"angular","_properties":{"isAngularZone":true},"_zoneDelegate":{"_taskCounts":{"microTask":0,"macroTask":0,"eventTask":20},"zone":"...","_parentDelegate":"...","_forkZS":"...","_forkDlgt":"...","_forkCurrZone":"...","_interceptZS":"...","_interceptDlgt":"...","_interceptCurrZone":"...","_invokeZS":{"name":"angular","properties":"..."},"_invokeDlgt":"...","_invokeCurrZone":"...","_handleErrorZS":"...","_handleErrorDlgt":"...","_handleErrorCurrZone":"...","_scheduleTaskZS":{"name":""},"_scheduleTaskDlgt":"...","_scheduleTaskCurrZone":"...","_invokeTaskZS":"...","_invokeTaskDlgt":"...","_invokeTaskCurrZone":"...","_cancelTaskZS":"...","_cancelTaskDlgt":"...","_cancelTaskCurrZone":"...","_hasTaskZS":"...","_hasTaskDlgt":"...","_hasTaskDlgtOwner":"...","_hasTaskCurrZone":"..."}},"task":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular","runCount":0}}
import { AlertController, Platform } from '@ionic/angular';
import { Injectable } from '@angular/core';
// use lodash to clone data objects coming from the push service
import * as _ from 'lodash';
import {
PushNotifications, PushNotificationsPlugin,PushNotificationSchema, Token, ActionPerformed
} from '@capacitor/push-notifications';
// Interface(s)
import { Registration, Notification, EventType } from '../interfaces/events';
// Azure Notification Hubs configuration (in an external file)
import { config } from '../../app/config';
//import events cause ionic 5 remove event from angular which need use observable
import { Events } from '../../services/events'
//import { Plugins } from '@capacitor/core';
// Create a local object that will represent our Cordova plugin
declare let PushNotificationSchema;
// Import the Capacitor Push Plugin (PushNotification vs. PushNotifications)
@Injectable({
providedIn: 'root'
})
export class AzureNotificationHubsService {
// make an empty array of registrations and notifications
public pushEvents: (Registration | Notification)[] = [];
constructor(
private alertCtrl: AlertController,
private events: Events,
private platform: Platform
) {
// Wait until the container's initialized before doing anything here
this.platform.ready().then(() => {
console.log('AzureNotificationHubsService: Platform ready');
// make sure the config values are set in the config.ts file.
if (config.hubName && config.hubConnectionString) {
// Initialize the Push Service
const push = PushNotificationSchema.init({
// Initialize the ANH Cordova plugin, this is required to use ANH
// Pass in our configuration values
notificationHubPath: config.hubName,
connectionString: config.hubConnectionString,
// Set some other stuff the plugin wants
android: { sound: true },
ios: { alert: 'true', badge: true, sound: 'false' },
windows: {}
});
push.on('registration', data => {
// Registration event for the ANH Cordova plugin (Capacitor has its own)
console.log('AzureNotificationHubsService: Registration');
console.log(data.registrationId);
// Copy the event data into a Registration object
const registration: Registration = _.clone(data);
// Populate the object type
registration.type = EventType.registration;
// Set the title (registrations won't have one)
registration.title = 'Registration';
// Set the created date
registration.received = new Date(Date.now());
// Add the event to the events array
this.saveData(registration);
this.events.publish('anh: data-change');
// Tell the user
this.alertCtrl.create({
header: registration.title,
message: 'Registration completed successfully',
buttons: ['OK']
}).then((alert) => alert.present());
});
PushNotifications.addListener('registration', (token: Token) => {
// this alert should never fire because we're not using the Capacitor plugin's
// registration method for anything, we're doing it through Notification Hubs
this.alertCtrl.create({
// @ts-ignore
header: 'Registration (Capacitor)',
message: `Push registration success (token: ${token.value})`,
buttons: ['OK']
}).then((alert) => alert.present());
});
PushNotifications.addListener('pushNotificationReceived', (pushNotification: PushNotificationSchema) => {
console.log('AzureNotificationHubsService: pushNotificationReceived');
console.dir(pushNotification);
// Populate the object type
// @ts-ignore
pushnotification.type = EventType.notification;
// Set the created date
// @ts-ignore
pushNotification.received = new Date(Date.now());
// convert the notification's data object into a string
pushNotification.data = JSON.stringify(pushNotification.data);
// Add the event to the events array
this.saveData(pushNotification as Notification);
this.events.publish('anh: data-change');
// Tell the user
this.alertCtrl.create({
// @ts-ignore
header: 'Notification',
message: pushNotification.data,
buttons: ['OK']
}).then((alert) => alert.present());
});
} else {
// Tell the user this won't work until they fix the config.
this.alertCtrl.create({
header: 'Invalid Configuration',
// tslint:disable-next-line:max-line-length
message: 'Please populate the project\'s <strong>src/app/config.ts</strong> file with settings from your Azure Notification Hubs configuration.',
buttons: ['OK, I\'m sorry!']
}).then((alert) => alert.present());
}
});
}
// saveData(data: Registration | Notification) {
saveData(data: Registration | Notification) {
console.log('AzureNotificationHubsService: saveData()');
this.pushEvents.push(data);
console.dir(this.pushEvents);
}
}