push notifications

Push-notifications

These notifications are that native ones that displays on a smartphone or a tablet, that we can see on the lock screen, or by sliding down the top of the screen. Touching a push-notification open a corresponding app on the corresponding page.

Mobile Framework works with the Timeline app of Entcore and Google Cloud Messaging to provide the push-notification feature.

Users will be able to see push-notification that take them to the right page when open it. They will also be able to toggle push-notifications in the user application module.

The role of Mobile Framework is not to send or receive push-notifications, but to route the user to the right page when the notification in open.

Set up Google Cloud Messaging (Not Mobile Framework)

ToDo : Nabil, là je suis largué...

Configure Entcore (Not Mobile Framework)

Once Google Cloud Messaging, you will have a private key to put in your ODE Springboard configuration, in entcore.json, in the timeline app configuration :

pushNotif = {
    "uri": "https://accounts.google.com:443",
    "tokenUrn": "/o/oauth2/token",
    "scope": "https://www.googleapis.com/auth/firebase.messaging",
    "url": "https://fcm.googleapis.com/v1/projects/{{project_id}}/messages:send",
    "client_mail": {{client_mail}},
    "aud": "https://accounts.google.com/o/oauth2/token",
    "key": {{private_key}}
}

Configure the ENT application to send push-notifications.

A Timeline event that will raise a push-notification has to be configured in his source code, in /src/main/resources/view-src/notify/<application>/<event>.json:

{
    "default-frequency": "DAILY",
    "push-notif": true // Activate push-notifs for this event
}

For more details about all this procedure, check the push-notification section of Entcore's documentation.

Set up Push-notification routing for Mobile Framework

If a push-notification is open, all information will be sent to the function in /pushNotifications.ts file.

To add you own routing function, you must create a notifHandler.ts file at the root of your application module's directory, and call it in /pushNotifications.ts :

// other imports
import timelineHandle from "./timeline/notifHandler";
// and your own :
import dummyHandle from "./dummy/notifHandler";

export default dispatch => (data, apps) => {
  // ... other notif handlers
  timelineHandle(dispatch)(data, apps);
  // and you own :
  dummyHandle(dispatch)(data, apps);
};

Your own notifHandler is a thunk action (See "Redux" section of this documentation) and must before all else test if the push-notifiction is applicable to it or not. If it is, then you may use Mobile Framwork routing functions to take the user to the right page :

import Conf from "../Conf";
// Use routing function from here
import { nainNavNavigate } from "../navigation/helpers/navHelper";

export default dispatch => async notificationData => {
  // Test with the resource uri to skip push-notif if not applicable to the application module
  if (!notificationData.resourceUri.startsWith("/dummy")) {
    return;
  }

  // Then, write your notif handler as a regular thunk action.

  // ... get information in notificationData and dispatch some thunk action you want ...

  // route the user to one of the routes defined in the main navigator or the navigator of your application module.
  nainNavNavigate("Dummy");
};

We plan to use an observer-pattern instead a manually registering your notifHandler in global pushNotifications.ts

Set up preferences for your push-notifications

Everything is located in the user application module, in /app/user/actions/notifPrefs.ts.

You have to add your notif types in the includeNotifKeysByApp map :

export const includeNotifKeysByApp = [
  {
    appName: "messagerie",
    notifKeys: ["messagerie.send-message"]
  },
  // ... other apps
  {
    appName: "dummy", // Put the corresponding web application name for grouping your notif prefs
    notifKeys: ["dummy.dummy-event", "dummy.dummy-event-2"] // Put the list of grouped notif types
  },
];

Order has an importance, groups will be printed in the same order as defined here.

The notif-pref toggle button will use a new I18n key (see "I18n" section of this documentation): "notif-pref-<YOUR_APPNAME>", with the appName written in the includeNotifKeysByApp map.