Device Registration

In this guide we will dive deeper into how you should handle the device registration. When you launch() Notificare, the device will be registered as a non-push device.

When a successful device registration takes place, we will emit an event. You can listen to those registrations like the following.

import { onDeviceRegistered } from 'notificare-web/core';

onDeviceRegistered((device) => {
  // more code ...
});

You can also check the details of the currently registered device.

import { getCurrentDevice } from 'notificare-web/core';

const device = getCurrentDevice();

The onReady() event will be fired when all Notificare modules has been launched, including a successful device registration.

Additionally, you can verify whether Notificare is ready at any point by calling isReady() or listen to the onReady() event anywhere in your code as described below.

import { isReady, onReady } from 'notificare-web/core';

onReady((application) => {
  // more code ...
});

Register as a user

By default, a device is registered as an anonymous user. However, there will be situations where simply registering an anonymous device is not what you want. For example if you authenticate your users you will not want to register an anonymous device whenever the app launches. When that is the case, you will need to tell the library you want to register as a specific user.

import { registerDevice } from 'notificare-web/core';

await registerDevice({
  userId: '7f42bedc-d74b-4c64-a5cf-76bcc5130b05',
  userName: 'John Doe',
});

After that, the device will remain registered with that userId / userName until you explicitly register it as anonymous. Depending on the way you authenticate users, you might want to check the logged in state on launch (in the onReady) and change it if necessary. Forcing registration as anonymous can be best achieved by setting userId and userName to null.

import { registerDevice } from 'notificare-web/core';

await registerDevice({
  userId: null,
  userName: null,
});

Although this is possible, it is not recommended. If you're going to use identifiers that are guessable or use personal data like an email. Due to the nature of javascript, doing this registration on the client-side is not secure and, for most cases, it will not be an option. If that is your case, consider registering these user profiles using your server-side code and our REST API.

Override Device Language

By default, we will automatically collect the language and region of a device based on the Locale of the device. For most cases this will be enough but for those cases where you would like to override the device language and region combination to a strict selection of languages, you can do so by invoking the following method:

import { updatePreferredLanguage } from 'notificare-web/core';

await updatePreferredLanguage('en-US');

Eventually, you can always retrieve the preferred language by calling the following method:

import { getPreferredLanguage } from 'notificare-web/core';

const preferredLanguage = getPreferredLanguage();

User Data Fields

There are use cases where simply associating an userId and userName will not suffice. For those cases you can make use of User Data Fields where you can create key-value pairs for your application and then use them to extend your device registration. Before you can implement them you will need to first create them in your application via our dashboard. This is described here.

Once you have created one or more fields, you can implement this functionality in your app. To retrieve the list of fields allowed in your app you should use the following method:

import { fetchUserData } from 'notificare-web/core';

const userData = await fetchUserData();

Whenever you want to update those fields with new values you should use the following method:

import { updateUserData } from 'notificare-web/core';

await updateUserData({
  /* your properties here */
  firstName: 'John',
  lastName: 'Doe',
});

If you are using our inbox functionality, these fields will also be available as placeholders when sending notifications by simply including {{userData.key}} in your messages. As with the registering user profiles, you may want to do this using your server-side code and our REST API.

Do Not Disturb

Each device registered with Notificare can be configured to specify a period of time during the day when it should not receive notifications. You can use this functionality in your app settings to allow the user to provide a time range where messages will not be displayed in the lock screen or notification center. Please note that if you are using our inbox functionality these message will still be there.

To retrieve a device's DnD preferences use the following method:

import { fetchDoNotDisturb } from 'notificare-web/core';

const dnd = await fetchDoNotDisturb();

You can update the DnD values for a device, using the following method:

import { updateDoNotDisturb } from 'notificare-web/core';

await updateDoNotDisturb({
  start: '23:00',
  end: '08:00',
})

Finally, you will probably also need to eventually clear the Do Not Disturb period. To do that, simply use the method below:

import { clearDoNotDisturb } from 'notificare-web/core';

await clearDoNotDisturb();