WebPushNotifier

A lightweight and flexible web notification library that provides a simple API for handling notifications using RxJS observables. It allows you to request permission, display notifications, and handle user interactions in a reactive way.

Features

• Show web notifications with customizable options.
• Auto-dismiss notifications after a set of time (optional).
• Delay notifications after a set of time (optional).
• Handle click, close and permission denied events with callbacks.
• Gracefully manage notification permissions.

Installation

npm install @andreasnicolaou/web-notifier

CDN Usage

You can use the library directly in the browser via CDN. The UMD build exposes the global variable webNotifier.

unpkg CDN (latest, unminified):

<script src="https://unpkg.com/@andreasnicolaou/web-notifier/dist/index.umd.js"></script>

unpkg CDN (latest, minified):

<script src="https://unpkg.com/@andreasnicolaou/web-notifier/dist/index.umd.min.js"></script>

jsDelivr CDN (unminified):

<script src="https://cdn.jsdelivr.net/npm/@andreasnicolaou/web-notifier/dist/index.umd.js"></script>

jsDelivr CDN (minified):

<script src="https://cdn.jsdelivr.net/npm/@andreasnicolaou/web-notifier/dist/index.umd.min.js"></script>

Example: Using in the Browser

<script src="https://unpkg.com/@andreasnicolaou/web-notifier/dist/index.umd.js"></script>
<script>
  // Access the WebPushNotifier class from the global 'webNotifier' object
  const Notifier = window.webNotifier.WebPushNotifier;
  const notifier = new Notifier({ autoDismiss: 2000 });
  notifier.show('Hello from CDN!', { body: 'This is a test notification.' });
</script>

Usage

import { WebPushNotifier } from '@andreasnicolaou/web-notifier';

const webPushNotifier = new WebPushNotifier({ autoDismiss: 5000 });
webPushNotifier.show('Hello there!', { body: 'This is a test notification using @andreasnicolaou/web-notifier.' });

API

new WebPushNotifier(globalOptions?: WebPushNotifierOptions, globalCallbacks?: WebPushNotifierCallbacks)

Creates a new notification handler with optional default settings.

• globalOptions: Default notification options.
• globalCallbacks: Default callbacks for notification events.

.show(title: string, options?: WebPushNotifierOptions, callbacks?: WebPushNotifierCallbacks): Observable<Notification | null>

Creates & Displays the notification.

• title: The title of the notification.
• options: Notification options (optional).
• callbacks: Callbacks for notification events (optional).
• Returns an Observable that emits the notification instance if successful.

.dismissAll(): void

Closes all active notifications.

Learn more about the Notification API

• Notification API - MDN
• Browser Compatibility - MDN