🔔 React Native (TypeScript) এ Firebase Push Notification Integration

এই টিউটোরিয়ালে আমরা শিখব কীভাবে React Native + TypeScript প্রোজেক্টে Firebase Notification বা Push Notification ইন্টিগ্রেট করতে হয়। Push Notification ব্যবহার করে আপনি অ্যাপ ব্যবহারকারীদেরকে রিয়েল-টাইম মেসেজ, আপডেট এবং এলার্ট পাঠাতে পারবেন।

📌 ১. প্রয়োজনীয় Library এবং Setup

Firebase Push Notification কাজ করার জন্য আমাদের দরকার:

• React Native Firebase Core
• React Native Firebase Messaging
• @react-native-firebase/app
• React Native Typescript Template

# React Native project create with TypeScript
npx react-native init MyFirebaseApp --template react-native-template-typescript

# Firebase packages install
yarn add @react-native-firebase/app @react-native-firebase/messaging

Firebase Console-এ আপনার প্রোজেক্ট তৈরি করুন এবং Android/iOS app যোগ করুন। Google-Services.json (Android) এবং GoogleService-Info.plist (iOS) ডাউনলোড করে যথাযথ ফোল্ডারে রাখুন।

📌 ২. Firebase Messaging Permission

React Native-এ push notification পাওয়ার জন্য permission চাওয়া প্রয়োজন।

import messaging from '@react-native-firebase/messaging';
import { useEffect } from 'react';
import { Alert } from 'react-native';

export const useFirebaseNotification = () => {
  useEffect(() => {
    // Request permission
    messaging()
      .requestPermission()
      .then(authStatus => {
        if (authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
            authStatus === messaging.AuthorizationStatus.PROVISIONAL) {
          console.log('Notification permission granted.');
        } else {
          Alert.alert('Permission denied', 'Notification permission is required.');
        }
      });

    // Get FCM token
    messaging()
      .getToken()
      .then(token => {
        console.log('FCM Token:', token);
      });

  }, []);
};

এটি permission চায় এবং device এর FCM Token console-এ দেখায়।

📌 ৩. Foreground Notification হ্যান্ডলিং

অ্যাপ foreground-এ থাকলে notification handle করতে হবে।

import messaging from '@react-native-firebase/messaging';
import { useEffect } from 'react';
import { Alert } from 'react-native';

useEffect(() => {
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    Alert.alert('New Notification!', remoteMessage.notification?.title || '');
  });

  return unsubscribe;
}, []);

এটি একটি alert দিয়ে নতুন notification দেখায়।

📌 ৪. Background & Quit State Notification

অ্যাপ background বা closed থাকলেও notification handle করতে হবে।

// index.tsx
import messaging from '@react-native-firebase/messaging';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background!', remoteMessage);
});

AppRegistry.registerComponent(appName, () => App);

এটি background বা killed state-এ notification handle করবে।

📌 ৫. Testing Notification

Firebase Console থেকে notification send করুন।

1. Firebase Console → Cloud Messaging
2. Send your test notification
3. Device তে notification দেখুন

Output: আপনার device-এ push notification alert প্রদর্শিত হবে।

📌 ৬. Summary & Best Practices

• TypeScript ব্যবহার করে strongly typed props এবং notification handle করুন।
• Foreground এবং Background Notification আলাদাভাবে handle করুন।
• FCM Token secure ভাবে backend-এ পাঠান।
• Notification Permission সর্বদা চেক করুন।
• Heavy logic notification callback এ রাখবেন না। Background thread বা server-side process ব্যবহার করুন।

✔ এইভাবে আপনি React Native (TypeScript) প্রোজেক্টে Firebase Push Notification সফলভাবে integrate করতে পারবেন এবং ব্যবহারকারীকে রিয়েল-টাইম আপডেট পাঠাতে পারবেন।