React — الإشعارات

cp node_modules/@lerix-dev/lerix-core/sw/lerix-sw.js your-app/public/lerix-sw.js

import { useEffect } from 'react';
import { useLerixNotifications } from '@lerix-dev/lerix-react';

function MyComponent() {
  const notifications = useLerixNotifications();

  useEffect(() => {
    notifications.setOnNotificationReceived((payload) => {
      // يُستدعى أثناء فتح التبويب.
      console.log(payload.title, payload.body);
    });

    notifications.setOnNotificationTapped((payload) => {
      // يُستدعى عند ضغط المستخدم على الإشعار — بما في ذلك إشعار فتح
      // الصفحة من تبويب مُغلَق تماماً.
      const screen = payload.metadata['screen'];
    });
  }, []);

  const enablePush = async () => {
    const subscribed = await notifications.subscribe();
  };

  return <button onClick={enablePush}>Enable notifications</button>;
}

interface LerixNotificationPayload {
  notificationId: string | null;
  title: string | null;
  body: string | null;
  metadata: Record<string, unknown>;
  imageUrl: string | null;
}

const tokenId = notifications.getRegisteredTokenId();

{
  "title": "New message from John",
  "body": "Hey, are you free later?",
  "metadata": { "chatId": "456", "screen": "chat" }
}

notifications.setOnNotificationTapped((payload) => {
  const chatId = payload.metadata['chatId'];
});

import { useLerix } from '@lerix-dev/lerix-react';

const lerix = useLerix(); // inside a component

await lerix.setUser('user_123'); // after login
await lerix.clearUser();         // on logout

await notifications.subscribeToTopic('promotions');
await notifications.unsubscribeFromTopic('promotions');