Push Notifications (Expo & Firebase)

React Native Push Notifications (Expo & Firebase) — সম্পূর্ণ বাংলা গাইড

Push Notification হচ্ছে মোবাইল অ্যাপের সবচেয়ে গুরুত্বপূর্ণ ফিচারগুলোর একটি। এর মাধ্যমে আপনি ব্যবহারকারীদের কাছে রিয়েল-টাইম আপডেট, মেসেজ, অফার বা আলার্ট পাঠাতে পারবেন। এই গাইডে আমরা দেখবো—React Native এ কিভাবে Expo Push Notification এবং Firebase Cloud Messaging (FCM) ব্যবহার করা যায়।

📌 1. Push Notification কী?

Push Notification এমন একটি সিস্টেম যেটি অ্যাপ খোলা না থাকলেও ব্যবহারকারীর ফোনে নোটিফিকেশন পাঠাতে পারে।

  • নতুন মেসেজ
  • অফার/ডিসকাউন্ট
  • অ্যাপ আপডেট
  • রিমাইন্ডার

📌 2. Expo Push Notification সেটআপ

Expo ব্যবহার করলে Push Notification সেটআপ খুব সহজ হয় কারণ Expo নিজেই সব প্ল্যাটফর্মে নোটিফিকেশন হ্যান্ডেল করে।

✔ Step 1: Installation

expo install expo-notifications

✔ Step 2: Permission Request

import * as Notifications from 'expo-notifications';
import { useEffect } from 'react';
import { Platform } from 'react-native';

export default function App() {

  useEffect(() => {
    registerForPushTokenAsync();
  }, []);

  const registerForPushTokenAsync = async () => {
    const { status } = await Notifications.requestPermissionsAsync();
    if (status !== 'granted') {
      alert("Permission not granted!");
      return;
    }
    const token = await Notifications.getExpoPushTokenAsync();
    console.log("Expo Push Token:", token.data);
  };

  return null;
}

✔ Step 3: Sending Notification (Using Expo API)

Expo push API ব্যবহার করে আপনার সার্ভার/পোস্টম্যান থেকে নোটিফিকেশন পাঠাতে পারবেন:

POST https://exp.host/--/api/v2/push/send

{
  "to": "ExponentPushToken[xxxxxxxxxxxxxx]",
  "title": "হ্যালো!",
  "body": "এটি একটি টেস্ট নোটিফিকেশন।"
}

📌 3. Notification Listener (Foreground)

useEffect(() => {
  const subscription = Notifications.addNotificationReceivedListener(notification => {
    console.log("Received in foreground:", notification);
  });
  
  return () => subscription.remove();
}, []);

📌 4. Firebase Cloud Messaging (FCM) – React Native CLI এর জন্য

React Native CLI বা Bare Workflow এ Push Notification করতে Firebase Cloud Messaging (FCM) সবচেয়ে জনপ্রিয়।

✔ Step 1: Installation

npm install @react-native-firebase/app
npm install @react-native-firebase/messaging

✔ Step 2: Permission Request (Android & iOS)

import messaging from '@react-native-firebase/messaging';

async function requestPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
}

✔ Step 3: Get FCM Token

const fcmToken = await messaging().getToken();
console.log("FCM Token:", fcmToken);

✔ Step 4: Background & Quit State Listener

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

✔ Step 5: Send Notification via Firebase Console

Firebase Console → Cloud Messaging → Send Message → Token পেস্ট করুন।

📌 5. Local Notifications

Push ছাড়া অ্যাপের ভিতরে নিজেই নোটিফিকেশন তৈরি করা যায়: 

Notifications.scheduleNotificationAsync({
  content: {
    title: "Reminder",
    body: "আজকে কোড করা হয়নি!",
  },
  trigger: { seconds: 5 },
});

📌 6. Best Practices

  • ফ্রিকোয়েন্ট নোটিফিকেশন পাঠাবেন না
  • টপিক/গ্রুপ ভিত্তিক নোটিফিকেশন ব্যবহার করুন
  • অ্যাপ ওপেন হলে ডুপ্লিকেট নোটিফিকেশন এড়ান
  • নোটিফিকেশনের আইকন সর্বদা হাই-রেজ ব্যবহার করুন

✔ সারসংক্ষেপ

এই গাইডে আমরা শিখলাম—

  • Push Notification কী?
  • Expo Notification Setup
  • Expo API দিয়ে নোটিফিকেশন পাঠানো
  • Firebase Cloud Messaging (FCM) Setup
  • Permission Handling
  • Local Notification সেটআপ
← Previous Next →
👼 Quiz
/

লোড হচ্ছে...