Quickstart Guide: Notification Component
Notification Component
Get started
Using Ionic or Cordova? Get the Notification component working in your app in four easy steps.
- Download the component
- Add it to your environment
- Using Notification
- Troubleshooting
1. Download the Onymos Notification component
Sign up! We’ll send you a link to your component, set up your Onymos Cloud Account, and generate your Onymos license credentials. In the meantime, you can get familiar with our API Documentation and developer resources, or join a whole community of developers building apps with Onymos on Reddit!
2. Add it to your environment
Add your components to a folder in your app’s root (e.g., onymos_components).
Add the Onymos Initialize component to your environment.
$ ionic cordova plugin add onymos_components/onymos-component-initialize
Then we can add the Onymos Notification component.
$ ionic cordova plugin add onymos_components/onymos-component-notification
Then update the widget inside your config.xml with the Onymos Widget ID you receive after you create an Onymos Cloud Account.
3. Using Notification
Using the Notification component in your app
Messages, likes, updates—every app notifies its users of something, but writing code that does it, across multiple platforms and frameworks, isn’t easy. Unless you use the Onymos Notification component! You can enable badging, include distinctive sounds, and navigate a user where they need to go.
Before we use Notification, let’s make sure we have everything we need to configure your onymosConnectObject. The onymosConnectObject requires the appropriate Onymos license credentials: your Customer ID (also called an Onymos ID) and your Onymos Auth Token. You’ll need these credentials to use this (or any) component in your app.
Next, let’s go inside your Ionic app’s app.component.ts file and initialize Notification.
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
declare var OnymosInitialize: any;
declare var OnymosLocation: any;
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor(
private platform: Platform
)
{
this.initializeApp();
}
initializeApp(){
this.platform.ready().then(() => {
const OnymosConnectObject={
customerId : 'Your customerId goes here',
onymosAuthToken : 'Your onymosAuthToken goes here',
envType: 'PRD',
version: '2'
}
OnymosInitialize.initialize(
OnymosConnectObject,
function onymosInitializeSuccess(status){
console.log("Onymos initialized Successfully.", status)
},
function onymosInitializeFailure(error){
console.log("Onymos failed to initialize.", error)
})
})
}
}
Great! If we configured your onymosConnectObject correctly, onymosInitializeSuccess() should print its message to the console. Now we’re ready to use Notification. Let’s create a function called login() in the app.component.ts file.
logIn(){
// OnymosNotification.register() is typically invoked after an app initializes and a user is authenticated. In this
// example, we have a function called logIn() where you can authenticate a user before invoking it.
[...]
OnymosNotification.register(
registerObj,
function registerSuccess(message){
console.log(message)
},
function registerFailure(error){
console.log(error);
});
}
Once logIn() authenticates a user, the register() method, well, registers your app to incorporate all of Notification’s functionality! The registerObj is an object with a property called userId, whose value is the id of the user. If we’re also using the Onymos Access component, we can use @AUTHID@
as that value, which automatically captures the id.
// Here's an example of what your registerObject could look like.
{
userId: '@AUTHID@',
}
// or
{
userId: 'hg4hd-pakd3-nsag64-ng45f-ahn7d'
}
But how would your app actually send a notification to a user’s device? For that, we’ll need the notifyUser() method. We can add it to the app.component.ts file and use our own notifyUser() function to invoke it.
notifyUser() {
OnymosNotification.notifyUser(
sender,
recipients,
message,
function onymosNotifySuccess(status){
console.log(status)
},
function onymosNotifyFailure(error){
console.log(error)
},
payload,
options
)
}
Sender is an object with a property called userId. Just like before, we can use @Auth@
if we’re using the Onymos Access component. Recipients is an array of objects, each with a userId property, and they identify the users you’re notifying. Message is the actual notification message itself. Payload is an object that can contain any specific data to be transmitted—you might use payload to pass the route to a page a user will be navigated to when they open the message. You can choose to include options that further customize how your notifications behave.
{
expiry: 'The time after which the notification will expire.',
iosSound: 'The name of the iOS sound to be played when the notification is displayed. This name is specific to the iOS platform.'
androidSound: 'The name of the Android sound to be played when the notification is displayed. This name is specific to the Android platform.'
}
Let’s actually configure the notifyUser() method.
notifyUser() {
OnymosNotification.notifyUser(
{
userId: @Auth@
},
[
{
userId: 'Include the recipient id here.'
}
],
"You've been notified!",
function onymosNotifySuccess(status){
console.log(status)
},
function onymosNotifyFailure(error){
console.log(error)
},
{},
{
iosSound: 'default',
androidSound: 'default'
})
}
Now your app can send notifications! Make sure it can receive them too, and add Notification’s receive() method to your app. You can find it, and more methods, in Notification’s API documentation.
You can learn more about how to use Notification in my “An Ionic Starter Template vs the Onymos Starter App” post.
4. Troubleshooting
How do I squash this bug? Is Ionic supposed to do that? Why is this iOS build failing?
Let’s figure it out—join the Onymos community on Reddit! More of a loner? You can email us directly at customersuccess@onymos.com.
Dig into our API documentation
Developer support
Got questions? Our support team is here to help.
Think differently about app development
Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your development timeline.