<!-- README for NPM; the one for GitHub is in .github directory. -->

# 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

```bash
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](https://www.npmjs.com/package/@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.

```ts
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);
```