Notifications

The Notifications API provides a way to display native notifications with actions and to handle notification and action clicks. Glue42 Core supports all available Notification settings as defined in the DOM Notifications API.

The Glue42 Core Notifications API extends the DOM Notifications API with the option to handle notification and action clicks using Interop methods.

Raising notifications without actions doesn't require any special setup of the Main app or the Web Client apps.

If you want to raise a notification with actions, your Main app must register a Service Worker. There are two ways to register a Service Worker:

1. Use the serviceWorker property of the configuration object for the Web Platform library to provide the URL to the Service Worker file. The library will check the browser compatibility and register the Service Worker:

import GlueWebPlatform from "@glue42/web-platform";

const config = {
    serviceWorker: {
        url: "/service-worker.js"
    }
};

await GlueWebPlatform(config);

Use this option if you don't need the Service Worker in your project for anything other than raising notifications with actions.

2. Use the serviceWorker property of the configuration object for the Web Platform library to provide the ServiceWorkerRegistration Promise returned from the registration of the Service Worker:

import GlueWebPlatform from "@glue42/web-platform";

const swPromise = navigator.serviceWorker.register("/service-worker.js");

const config = {
    serviceWorker: {
        registrationPromise: swPromise
    }
};

await GlueWebPlatform(config)

Use this option if you need access to the Service Worker in some other app-specific logic as well.

Defining a Service Worker is specific for each app and is outside the scope of Glue42 Core. In order for a Glue42 Core project to be able to correctly process notification actions and their respective click logic, you must include the @glue42/web-worker package in your Service Worker file.

Initialization

The @glue42/web-worker package exports a default factory function and additionally attaches it to the Service Worker global scope. This offers two options for consuming the library.

The first option is to use the importScripts function to add Glue42 Web Worker to the Service Worker scope and is suitable for basic Service Worker scripts:

importScripts("/web.worker.umd.js");

self.GlueWebWorker();

The second option is to import the @glue42/web-worker package in a dedicated Service Worker project the output of which will be a ready Service Worker script:

const GlueWebWorker = require("@glue42/web-worker");

GlueWebWorker();

The GlueWebWorker() function adds a listener to the notificationclick event and sets up the necessary communication between the worker and the Glue42 Web Platform. This enables the custom action click logic of Glue42 Core notifications.

Configuration

The GlueWebWorker() function accepts an optional configuration object. Use it to specify handlers for notification and action clicks, as well as whether the worker should open the Main app if it is closed when the user clicks the notification.

The configuration object has the following signature:

export interface WebWorkerConfig {
    platform?: {
        url: string;
        openIfMissing?: boolean;
    };
    notifications?: {
        defaultClick?: (event: Event, isPlatformOpened: boolean) => Promise<void>;
        actionClicks?: Glue42NotificationClickHandler[];
    };
};

export interface Glue42NotificationClickHandler {
    handler: (event: Event, isPlatformOpened: boolean) => Promise<void>;
    action: string;
};

Functionality

The @glue42/web-worker package exposes two additional functions - raiseGlueNotification() and openCorePlatform(). Both are attached to the Service Worker global scope and exported from the library.

• openCorePlatform() - asynchronous function that accepts the URL to the Main app as an argument and resolves with void. Opens the Main app and waits for the Web Platform library to be fully initialized and configured.

• raiseGlueNotification() - this function has the same signature as the raise() method of the Notifications API. It is meant to be used if your project utilizes the Web Push Protocol. In such scenario, the Main app is likely not opened and therefore the Service Worker is responsible for displaying the notification.