@openfin/web-notifications-client

Here™ Web Notification Center

Overview

The Here™ Web Notification Center offers a consistent and streamlined way for developers to create, display, and manage desktop notifications. It also supports handling notification events seamlessly within a web browser.

All notifications are displayed, categorized, and managed within a centralized Notification Center UI.

Features

• Create notifications.
• Clear and dismiss notifications.
• Attach handlers for when notifications are created, closed, and interacted with.
• Attach indicators and buttons with actions to notifications.
• Persist notifications in the Notification Center.
• Persist notification toasts.
• Create expiring and/or future notifications.
• Search notifications in the Notification Center.
• Create notifications with markdown, form, premade or custom templated notification content.
• Create grouping streams for notifications.
• Create pop-out frame windows for individiual notification senders and streams.
• Customize to specify the Notification Center and notification toast corners on screen.
• Customize Notification Center theme via Workspace Platforms.

Getting Started

To connect your application to the Web Notification Center, install the Here™ Web Notification Center Client API package.

Import the Web Notification Center Client API

npm install @openfin/web-notifications-client

Set Up the Core-Web Fin Context

Before using the Notification Center, ensure your application is configured with a fin context from the @openfin/core-web package. This context provides the necessary runtime connection and environment information.

For setup instructions, refer to the @openfin/core-web documentation.

Usage

Connect to the Notification Center by importing the module and providing the required options, including the finContext, serviceId, and the container element. The serviceId must match the one used by the Notification Center service to ensure successful communication. The id, title, and icon define the identity of the client application within the Notification Center. The id should remain consistent across sessions to ensure notifications are correctly associated with the same client.

import { connectToNotifications, create } from '@openfin/web-notifications-client';

// initialize fin context.
// connect to the notification center.
await connectToNotifications({
  finContext: fin,
  serviceId: 'notification-center-service-channel',
  id: 'notification-provider-app-unique-id',
  title: 'My Notification Provider App',
  icon: 'https://example.com/logo.png'
});

await create(notificationOptions);