onesignal pushe.co s-3.664-0.699-5.062-2.099c-1.397-1.398-2.097-3.087-2.097-5.065s0.699-3.667,2.097-5.065c1.397-1.399,3.085-2.099,5.062-2.099 s3.664,0.699,5.062,2.099C223.888,120.556,224.587,122.244,224.587,124.223z"/>

React Native

پلاگین جدید پوشه برای ری‌اکت‌نیتیو

پلاگین پوشه که قبلا با پکیج نیم react-native-pushe قابل دسترس بود توسط تیم پوشه مجدد باز نویسی شده و هم اکنون این پلاگین با پکیج‌نیم pushe-react-native و امکانات جدید مانند callback برای اعلان در مخزن npm قابل دسترسی و نصب می باشد.

بروزرسانی از پلاگین قدیم به این نسخه

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

‍‍1. ابتدا پلاگین سابق را با دستور npm rm react-native-pushe پاک کنید و پلاگین جدید را با دستور ‍‍‍npm i -P pushe-react-native نصب کنید

2.تنها تغییری که باید در داخل کدتان انجام دهید این است که import های ‍‍react-native-pushe را به pushe-react-native تغییر دهید که برای این کار می‌توانید از ابزار replace در IDE‌ تان استفاده کنید و یا از افزونه های مثل module-alias برای alias کردن نام پلاگین استفاده کنید. ‍‍

نمونه‌کد و رفع‌خطا

  • برای مشاهده‌ی نمونه‌کد پروژه‌ی پوشه در ری‌اکت‌نیتیو می‌توانید به گیت‌هاب پوشه
  • در صورت وجود هرگونه مشکل ابتدا بخش عیب‌یابی را بررسی کنید و در صورت نبود راه‌حل آن‌را در issues گیت‌هاب و یا پشتیبانی گزارش دهید.

راه‌اندازی

اضافه کردن کتابخانه react native

  • با استفاده از دستور زیر کتابخانه ی پوشه را به پروژه خود اضافه کنید.
npm i -P pushe-react-native

دستور react-native link

در صورتی که نسخه ری‌اکت‌نیتو‌ی که استفاده می کنید 0.60.0 و به بعد می‌باشد دیگر برای لینک کردن پلاگین نیازی به استفاده از دستور react-native link pushe-react-native نیست و خود ری‌اکت‌نیتیو این کار را برای شما انجام می‌دهد.

برای اطلاع بیشتر می‌توانید اینجا را مطالعه کنید

‍‍‍

  • برای لینک کردن کتابخانه‌ی پوشه دستور زیر را اجرا کنید:
react-native link pushe-react-native
در صورتی که بعد از زدن دستور بالا کتابخانه پوشه به اپلیکیشن‌تان اضافه نشد می توانید در قسمت عیب یابی ، راهنمای اضافه کردن کتابخانه به صورت دستی به اپلیکیشن‌تان را مشاهده کنید.

تغییرات AndroidManifest.xml

  • وارد پنل کاربری پوشه شوید و در قسمت اپلیکیشن ها، روی آیکون دریافت منیفست بزنید (این آیکون را با کلیک بر روی علامت سه نقطه ی گوشه ی کارت اپلیکیشن می توانید ببینید).
  • منیفست ری‌اکت نیتیو را انتخاب کنید و محتویات آن را که مشابه کد زیر می باشد کپی کرده و به AndroidManifest.xml پروژه خود و زیر مجموعه تگ application اضافه کنید.
<meta-data android:name="co.ronash.pushe.token" android:value="PUSHE_TOKEN"/>

فایل مانیفست برنامه در آدرس زیر در پروژه قابل دسترسی‌ست:

android/src/main/AndroidManifest.xml

تغییرات app.js

  • در کامپوننت App.js و یا اولین کامپوننت‌ی که برنامه از آن جا شروع میشود کتابخانه پوشه را اضافه کنید:

در صورتی که کامپوننت شما از نوع class می باشد در ‍constructor کد زیر را قرار دهید:

import React from "react";
import Pushe from "pushe-react-native"; // * Import Pushe

class App extends React.Component {
    constructor(props) {
        super(props);
        // Initialize Pushe library
        Pushe.initialize(true);
    }

    render() {
        return (
            ...
        );
    }
}

و در صورتی که کامپوننت شما از نوع function می‌باشد می توانید به شکل زیر تابع initialize پوشه را صدا بزنید:

import React, {useEffect} from "react";
import Pushe from "pushe-react-native"; // * Import Pushe

const App = () => {
    // Use react hooks to initialize Pushe
    useEffect(() => {
        Pushe.initialize(true);
    }, []);


    return (
        ...
    );
}
  • صدا زدن تابع Pushe.init در قسمت هایی که در بالا گفته شده اجباری نمی باشد و می توانید در هر قسمت دیگری که تمایل داشتید این کد را صدا بزنید ولی با توجه به ساختار ری‌اکت توصیه می شود که این کد در اولین کامپوننت‌ی که کل اپلیکیشن از آن شروع می شود قرار داده شود.

  • اگر در تابع بالا مقدار true گذاشته شود و دستگاه کاربر شما گوگل پلی سرویس نداشته باشد و یا آن را غیرفعال کرده باشد دیالوگی باز می شود و به کاربر پیشنهاد نصب گوگل پلی سرویس داده می شود تا قابلیت دریافت و ارسال پوش نوتیفیکیشن فعال شود. اگر در تابع بالا false را قرار دهید، این دیالوگ برای کاربر باز نمی شود.

تست

پس از اینکه فایل کتابخانه را مطابق با آموزش داده شده نصب کردید، میتوانید پروژه را اجرا و بر روی دستگاه خود نصب و تست کنید.

  • به صفحه نصب ها بروید.
  • بعد از گذشت زمان کوتاهی یک ردیف مشخصات نصب به لیست نصب ها اضافه می شود که متعلق به گوشی شما است.
  • یک اعلان تست ارسال کنید.دقت کنید تلفن همراه شما به اینترنت متصل باشد.
توصیه می شود اپلیکیشن را بر روی موبایل یا تبلت اجرا و تست کنید. اگر می خواهید اپلیکیشن را بر روی Emulator تست کنید، بر روی ایمولاتور شما باید Google API نصب باشد.

راه اندازی پیشرفته

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

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

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

public class MyFcmService extends FirebaseMessagingService {
    @Override
    public void onNewToken(String s) {
        co.ronash.pushe.Pushe.getFcmHandler(this).onNewToken(s);
        super.onNewToken(s);
    }
    @Override
    public void onDeletedMessages() {
        co.ronash.pushe.Pushe.getFcmHandler(this).onDeletedMessages();
        super.onDeletedMessages();
    }
    @Override
    public void onSendError(String s, Exception e) {
        co.ronash.pushe.Pushe.getFcmHandler(this).onSendError(s, e);
        super.onSendError(s, e);
    }
    @Override
    public void onMessageSent(String s) {
        co.ronash.pushe.Pushe.getFcmHandler(this).onMessageSent(s);
        super.onMessageSent(s);
    }
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        if (!co.ronash.pushe.Pushe.getFcmHandler(this).onMessageReceived(remoteMessage)) {
            // It is for fire base, otherwise the condition will handle the message for Pushe
            super.onMessageReceived(remoteMessage);
        }
    }
}

سپس سرویس پوشه را نظیر کد زیر در منیفست اپلیکیشن‌تان غیر فعال کنید.

<service
    android:name="co.ronash.pushe.fcm.FcmService"
    tools:node="remove" /> 

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

سپس سرویسی که در بالا طراحی کرده اید را همانند کد زیر به منیفست اپلیکیشن خود اضافه کنید

<service android:name=".MyFcmService">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>
  • در صورتی که مقدار زیر در پارامتر‌های تگ manifest در فایل منیفست پروژه وجود ندارد، آن را اضافه کنید:
xmlns:tools="http://schemas.android.com/tools"

امکانات

PusheId

این شناسه برای یکتاسازی دستگاه‌هایی که پوشه در آن‌ها رجیسترشده استفاده‌می‌شود. برای گرفتن شناسه‌ی پوشه‌ی دستگاهی که برنامه در آن نصب شده از کد زیر استفاده کنید.

// You can use Promise
Pushe.getPusheId()
    .then(pusheId => {
        // access pusheId here
    });

// Or you can use callback instead of Promise
Pushe.getPusheId((pusheId) => 
    let pusheID = pusheId;
)};

تاپیک (topic)

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

Pushe.subscribe("sport");

برای لغو عضویت از این تاپیک از دستور زیر استفاده کنید:

Pushe.unsubscribe("sport");

توجه داشته باشید که توابع مربوط به عضو شدن و لغو عضویت در تاپیک باید بعد از پایان Pushe.initialize اجرا شوند. بنابراین آنها را بلافاصله بعد از Pushe.initialize قرار ندهید.

غیرفعال کردن نمایش پوش

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

Pushe.setNotificationOff();

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

Pushe.setNotificationOn();

ارسال پوش از یک دستگاه به دستگاه دیگر

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

Pushe.getPusheId()
    .then(pusheId => {
        // access pusheId here
    });

به این روش pid هر دستگاه را می توانید بدست بیاورید و آن‌ها را در سرور خود ذخیره کنید تا برای ارسال اعلان به دستگاه از آن استفاده کنید.

  • برای ارسال اعلان ساده از دستور زیر استفاده کنید:
Pushe.sendSimpleNotifToUser("pid_a0e3-82ac-a0", "title", "content");
  • پارمتر اول pusheId است و پارامتر دوم و سوم به ترتیب تیتر و متن اعلان هستند.
  • برای ارسال اعلان پیشرفته از این دستور استفاده کنید:
Pushe.sendAdvancedNotifToUser("pid_a0e3-82ac-a0", JSON.stringify({ title:'تست', content:'پیام ارسالی از یک دستگاه ' }))
    .then(isSucceeded => {
        // Succeeded
    })
    .catch(error => {
        // Oops! something unexpected happened ...
    });
  • پارمتر اول pusheId است و پارامتر دوم یک رشته با فرمت JSON هست که مشخصات اعلان پیشرفته را تعیین می کند.

نمونه‌ی یک جیسون کامل برای ارسال:

{
  "title": "عنوان",
  "content": "تیتر",
  "big_title": "تیتر کامل",
  "big_content": "متن بزرگ",
  "summary": "چکیده ",
  "image": "http://url/name.png",
  "icon": "http://url/name.png",
  "ticker": "متن نوار اعلان",
  "notif_icon": "file_download",
  "wake_screen": true,
  "sound_url": "http://static.pushe.co/mp3/2.mp3",
  "visibility": true,
  "led_color": "-8206336",
  "show_app": true,
  "led_on": 300,
  "led_off": 500,
  "delay_until": true,
  "action": {
    "url": "tg://join?invite=sdfdsfdsfds",
    "action_type": "U"
  },
  "buttons": [
    {
      "btn_icon": "fileـdownload",
      "btn_order": 1,
      "btn_content": "متن دکمه",
      "btn_action": {
        "url": "tg://join?invite=fdsfdsfds",
        "action_type": "U"
      }
    },
    {
      "btn_icon": "local_cafe",
      "btn_order": 2,
      "btn_content": "متن دکمه",
      "btn_action": {
        "url": "http://fgfdgfdg.com",
        "action_type": "U"
      }
    },
    {
      "btn_icon": "phone_android",
      "btn_order": 3,
      "btn_content": "متن دکمه",
      "btn_action": {
        "url": "call:a_number",
        "action_type": "U"
      }
    }
  ]
}
  • برای ارسال JSON دلخواه از دستور زیر استفاده کنید:
Pushe.sendCustomJsonToUser("pid_a0e3-82ac-a0", "{ 'key1':'value1', 'key2':'value2' }")
    .then(isSucceeded => {
        // Succeeded
    })
    .catch(error => {
        // Oops! something unexpected happened ...
    });

در این حالت پارامتر دوم یک رشته با فرمت JSON هست که اطلاعاتی که می خواهید ارسال کنید را به فرمت JSON داخلش دارد. نکته مهم: توابع ارسال اعلان به دستگاه دیگر و عضویت یا لغو عضویت در تاپیک را بعد از اطمینان از اینکه عملیات initialization پوشه انجام شده است، صدا بزنید.

ایجاد و حذف کانال نوتیفیکیشن در اپلیکیشن (Android 8.0+ only)

در اندروید ۸ به بعد قابلیتی برای تعریف کانال نوتیفیکیشن در اپلیکیشن ایجاد شده است. به این شکل که در برنامه خود یک یا چند کانال نوتیفیکیشن تعریف می کنید و در زمان ارسال اعلان پیشرفته با وارد کردن Channel-Id آن کانال می‌توانید اعلان را برای آن کانال خاص ارسال کنید. مزیت این کار این هست که کاربر می تواند دریافت نوتیفیکیشن از بعضی کانال‌ها را غیرفعال کند و همچنان می‌تواند از یک یا چند کانال دیگر اعلان بگیرد. فراخوانی تابع ایجاد یا حذف کانال در حالتی که برنامه شما روی اندروید زیر ۸ اجرا شود، اثری ندارد. همچنین اگر بیشتر از یکبار تابع ایجاد کانال را صدا بزنید هم فقط یکبار کانال ایجاد می‌شود و مشکلی ایجاد نمی‌کند. با استفاده از دستور زیر در برنامه خود می توانید کانال نوتیفیکشن تعریف کنید:

Pushe.createNotificationChannel(
    "MY_CHANNEL_ID", //channelId
    "all news channel", //Channel Name
    "", //description about channel
    4, //importance: Number between 0 to 5 (5 is the most important)
    true, //enableLight
    true, //enableViberation
    true, //showBadge
    0, //led color, check https://developer.android.com/reference/android/graphics/Color
    [100, 200, 300, 400, 500, 400, 300, 200, 400] // Vibrate mode 
);

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

Pushe.removeNotificationChannel(
    "MY_CHANNEL_ID" //channelId
);

callback های اعلان

برای استفاده از callback های اعلان باید دو حالت را در نظر بگیرید، زمانی که اپلیکیشن باز می باشد (به اصطلاح در foreground می‌باشد) و یا زمانی که اپلیکیشن بسته می باشد (به اصطلاح در background می‌باشد).

  • زمانی که اپلیکیشن در foreground می باشد

    در این حالت می‌توانید در داخل کد‌تان (ترجیحا کامپوننتی که top-level باشد و با تغییرات state, props تغییر نکند) برروی event هایی که در جدول زیر توضیج داده شده callback هایی به عنوان event handler تعریف کنید که با emit شدن این event ها کدتان اجرا خواهد شد.

    import React, {useEffect} from "react";
    import Pushe from "pushe-react-native";
    
    const App = () => {
        useEffect(() => {
            Pushe.addEventListener(Pushe.EVENTS.RECEIVED, (notification) => {
                 // You can access notification content here
            });
        });
        return (
          // The jsx that would renders
        );  
    }
    

    حالت های callback که می‌توانید برای آنها همانند مثال بالا listener تعریف کنید:

    How access it Event Type
    Pushe.EVENTS.RECEIVED Notification Received
    Pushe.EVENTS.CLICKED Notification Clicked
    Pushe.EVENTS.DISMISSED Notification Dismissed
    Pushe.EVENTS.BUTTON_CLICKED Notification Button Clicked
    Pushe.EVENTS.CUSTOM_CONTENT_RECEIVED Notification With Custom Content Received
  • زمانی که اپلیکیشن در background باشد

    در این حالت می توانید یک فایل مجزا مثلا notificationCallbacks.js در کدتان بسازید و در داخل فایل index.jsی که در روت پروژه‌تان قرار دارد کد زیر را قرار دهید:

    AppRegistry.registerHeadlessTask('PusheNotificationTask', () => require('./notificationCallbacks'));
    

    سپس در داخلی فایلی که ساخته اید notificationCallbacks.js کد زیر را قرار دهید:

    import Pushe from "pushe-react-native";
    
    module.exports = async (notificationData) => {          
        if(notificationData['EVENT_TYPE'] === Pushe.EVENTS.RECEIVED) {
           // Notification received
        } else if (notificationData['EVENT_TYPE'] === Pushe.EVENTS.CLICKED) {
           // Notification clicked
        } else if (notificationData['EVENT_TYPE'] === Pushe.EVENTS.DISMISSED) {
           // Notification dismissed
        } else if (notificationData['EVENT_TYPE'] === Pushe.EVENTS.BUTTON_CLICKED) {
           // Notification Button clicked
        } else if (notificationData['EVENT_TYPE'] === Pushe.EVENTS.CUSTOM_CONTENT_RECEIVED) {
           // Custom Content Received
        }
    };
    

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

عیب یابی

در صورتی که با زدن کد زیر کتابخانه پوشه به پروژه (اپلیکیشن) شما اضافه نشد یا خطایی مربوط به اضافه نشد کتابخانه پوشه به اپلیکیشن تان را مشاهده کردید می توانید به صورت دستی تغییرات لازم را که در ادامه توضیح داده شده انجام دهید تا کتابخانه پوشه را اضافه کنید.

react-native link pushe-react-native

مراحل اضافه کردن دستی کتابخانه پوشه

  • در فایل ‍build.gradle در آدرس android/app/build.gradle در یک خط مجزا در داخل dependencies مقدار زیر را اضافه کنید:
 implementation project(':pushe-react-native')
  • در فایل MainApplication.java در آدرس android/app/src/main/java/پکیج نیم شما/MainApplication.java در ابتدای فایل مقدار زیر را قرار دهید:
import co.ronash.pushe.ReactNativePushe;
  • در همان فایل ‍‍MainApplication.java و در داخل متد Override شده getPackages مقدار new ReactNativePushe() قرار دهید که خروجی آن مشابه کد زیر می شود:
@Override
protected List<ReactPackages> getPackages() {
    return Arrays.<ReactPackages>asList(
        new MainReactPackage(),
        new ReactNativePushe()
    );
}
  • و در آخر در فایل settings.gradle در آدرس android/settings.gradle بعد از خط rootProject.name مقادیر زیر را قرار دهید:
include ':pushe-react-native'
project(':pushe-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/pushe-react-native/android')



شما می‌توانید خطاهای عمومی موجود در هنگام نصب در اندروید را در این لینک مشاهده نمایید.

همیشه در کنارتان هستیم

در اولین فرصت با ایمیل به شما پاسخ خواهیم داد.

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