I'm studying React Native right now, and I'm trying to figure out how to enable the reception of Push Notifications even when the app is closed, just as Facebook does. I'm a web developer, so I'm not used to mobile apps' "Manifest" logic. Where should I start from? Thank you!

It seems that since you are a web developer, mobile app is not yet familiar with you. Actually, setting up push notification will require a few more official steps (differently on iOS and Android), and after everything is set, the push notification will happen between Apple server (or Google server) and smartphone's OS (which is iOS or Android), so the push notifications will come to the phone no matter what (without knowing/caring your app is opened or closed ^^) In the programming code of our app, we can do our logics when the notifications come based on 2 cases: users is using the app or app is not running (not running means users are not using your app, and it is either staying awake in the background or users have exited it completely - e.g. pressing Home button twice on iPhone, and swiping the app away) Actually, If you want your app to stay awake in the background, you can add some settings to the "manifest"-like files (of course differently on iOS & Android). However, my experiences taught me that keeping the app awake will encourage the users to complain and delete our app (my previous app's user once complained about his iPhone's battery was consumed greatly because of my app ^^) If you really want to keep your app awake, you can set it in the settings, then in the push notifications' data, you can include extra parameters, and finally in the function of receiving push-notifications in your app, you can do anything with those parameters! In short, you may just need to config push-notification properly for your app, and Apple/Google will do the rest, either your app is running in background or totally closed, it will receive the notifications. Hope you can find a good solution based on my explanation. If there's still something unclear, feel free to post here some more details on your needs, thanks! This is the library I'm using with my previous react-native project: (they also have tutorial there ^^) https://github.com/zo0r/react-native-push-notification ADDED EXPLANATION: (based on author's needs): <ul> <li> The goal is: the user will register/login in the app, and will subscribe to some future events. </li> </ul> => whenever users open the app, data will be sent to Apple/Google server to get a token, and you will use this token together with user's subscribe data to send all to your own push-server (you can use PHP or node.js server or whatever) <ul> <li> When an event gets updated a notif. should be sent to all the users who are going to that event. So a notif. aimed to certain users only. </li> </ul> => like the above answer, data will be sent every time users open app (or change settings, you can do it in your logic of the app, because data will be kept your own push-server, which means on that server, you can even see user list, and can aim to certain users - it depends on what data will be sent to the users from the smartphone, but users may refuse inputting too much information like name, age or email, but it's up to your service's need ^^) <ul> <li> By clicking on it, the app will open and a certain page of the app (pre-existing) will be shown. </li> </ul> => by default, when an notif. is clicked, the app will be opened for sure, and here once again, you can add extra parameters to the notifications (which is the landing page you need, then in the function of you app, just go there - but it may get extra logics for this. Besides, when to push notification, and which data should be pushed etc. will be controlled by your own server) <ul> <li> It seems like the most complicated part will be the "sending to certain users" one! </li> </ul> => I explained this already, but you're right, actually it's complicated, because you need to create your own server with lots of API and logics based on your needs, and it need a few more steps (complicated one because you need to register many things with Apple & Google, then adding their Certificates into your own server etc.) Hopefully you will achieve it, I suggest you play around and truly understand how push-notifications work first (for both sides - your own server and your application) - Good luck, though ^^

How to implement push notifications in React Native when the app is closed

1 Answers

It seems that since you are a web developer, mobile app is not yet familiar with you. Actually, setting up push notification will require a few more official steps (differently on iOS and Android), and after everything is set, the push notification will happen between Apple server (or Google server) and smartphone's OS (which is iOS or Android), so the push notifications will come to the phone no matter what (without knowing/caring your app is opened or closed ^^)

In the programming code of our app, we can do our logics when the notifications come based on 2 cases: users is using the app or app is not running (not running means users are not using your app, and it is either staying awake in the background or users have exited it completely - e.g. pressing Home button twice on iPhone, and swiping the app away)

Actually, If you want your app to stay awake in the background, you can add some settings to the "manifest"-like files (of course differently on iOS & Android). However, my experiences taught me that keeping the app awake will encourage the users to complain and delete our app (my previous app's user once complained about his iPhone's battery was consumed greatly because of my app ^^)

If you really want to keep your app awake, you can set it in the settings, then in the push notifications' data, you can include extra parameters, and finally in the function of receiving push-notifications in your app, you can do anything with those parameters!

In short, you may just need to config push-notification properly for your app, and Apple/Google will do the rest, either your app is running in background or totally closed, it will receive the notifications. Hope you can find a good solution based on my explanation. If there's still something unclear, feel free to post here some more details on your needs, thanks!

This is the library I'm using with my previous react-native project: (they also have tutorial there ^^)

https://github.com/zo0r/react-native-push-notification

ADDED EXPLANATION: (based on author's needs):

The goal is: the user will register/login in the app, and will subscribe to some future events.

=> whenever users open the app, data will be sent to Apple/Google server to get a token, and you will use this token together with user's subscribe data to send all to your own push-server (you can use PHP or node.js server or whatever)

When an event gets updated a notif. should be sent to all the users who are going to that event. So a notif. aimed to certain users only.

=> like the above answer, data will be sent every time users open app (or change settings, you can do it in your logic of the app, because data will be kept your own push-server, which means on that server, you can even see user list, and can aim to certain users - it depends on what data will be sent to the users from the smartphone, but users may refuse inputting too much information like name, age or email, but it's up to your service's need ^^)

By clicking on it, the app will open and a certain page of the app (pre-existing) will be shown.

=> by default, when an notif. is clicked, the app will be opened for sure, and here once again, you can add extra parameters to the notifications (which is the landing page you need, then in the function of you app, just go there - but it may get extra logics for this. Besides, when to push notification, and which data should be pushed etc. will be controlled by your own server)

It seems like the most complicated part will be the "sending to certain users" one!

=> I explained this already, but you're right, actually it's complicated, because you need to create your own server with lots of API and logics based on your needs, and it need a few more steps (complicated one because you need to register many things with Apple & Google, then adding their Certificates into your own server etc.)

Hopefully you will achieve it, I suggest you play around and truly understand how push-notifications work first (for both sides - your own server and your application) - Good luck, though ^^

answered Sep 17 '22 23:09

thinhvo0108

Related questions
                            
                                Rendering new component on click in react
                            
                                TypeScript, redux-form and connect
                            
                                Script created by webpack executing twice
                            
                                How can I disable laravel routes for ReactJs
                            
                                Recompose "withReducer": justification of async reducer function call
                            
                                Using Require with React in a web page without node [closed]
                            
                                Should the properties inside defaultState be null or ''
                            
                                Shadow DOM and ReactJS
                            
                                What are these properties prefixing underscore used for in package.json?
                            
                                ReactNative when scrolling auto hide navigatorios
                            
                                Responsive Layout in React Native iOS
                            
                                How to connect React component to the Quickbooks Button
                            
                                Fetching JSON and iterating through the values in react-native
                            
                                Best way to add asset path variable with React and JSX?
                            
                                How to get query parameters in reactjs
                            
                                setState is not updating state: ReactJS
                            
                                How to fix "Component is defined but never used" for eslint in react?
                            
                                react-konva Text - onClick does not work on mobile
                            
                                Render Object properties in React
                            
                                React plot options onclick event

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With

How to implement push notifications in React Native when the app is closed

Tags:

reactjs

react-native

push-notification

Michele Stieven

People also ask

1 Answers

thinhvo0108

Recent Activity

Donate For Us