@kode-stack/notification-web

Official Web & Angular Push Notification SDK for TL Notification Service (OneSignal-like simplicity for browsers).

🚀 Features

• Cross-Framework: Works with Angular, React, Vue, Next.js, and Vanilla JavaScript.
• SSR Safe: Safe for Angular SSR (@angular/ssr) and server-rendered apps.
• OneSignal-Like API: initialize(), requestPermission(), login(), logout(), setTags().
• Admin Dispatcher API: Send notifications directly from Angular admin portals to mobile apps (sendNotification()).
• Analytics & Tracking: Tracks DELIVERED and CLICKED events.

📦 Installation

npm install @kode-stack/notification-web

🛠️ Usage in Angular (tlexpress_system_angular)

1. In app.config.ts or app.component.ts (Initialization)

import { Component, OnInit } from '@angular/core';
import TLNotificationWeb from '@kode-stack/notification-web';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  async ngOnInit() {
    // Initialize Web SDK
    await TLNotificationWeb.initialize({
      baseUrl: 'https://notification-api.kt-store.online/',
      appKey: 'app_live_ItVYOt4Tqho3fPvZ6Ny5qmhZMXX9faU8',
      autoRegister: true, // Automatically registers when user grants permission
    });

    // Request notification permission if not yet granted
    await TLNotificationWeb.requestPermission();

    // Listen for incoming notifications
    TLNotificationWeb.onNotificationReceived((notification) => {
      console.log('Received push in browser:', notification.title);
    });

    // Listen for notification clicks
    TLNotificationWeb.onNotificationOpened((notification) => {
      console.log('User clicked notification:', notification.customData);
    });
  }
}

2. User Login / Identification

Associate the current logged-in employee or user:

// Call after successful login in Angular Auth Service:
await TLNotificationWeb.login('USER_ID_OR_STAFF_CODE', {
  role: 'DISPATCHER',
  branchId: 'BRANCH_101',
});

3. User Logout

// Call on logout:
await TLNotificationWeb.logout();

4. Sending Push Notifications to Mobile App Drivers (From Angular Portal)

Admins or operators can send real-time push alerts to mobile users directly:

await TLNotificationWeb.sendNotification({
  title: 'New Shipment Ready',
  body: 'Order #TL-9988 has been assigned to you.',
  targetType: 'EXTERNAL_IDS',
  externalIds: ['driver_123'],
  data: {
    orderId: 'TL-9988',
    screen: 'OrderDetail',
  },
});

📄 License

MIT © TL Notification Team