نحوه پیاده سازی Push Notifications در React Native برای اندروید و iOS

Summarize this content to 400 words in Persian Lang
اعلان‌های فشاری یک ویژگی حیاتی در برنامه‌های مدرن موبایل هستند که امکان برقراری ارتباط بی‌درنگ با کاربران را فراهم می‌کنند. در این مقاله، من شما را از طریق اجرای اعلان‌های فشار در یک برنامه React Native برای اندروید و iOS راهنمایی می‌کنم. ما راه‌اندازی اعلان و مدیریت مجوزها را همراه با نمونه‌های کد پوشش خواهیم داد.

چرا Push Notifications؟

اعلان‌های فشاری به شما این امکان را می‌دهند:

1. – درگیر کردن کاربران با به روز رسانی به موقع.
2. – افزایش حفظ کاربر از طریق یادآوری.
3. – به کاربران در مورد رویدادهای مهم، پیشنهادات یا به روز رسانی ها اطلاع دهید.
4. – بیایید به پیاده سازی این در React Native بپردازیم. راه اندازی Push Notifications

پیش نیازها قبل از شروع، اطمینان حاصل کنید که:

یک برنامه React Native راه اندازی شد.وابستگی های نصب شده:

@react-native-async-storage/async-storage
react-native-push-notification
@react-native-firebase/messaging (اگر از Firebase برای اطلاعیه ها)
درخواست مجوزهای اعلانمجوزها برای فعال کردن اعلان‌های فشاری حیاتی هستند. در اینجا نحوه تنظیم یک اعلان زمانی که کاربر روی دکمه ای (مثلاً “Remind Me”) برای درخواست مجوزهای اعلان کلیک می کند، توضیح داده شده است.

import { Alert, PermissionsAndroid, Platform } from ‘react-native’;
import PushNotification from ‘react-native-push-notification’;

export async function requestNotificationPermission() {
if (Platform.OS === ‘ios’) {
// iOS-specific permission request
const authStatus = await messaging().requestPermission();
if (
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL
) {
setupPushNotificationChannel();
} else {
Alert.alert(‘Permission Denied’, ‘Notifications are disabled.’);
}
} else if (Platform.OS === ‘android’) {
// Android-specific permission request
if (Platform.Version >= 33) {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
{
title: ‘Notification Permission’,
message: ‘Allow this app to send notifications?’,
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
setupPushNotificationChannel();
} else {
Alert.alert(
‘Permission Denied’,
‘Please enable notifications from settings.’
);
}
} catch (error) {
console.error(‘Permission request failed:’, error);
}
} else {
setupPushNotificationChannel();
}
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

راه اندازی کانال های اعلان کانال های اعلان در اندروید برای دسته بندی و اولویت بندی اعلان ها ضروری هستند. کد زیر نحوه ایجاد یک کانال با استفاده از react-native-push-notification را نشان می دهد:

const setupPushNotificationChannel = () => {
PushNotification.createChannel(
{
channelId: ‘default_channel’, // Unique ID for the channel
channelName: ‘Default Notifications’, // Channel name
channelDescription: ‘A default notification channel’, // Description
vibrate: true, // Vibration setting
},
(created) => console.log(`Notification channel created: ${created}`)
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

راه‌اندازی اعلان‌های محلی می‌توانید با استفاده از react-native-push-notification یک اعلان محلی راه‌اندازی کنید. این برای آزمایش یا ارسال یادآوری مفید است.

const triggerLocalNotification = () => {
PushNotification.localNotification({
channelId: ‘default_channel’,
title: ‘Reminder!’,
message: ‘Don’t forget to check this out!’,
playSound: true,
soundName: ‘default’,
vibrate: true,
});
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مدیریت اعلان ها در حالت های پیش زمینه، پس زمینه و خروج برای مدیریت رفتار اعلان ها در حالت های مختلف برنامه، می توانید از @react-native-firebase/messaging یا یک بسته مشابه استفاده کنید.

import messaging from ‘@react-native-firebase/messaging’;

export const notificationListener = () => {
// Handle notification when the app is in the foreground
messaging().onMessage(async (remoteMessage) => {
console.log(‘Foreground notification:’, remoteMessage);
triggerLocalNotification();
});

// Handle notification when the app is opened from the background
messaging().onNotificationOpenedApp((remoteMessage) => {
console.log(‘Notification opened:’, remoteMessage);
});

// Handle notification when the app is launched via a notification
messaging()
.getInitialNotification()
.then((remoteMessage) => {
if (remoteMessage) {
console.log(‘Initial notification:’, remoteMessage);
}
});
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اجرای نهایی در برنامه شما

توابع بالا را در برنامه خود ادغام کنید. در اینجا نحوه اتصال همه چیز به یکدیگر آمده است:

درخواست مجوز زمانی که کاربر روی دکمه ای کلیک می کند:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

راه اندازی اعلان های محلی:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شنوندگان را در نقطه ورود برنامه خود راه اندازی کنید:

import { notificationListener } from ‘./NotificationService’;

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تاثیر Push Notifications

پیاده‌سازی اعلان‌های فشاری می‌تواند تعامل کاربران را به میزان قابل توجهی افزایش دهد. در اینجا برخی از مزایای کلیدی وجود دارد:

به روز رسانی در زمان واقعی: بلافاصله به کاربران در مورد رویدادهای مهم اطلاع دهید.حفظ بهبود یافته: برای تشویق کاربران به بازگشت به برنامه یادآوری ارسال کنید.تجربه پیشرفته: پیام‌ها را برای ایجاد یک تجربه مناسب شخصی‌سازی کنید.

import { Alert, PermissionsAndroid, Platform } from 'react-native';
import PushNotification from 'react-native-push-notification';

export async function requestNotificationPermission() {
  if (Platform.OS === 'ios') {
    // iOS-specific permission request
    const authStatus = await messaging().requestPermission();
    if (
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL
    ) {
      setupPushNotificationChannel();
    } else {
      Alert.alert('Permission Denied', 'Notifications are disabled.');
    }
  } else if (Platform.OS === 'android') {
    // Android-specific permission request
    if (Platform.Version >= 33) {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
          {
            title: 'Notification Permission',
            message: 'Allow this app to send notifications?',
          }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          setupPushNotificationChannel();
        } else {
          Alert.alert(
            'Permission Denied',
            'Please enable notifications from settings.'
          );
        }
      } catch (error) {
        console.error('Permission request failed:', error);
      }
    } else {
      setupPushNotificationChannel();
    }
  }
}

const setupPushNotificationChannel = () => {
  PushNotification.createChannel(
    {
      channelId: 'default_channel', // Unique ID for the channel
      channelName: 'Default Notifications', // Channel name
      channelDescription: 'A default notification channel', // Description
      vibrate: true, // Vibration setting
    },
    (created) => console.log(`Notification channel created: ${created}`)
  );
};

const triggerLocalNotification = () => {
  PushNotification.localNotification({
    channelId: 'default_channel',
    title: 'Reminder!',
    message: 'Don’t forget to check this out!',
    playSound: true,
    soundName: 'default',
    vibrate: true,
  });
};

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

export const notificationListener = () => {
  // Handle notification when the app is in the foreground
  messaging().onMessage(async (remoteMessage) => {
    console.log('Foreground notification:', remoteMessage);
    triggerLocalNotification();
  });

  // Handle notification when the app is opened from the background
  messaging().onNotificationOpenedApp((remoteMessage) => {
    console.log('Notification opened:', remoteMessage);
  });

  // Handle notification when the app is launched via a notification
  messaging()
    .getInitialNotification()
    .then((remoteMessage) => {
      if (remoteMessage) {
        console.log('Initial notification:', remoteMessage);
      }
    });
};

import { notificationListener } from './NotificationService';

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