https://github.com/andreasnicolaou/web-notifier
A lightweight and flexible web notification library that provides a simple API for handling browser notifications using RxJS observables. It allows you to request permission, display notifications, and handle user interactions in a reactive way.
https://github.com/andreasnicolaou/web-notifier
Last synced: about 1 month ago
JSON representation
A lightweight and flexible web notification library that provides a simple API for handling browser notifications using RxJS observables. It allows you to request permission, display notifications, and handle user interactions in a reactive way.
- Host: GitHub
- URL: https://github.com/andreasnicolaou/web-notifier
- Owner: andreasnicolaou
- License: mit
- Created: 2025-03-15T07:37:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-06T08:36:12.000Z (2 months ago)
- Last Synced: 2026-04-06T10:23:13.893Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.05 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- fucking-awesome-angular - web-notifier - Lightweight, flexible web notification library with simple RxJS‑based API for browser notifications. (Third Party Components / Notifications)
- awesome-angular - web-notifier - Lightweight, flexible web notification library with simple RxJS‑based API for browser notifications. (Third Party Components / Notifications)
README
# 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
```sh
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):**
```html
```
**unpkg CDN (latest, minified):**
```html
```
**jsDelivr CDN (unminified):**
```html
```
**jsDelivr CDN (minified):**
```html
```
### Example: Using in the Browser
```html
// 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.' });
```
## Usage
```typescript
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
```sh
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.
```sh
.show(title: string, options?: WebPushNotifierOptions, callbacks?: WebPushNotifierCallbacks): Observable
```
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.
```sh
.dismissAll(): void
```
Closes all active notifications.
## Learn more about the Notification API
- [Notification API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Notification)
- [Browser Compatibility - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Notification#browser_compatibility)