Push Notification with Firebase - From Zero to Hero 8

Поділитися
Вставка
  • Опубліковано 8 вер 2024
  • In this video, we will show you how to use Push Notification within your app. We will use the Firebase Cloud Messaging (FCM) for sending the notification to the device. For an iOS device, the FCM act as the proxy to send the notification via the Apple Push Notification Service (APNs). We will show you the different ways of sending push notification via FCM console and the admin SDK.
    You can download the source code for this tutorial here.
    github.com/jus...
    To watch the whole series of the tutorial video, you may want to follow our playlist below.
    • React Native - From Ze...
    All our videos also available in the following platforms:
    Justnice.Net: justnice.net/w...
    UA-cam: / @justcodejs
    Facebook: / justcodejs
    BiliBili: space.bilibili...
    YouKu: i.youku.com/i/U...
    Tencent: v.qq.com/vplus/...

КОМЕНТАРІ • 65

  • @chiderapaulugwuanyi9843
    @chiderapaulugwuanyi9843 Рік тому

    Best push notification on react native with firebase tutuorial I have seen. The tutorial is top notch. Even after two years it has helped me massively to understand push notiification. He absolutely covered every scope.

  • @Vivek-pandey
    @Vivek-pandey Рік тому +1

    i love u sir 100000 times u helped him as i want

  • @sherifsamir6888
    @sherifsamir6888 2 роки тому +2

    Thank you so much for explaining this in a simple way

  • @k.ganesan1595
    @k.ganesan1595 Рік тому +1

    Thanks for sharing this video and detailed explain for Push notification.. Great Job brother...👌

  • @flaviopitica
    @flaviopitica 3 роки тому +1

    saved my ass at work. Great job wish you the best

  • @ivansamoiliuk5451
    @ivansamoiliuk5451 2 роки тому

    Very big thank you!

  • @jeremybradshaw8090
    @jeremybradshaw8090 2 роки тому +1

    Useful tutorial thanks

  • @sufiyanhabib4431
    @sufiyanhabib4431 2 роки тому +1

    Great tutorial. Worked for me. Thanks a lot

  • @DaveTradeFx_01
    @DaveTradeFx_01 3 роки тому +1

    Thanks for your tutorial. It great

  • @davitgigauri6053
    @davitgigauri6053 2 роки тому +1

    thank you very much. With me everything works on both platforms though it does not work on quit state Android

  • @juanmartinezaviles2527
    @juanmartinezaviles2527 3 роки тому +2

    Very well explained. Thank you for this tutorial!

  • @markoco3068
    @markoco3068 3 роки тому +1

    Very informative and detailed. Thank you for this tutorial.

  • @thiagoferraz5362
    @thiagoferraz5362 3 роки тому

    Thanks for this tutorial, it helped a lot!

  • @vishnups5435
    @vishnups5435 Рік тому +2

    will I be able to schedule a notification from remote so that user can get the notification everyday on a perticular time?

    • @justcodejs
      @justcodejs  Рік тому

      You can do it via Firebase Console or implement it as a service in your oen server.

  • @4rled
    @4rled 3 роки тому +1

    This is gold

  • @devina1957
    @devina1957 3 роки тому +1

    You saved my day, thank you so much

  • @oberdansantos-dev716
    @oberdansantos-dev716 2 роки тому +1

    Hi! Congrats for the video! I've a question... You're using Admin SDK for send notifications. Can I use my backend / API to do this in React Native?

    • @justcodejs
      @justcodejs  2 роки тому

      Yes but you need to follow the firebase rest api interface for push notification. However, I think that using firebase admin sdk is much more easier. The firebase admin sdk also available in different programming language.

  • @providence1999
    @providence1999 2 роки тому

    Hi, Great job! Clearly explain this complicated topic. Can you provide the code snippet to save the token to the FCM server? This is a real world usage. instead of just console.log save the device token to the FCM server for sending future notification. Thanks!

  • @vigneshramasundaram4249
    @vigneshramasundaram4249 3 роки тому +1

    Thank you so much for this tutorial , but i have one doubt regarding how to update badge count in app icon in both background and foreground

    • @justcodejs
      @justcodejs  3 роки тому +1

      You can specify the badge count in the message payload but it is tricky.

  • @trangminh8735
    @trangminh8735 2 роки тому

    Do you know how to fix the problem that the device receive the fcm too long (after 2 minutes sending from firebase)

  • @vanns3592
    @vanns3592 3 роки тому

    Really good explanation.. 👍👍

    • @justcodejs
      @justcodejs  3 роки тому +1

      Thanks for your support!

    • @vanns3592
      @vanns3592 3 роки тому

      I followed all the instructions but I am getting Error Firebase/Unregistered when I call getToken() method.
      I verify APN, bundleId is same as firebase app name, and firebase automatically created entitlement for apn..

  • @sureshpatidar4000
    @sureshpatidar4000 3 роки тому +1

    Very nicely explain. I have one question: How Notification Badge count updated when iOS App running in backgorund & froeground mode.

    • @justcodejs
      @justcodejs  3 роки тому

      In V5 of @react-native-firebase/messaging you can set the bade using the setBadge method, however, in V6 this method is deprecated and it is now supported in Notifee module which is a paid version of library. notifee.app/react-native/docs/ios/badges#notifee
      You also can set the badge number in the message payload when you send the notification to the device.

    • @sureshpatidar4000
      @sureshpatidar4000 3 роки тому

      ​@@justcodejs Thanks. We don't want to use paid service. We want to update badge count with iOS app icon on the home screen when app in kill, background & foreground mode. We are sending badge number value as 1 in the message payload when sending the notification to the device. But badge count not updated on device with app icon on home screen . Please help us to achieve it.

    • @justcodejs
      @justcodejs  3 роки тому

      For quick solution, your app can trigger your server to send a "data" only notification to the device to set the badge number in the payload when the user open the notification via the app.

    • @sureshpatidar4000
      @sureshpatidar4000 3 роки тому

      @@justcodejs We don't want to handle it from server. Can we manage in APP using local storage or any other way?

    • @justcodejs
      @justcodejs  3 роки тому

      Then you might need to use other notifications npm module that provide the setBadge function.

  • @joja4323
    @joja4323 2 роки тому

    I am getting the error:
    messaging.getToken(): NativeFirebaseError: [messaging/unknown] The operation couldn’t be completed. Too many server requests.
    at FirebaseMessagingModule.getToken
    FYI:
    1. I am not using Redux and I will not be using it.
    2. My App.js is setup with functional components, not class components.
    Any help would be greatly appreciated.

  • @codeteztechnologies7629
    @codeteztechnologies7629 3 роки тому +1

    Custom push notification sounds not working newer android 8. Please helpme

    • @justcodejs
      @justcodejs  3 роки тому +1

      For Android 8 and above you need to create the channel in order to use custom sound.
      developer.android.com/training/notify-user/channels#java

  • @oberdansantos-dev716
    @oberdansantos-dev716 2 роки тому

    Hello, again! :) By Android side, how can I add badges to the application icon ?

  • @ralphlevita5401
    @ralphlevita5401 3 роки тому

    Hello! is it possible to create a custom sound for the notification? Thank you and more prosper to your channel!

    • @justcodejs
      @justcodejs  3 роки тому

      You should able to do it by specify the sound file in the message payload. For Android, you also need to create a message channel. I have yet to test it. 😅

  • @BinhTran-me3hk
    @BinhTran-me3hk 3 роки тому +1

    can I use firebase to push notifications in China?
    thanks for your answer

    • @justcodejs
      @justcodejs  3 роки тому +1

      Sorry I am not from China so can't answer you 😅

  • @Iyiola
    @Iyiola 3 роки тому +1

    Hi, you said push doesn't work on the simulator, but you're using it on the simulator, I am confused

    • @justcodejs
      @justcodejs  3 роки тому +1

      Sorry for the late reply. I didn't use the simulator. I am using a screen casting app to cast my mobile screen to my computer screen. 😊

    • @Iyiola
      @Iyiola 3 роки тому +1

      @@justcodejs You responded at the right time lol, been working on this push notification and also following this video for about 7 days now and TODAY 2 hours ago, I have fully implemented push notifications… THANK YOU!!

    • @justcodejs
      @justcodejs  3 роки тому

      Welcome 😊

  • @hoaithuong5247
    @hoaithuong5247 3 роки тому +1

    nicee

    • @justcodejs
      @justcodejs  3 роки тому +1

      Thanks for your support 😊

  • @LarsRyeJeppesen
    @LarsRyeJeppesen Рік тому

    Why is this React specific?

    • @justcodejs
      @justcodejs  Рік тому

      because this tutorial is for React Native 🤭

  • @hoanganhnguyen8050
    @hoanganhnguyen8050 3 роки тому

    how to custom sound using react native firebase

    • @justcodejs
      @justcodejs  3 роки тому

      You can specify the sound file in the message payload but you might need to create a custom channel for Android app. I have not test that yet so can't give you the exact steps.

  • @shubhamjain2616
    @shubhamjain2616 3 роки тому

    I am not getting the Push Notification Capability option in the Capabilities list. Please help...

    • @hoanganhnguyen8050
      @hoanganhnguyen8050 3 роки тому +1

      check again doc

    • @shubhamjain2616
      @shubhamjain2616 3 роки тому

      @@hoanganhnguyen8050 I found out why, because I don't have a paid developer account.

  • @srikanththotashreek
    @srikanththotashreek 3 роки тому

    I'm facing FIS_AUTH_ERROR while trying to getToken. Please help me

    • @justcodejs
      @justcodejs  3 роки тому

      Make sure you had place the correct Google Service file in the respective folder.
      Android: [proj root]/android/app/google-services.json
      iOS: [proj root]/ios/GoogleService-Info.plist
      after you pace the files in the respective folder, make sure you recompile the app in order for it to take effect.

  • @sadiawaleem9796
    @sadiawaleem9796 3 роки тому

    Receiving the error "No firebase app ['DEFAULT'] has been created". I am just running the app not up the admin"

    • @justcodejs
      @justcodejs  3 роки тому

      You need to setuo the firebase app via the firebase console. Please refer to the project github page readme file.

    • @sadiawaleem9796
      @sadiawaleem9796 3 роки тому +1

      @@justcodejs Thanks its working now :)

  • @RavindraKumar-mn4jk
    @RavindraKumar-mn4jk 3 роки тому

    Not working in iOS

    • @justcodejs
      @justcodejs  3 роки тому +1

      Did you run the app in the actual iOS device? Push notification only work on actual device.