ورود شروع رایگان
بازگشت به وبلاگ

آموزش ارسال پوش نوتیفیکیشن در React Native؛ از پیچیدگی‌های فنی تا راه‌حل سریع با پوشفا

۱۴۰۵-۰۵-۲۸ علیرضا
آموزش ارسال پوش نوتیفیکیشن در React Native؛ از پیچیدگی‌های فنی تا راه‌حل سریع با پوشفا

مقدمه

پوش نوتیفیکیشن (Push Notification) امروزه به یکی از مهم‌ترین ابزارهای ارتباط با کاربران در اپلیکیشن‌های موبایل تبدیل شده است. اگر توسعه‌دهنده اپلیکیشن با React Native هستید، احتمالاً می‌دانید که افزودن این قابلیت به اپلیکیشن می‌تواند چالش‌برانگیز باشد. در این مقاله ابتدا روش سنتی و کاملاً فنی پیاده‌سازی پوش را در React Native توضیح می‌دهیم و نشان می‌دهیم که چرا این کار می‌تواند سخت و زمان‌بر باشد. سپس با معرفی سرویس پوشفا، راه‌حلی ساده و سریع ارائه می‌دهیم که در چند دقیقه اپلیکیشن شما را به قابلیت ارسال پوش مجهز می‌کند. اگر تجربه برنامه‌نویسی با React Native را دارید، این آموزش برای شما مفید خواهد بود، اما حتی اگر تازه‌کار هستید یا به دنبال راهکاری سریعتر و موثر تر و با نتیجه بهتر هستید نیز می‌توانید از راه‌حل پوشفا استفاده کنید.

فهرست مطالب

چرا پیاده‌سازی پوش در React Native پیچیده است؟

React Native یک فریم‌ورک محبوب برای توسعه اپلیکیشن‌های موبایل است که به توسعه‌دهندگان امکان می‌دهد با استفاده از جاوااسکریپت، اپلیکیشن‌های بومی برای اندروید و iOS بسازند. اما ارسال پوش نوتیفیکیشن نیازمند تعامل با سرویس‌های بومی هر پلتفرم است: برای اندروید باید با Firebase Cloud Messaging (FCM) کار کنید و برای iOS با Apple Push Notification Service (APNs). این دو سرویس دارای پروتکل‌ها، تنظیمات و الزامات خاص خود هستند. علاوه بر این، در React Native باید از کتابخانه‌های شخص ثالث مانند react-native-push-notification یا notifee استفاده کنید که هرکدام پیکربندی مخصوص خود را دارند. مدیریت توکن‌های دستگاه، پس‌زمینه و بسته بودن اپلیکیشن، همگام‌سازی با سرور و ارسال کمپین‌های هدفمند نیز پیچیدگی‌های بیشتری ایجاد می‌کند. در ادامه، جزئیات این مراحل را بررسی می‌کنیم.

ابزارهای سنتی: React Native Push Notification و Firebase

برای پیاده‌سازی سنتی پوش در React Native، معمولاً از کتابخانه‌های محبوب مانند react-native-push-notification (مخصوص اندروید) و @react-native-community/push-notification-ios (مخصوص iOS) یا کتابخانه notifee استفاده می‌شود. این کتابخانه‌ها امکاناتی مانند نمایش نوتیفیکیشن، مدیریت رویدادهای کلیک و دریافت توکن را فراهم می‌کنند، اما تنظیمات اولیه نیازمند مراحل متعددی است. به عنوان مثال، برای اندروید باید فایل AndroidManifest.xml را تغییر دهید، کانال‌های نوتیفیکیشن (Notification Channel) بسازید و از FCM برای دریافت پیام استفاده کنید. برای iOS نیز باید گواهی APNs یا کلیدهای احراز هویت را در اپل Developer ثبت کنید و به فایل AppDelegate.m تغییراتی دهید. این فرآیند می‌تواند برای توسعه‌دهندگان تازه‌کار گیج‌کننده باشد و حتی برای توسعه‌دهندگان باتجربه، نیازمند دقت فراوان است.

آموزش گام‌به‌گام روش سنتی (پیچیده)

در این بخش، مراحل اصلی پیاده‌سازی سنتی را با جزئیات فنی شرح می‌دهیم. همان‌طور که خواهید دید، این مسیر شامل چندین مرحله است که هرکدام می‌تواند نقطه شکست باشد.

گام ۱: نصب کتابخانه‌های لازم

ابتدا باید کتابخانه اصلی را نصب کنید. برای اندروید از دستور زیر استفاده کنید:

npm install --save react-native-push-notification

برای iOS نیز باید کتابخانه @react-native-community/push-notification-ios را نصب و با استفاده از pod install لینک کنید:

npm install --save @react-native-community/push-notification-ios
cd ios && pod install

اگر از React Native 0.60 به بالا استفاده می‌کنید، لینک خودکار انجام می‌شود، اما همچنان باید تغییرات دستی را انجام دهید.

گام ۲: تنظیمات اندروید

در فایل android/app/build.gradle، وابستگی FCM را اضافه کنید:

dependencies {
    implementation 'com.google.firebase:firebase-messaging:23.0.0'
}

همچنین باید فایل google-services.json که از کنسول Firebase دریافت می‌کنید را در پوشه android/app قرار دهید. سپس در AndroidManifest.xml، مجوزهای لازم را اضافه کنید:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

همچنین باید سرویس‌Receiver برای مدیریت رویدادها تعریف کنید.

گام ۳: تنظیمات iOS

در فایل AppDelegate.m (برای Objective-C) یا AppDelegate.swift، کدهای مربوط به ثبت‌نام در APNs را اضافه کنید. به عنوان مثال:

#import 
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  ...
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;
  [center requestAuthorizationWithOptions:(UNAuthorizationOptionAlert | UNAuthorizationOptionBadge | UNAuthorizationOptionSound) completionHandler:^(BOOL granted, NSError * _Nullable error) {
    if (granted) {
      [application registerForRemoteNotifications];
    }
  }];
  return YES;
}

سپس باید گواهی APNs را از اپل تهیه کنید و در تنظیمات Xcode قرار دهید.

گام ۴: راه‌اندازی کتابخانه و دریافت توکن

حالا در کد خود، یک فایل جداگانه برای مدیریت نوتیفیکیشن بسازید:

import PushNotification from 'react-native-push-notification';

PushNotification.configure({
  onRegister: function(token) {
    console.log('TOKEN:', token);
    // این توکن را به سرور خود ارسال کنید
  },
  onNotification: function(notification) {
    console.log('NOTIFICATION:', notification);
  },
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },
  popInitialNotification: true,
});

همچنین باید یک کانال نوتیفیکیشن برای اندروید بسازید:

PushNotification.createChannel({
  channelId: "default-channel",
  channelName: "Default Channel",
  importance: 4,
  vibrate: true,
}, (created) => console.log(`Channel created: ${created}`));

گام ۵: ارسال پیام از سرور

برای ارسال پیام، باید از سرویس FCM یا APNs استفاده کنید. برای FCM، می‌توانید با استفاده از REST API درخواست ارسال دهید:

POST https://fcm.googleapis.com/v1/projects/your-project-id/messages:send
Headers: Authorization: Bearer YOUR_ACCESS_TOKEN
Body: {
  "message": {
    "token": "device-token",
    "notification": {
      "title": "عنوان",
      "body": "پیام"
    }
  }
}

برای این کار باید توکن دسترسی OAuth2 بسازید و پروتکل‌های احراز هویت را رعایت کنید. این مرحله به خودی خود پیچیده است و نیاز به درک عمیق از سرویس‌های گوگل دارد.

گام ۶: مدیریت رویدادهای پس‌زمینه

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

public class MyFCMService extends FirebaseMessagingService {
  @Override
  public void onMessageReceived(RemoteMessage remoteMessage) {
    // نمایش نوتیفیکیشن
  }
}

در iOS نیز باید متدهای application:didReceiveRemoteNotification: را پیاده‌سازی کنید. این کارها نیاز به دانش زبان‌های بومی (Java/Kotlin و Objective-C/Swift) دارد.

چالش‌های رایج در روش سنتی

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

  • پیچیدگی تنظیمات اولیه: راه‌اندازی FCM و APNs به تنظیمات دقیق در کنسول‌های مختلف نیاز دارد و هر اشتباه کوچکی باعث می‌شود نوتیفیکیشن کار نکند.
  • عدم یکپارچگی بین دو پلتفرم: باید برای هر پلتفرم کدهای جداگانه بنویسید و مشکلات مختلفی را مدیریت کنید.
  • مدیریت توکن‌ها: توکن دستگاه‌ها منقضی می‌شوند و باید به‌روزرسانی شوند؛ این کار مستلزم پیاده‌سازی منطق سمت سرور است.
  • خطاهای عجیب: گاهی نوتیفیکیشن در حالت توسعه کار می‌کند اما در محیط تولید، به دلیل اشتباه در گواهی‌ها یا کانال‌ها، ارسال نمی‌شود.
  • نیاز به سرور جداگانه: برای ارسال کمپین‌های هدفمند، باید سرور خودتان را بسازید و رابط‌های برنامه‌نویسی (API) را طراحی کنید که زمان‌بر است.

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

راه‌حل سریع: استفاده از پوشفا

پوشفا یک سرویس ایرانی ارسال پوش نوتیفیکیشن است که برای وب‌سایت‌ها و اپلیکیشن‌های موبایل راه‌حلی ساده و کم‌هزینه ارائه می‌دهد. با پوشفا می‌توانید بدون درگیر شدن با پیچیدگی‌های FCM و APNs، پوش نوتیفیکیشن را به اپلیکیشن React Native خود اضافه کنید. مراحل زیر نشان می‌دهد که چقدر ساده است:

گام ۱: ثبت‌نام در پوشفا و ساخت پروژه

ابتدا در وب‌سایت پوشفا ثبت‌نام کنید و یک پروژه جدید بسازید. برای اپلیکیشن موبایل، نوع پروژه را «اپلیکیشن موبایل» انتخاب کنید. پوشفا کلید API (API Key) در اختیار شما قرار می‌دهد که از آن برای ارتباط استفاده می‌کنید.

گام ۲: نصب SDK پوشفا

پوشفا برای React Native یک SDK سبک ارائه می‌دهد که نصب آن بسیار آسان است. کافیست دستور زیر را اجرا کنید:

npm install react-native-pushfa-sdk

سپس کتابخانه را در کد خود import کنید:

import Pushfa from 'react-native-pushfa-sdk';

Pushfa.init('YOUR_API_KEY');

با این دو خط، اپلیکیشن شما آماده دریافت و ارسال پوش می‌شود. کتابخانه به‌طور خودکار توکن دستگاه را ثبت می‌کند و با سرور پوشفا ارتباط برقرار می‌کند.

گام ۳: ارسال اولین پوش نوتیفیکیشن

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

POST https://api.pushfa.com/v1/notifications
Headers: Authorization: Bearer YOUR_API_KEY
Body: {
  "title": "پیام شما",
  "body": "متن پیام",
  "target": "android" // یا ios
}

با این کار، پوش به همه کاربران یا گروه خاصی ارسال می‌شود. همچنین امکان ارسال به یک توکن خاص نیز وجود دارد.

گام ۴: مدیریت رویدادها

برای مدیریت کلیک روی نوتیفیکیشن، SDK پوشفا یک متد ساده دارد:

Pushfa.onNotification((notification) => {
  console.log('User clicked on notification', notification);
  // هدایت کاربر به صفحه موردنظر
});

این کار بدون تغییرات پیچیده نیتیو انجام می‌شود و تمام پیچیدگی‌ها در SDK پوشفا پنهان شده است.

نکات کاربردی و بهینه‌سازی

حالا که با راه‌حل سریع آشنا شدید، در این بخش چند نکته مهم برای استفاده بهینه از پوش نوتیفیکیشن در React Native با پوشفا ارائه می‌دهیم:

  • درخواست مجوز به‌موقع: برای دریافت مجوز ارسال نوتیفیکیشن، باید بعد از ثبت‌نام کاربر و فقط در زمان‌های ضروری درخواست بدهید. پوشفا SDK به شما کمک می‌کند تا این کار را مدیریت کنید.
  • استفاده از دیپ لینک: برای افزایش نرخ کلیک، می‌توانید از دیپ لینک استفاده کنید تا کاربر با کلیک بر روی نوتیفیکیشن به صفحه موردنظر هدایت شود.
  • تست در دستگاه‌های مختلف: حتماً اپلیکیشن را روی چند دستگاه آزمایش کنید تا مطمئن شوید پوش به درستی نمایش داده می‌شود.
  • تحلیل عملکرد: با استفاده از قابلیت تحلیل عملکرد پوش، می‌توانید نرخ کلیک و تعامل کاربران را بسنجید و کمپین‌های خود را بهبود دهید.

نتیجه‌گیری

پیاده‌سازی سنتی پوش نوتیفیکیشن در React Native یک کار زمان‌بر و پیچیده است که نیاز به دانش عمیق از سرویس‌های بومی و مدیریت خطاهای مختلف دارد. اما با استفاده از سرویس پوشفا، می‌توانید این قابلیت را تنها در چند دقیقه به اپلیکیشن خود اضافه کنید و از زمان خود برای توسعه سایر بخش‌ها استفاده کنید. اگر به دنبال راهی ساده و مطمئن برای ارسال پوش هستید، پوشفا انتخاب مناسبی است. برای شروع، فقط کافیست ثبت‌نام کنید و از پنل کاربری ساده آن استفاده نمایید. پس از آن کافیست از کتابخانه android native  پوشفا استفاده کرده و سپس از کتابخانه فوق در اپلیکیشن React Native  خود به شکل wrapper /bridge استفاده کنید. همچنین برای بهبود کمپین‌های خود، می‌توانید از راهنمای کمپین‌نویسی پوش استفاده کنید. در نهایت، به یاد داشته باشید که پوش نوتیفیکیشن ابزاری قدرتمند است و باید به‌گونه‌ای استفاده شود که تجربه کاربری را بهبود بخشد، نه اینکه او را آزار دهد. با رعایت اصول بهترین زمان ارسال و شخصی‌سازی، می‌توانید تعامل کاربران را افزایش دهید. برای مطالعه بیشتر در این زمینه، می‌توانید به مقالات بهترین زمان ارسال و شخصی‌سازی پوش مراجعه کنید.