I have a react native app and after Cloud function send any notification to users I save it in a real-time Database,
In the Home screen, I add a bell 🔔 when the user clicks it will navigate him to a specific screen contains all notifications saved to a real-time database( firebase ),
So my question is I want to add a counter if the user gets a new notification it will increase and after a click to the bell and navigate to notifications detail screen and get back to Home screen should be a 0 count or just a bell without a counter,
how can I do it?
My thought is I just add a listener in the home screen and just get the length of notification array after fetching from firebase and if any new notify to come to the length will increase and after navigating to notification screen I reset the notification array to be [ ] or something,
But in every single time, I open the app and go to "Home Screen" I will get the count "length of notifications array after fetched" .. so that's bad
So what you think?
A simple answer would be to store a count of what has been read locally in AsyncStorage and read that when the app starts.
Obviously it's a pretty limited solution on its own, e.g. it will be wrong if the user uses a different device, eventually the number will roll over, what happens when the notifications are purged from the DB.
As Firebase was mentioned, it may be worth having a look at what their Firebase Cloud Messaging or the Beta Firebase In-App Messaging service provides by means of help to implement something nicer. Also, if not found it already, the invertase/react-native-firebase collection seems to give access to most of Firebase's functionallity.
Related
I am making a todo app with Javascript (PWA). There will be reminders for the todos. I want to send notifications to the user to remind them. Tasks and remind time will be stored in localStorage.
So now I want to send notifications without any backend. I have tried some tutorials, they all require a backend or Google push services for it.
Is there any way to send notifications without them?
I think the serviceWorker will have to keep running in the background and get the current time. Remind the user if current time and remind time matches.
So how to do it?
I am new to JS and React Native. Making a small mobile app.
I have reached the point where i would like to make the app to save user's last location (not geo location, but the location in the app and his progress), so when the users reconnects he skips all the other screens and continues on the last screen.
What is the correct way to achieve this?
Thanks a lot to everyone.
You can use Asyncstorage to save his data. It saves data on localstorage. You can then retrive his data on splash screen and get his data and navigate him.
Get started here: https://github.com/react-native-community/async-storage
I would like to show a list of devices that a user has enabled push notifications for in their dashboard. In this list I would like to highlight the current device they are using if it's in the list or show a "Add this device" button if it's not in the list. So let's say the user has enabled push notifications on their phone and on their desktop. They log into the dashboard on their phone. Is there a way for me to tell that it's their phone? Also, what if they decide to block notifications in their browser or do a factory reset (my database won't sync obviously)? So what would be a good way to purge that old device from the list?
I'm doing this because I want a good user experience and I want to give users the option to toggle push notifications on/off per device through the dashboard without making them do it through the browser which could end up in them never re-enabling them again.
I was thinking maybe passing a hardcoded (but generated) id variable into the service worker?
let deviceId = 0;
But this seems really clunky. Is there a better way?
PS. My backend is PHP and MYSQL. Don't think it matters, but any answers with server-side code I'd prefer with those. I think this is all client-side though.
If the user resets the browser (device), you will only discover it by trying to send something and getting a 404. So it's not possible to always be able to show a list of devices with 100 % correct info if you're not spamming the user all the time. You could probably show something like the last time a push was delivered to a certain device, maybe that would be good UX-wise.
To detect which of the devices is the current one looking at the list, simply use some sort of an id that is saved in the db when the push subscription is created. Then hold on to that id in the device (browser) and based on that, make one of the items on the list pop up.
Someone know how can I cancel local push notifications when user is on a particular screen?
I'm using react-native-push-notification that should stop getting notifications when the user is in the chat screen and resume this action when he lives...
Try putting PushNotification.cancelAllLocalNotifications(); in the component's ComponentDidMount method.
As I understand you are trying to implement push notification sending only when the user's app is in background mode.
Why don't you just use offline push notifications for this case?
Many backend providers like ConnectyCube have this option. So, you just need to manage app states to handle background mode via AppState.currentState and make sure that the device is subscribed to pushes.
Or do you mean you need to send pushes when the user is in the app, but on another chat screen too?
Hello I am developing an auction app like tophatter.com. I want to implement an application that has background process in it. I want this process to run forever until I stop it
http://eoction.com thatss our current site. The problem on our site when we refresh the page the auction also restart. We need something like a continuous process like tophatter.com if you refresh the page it will load the updated auction process.
I found this great service called pubnub. I am thinking we need a background process for this? This will process the auction on the pubnub blocks and then when we visit the site we will just need to query on its updated process?
Does pubnub support something like this?
PubNub Web Page Best Practices
When user refreshes your web app page or navigates to another page there are things you need to consider as a web app developer no matter what technologies you may be using. I will address, at a high level, the things you need to do when PubNub is integrated into your web page.
Restore Parameter
Whether the user interrupts your connection to PubNub or it is a network failure, you will want PubNub to reconnect and continue where it left off as much as possible. The PubNub JavaScript SDK has a initialization parameter called restore that when set to true, will reconnect to PubNub and get missed messages after the connection is dropped and reestablished.
var pubnub = new PubNub({
subscribeKey: "mySubscribeKey",
publishKey: "myPublishKey",
ssl: true,
uuid: getUUID();
restore: true
});
Reuse UUID
It is important to reuse the same UUID for each end user as this will allow PubNub to identify that user uniquely when it comes to Presence so that it doesn't produce new join events for the same end user. The PubNub JavaScript SDK actually generates a UUID and stores it in localStrorage and reuses it by default but very likely you have your own UUID that you would like to use for each of your end users.
Last Message Received Timetoken
If the network disruption is brief as is the case with a page refresh or page navigation, then missed messages are retrieved when restore:true is implemented in the init as stated above. But when the user is offline for more than say 5 minutes, you may want to retrieve missed messages on one or more channels. The best way to do this is to keep track of the timetoken of the last received message by storing it in localStorage every time a message is received via subscribe callback. When the user comes back online and it is has been more than 5 minutes since they were last online, call history using this last received message timetoken on each channel that you need to get missed message from.
Subscribe to Channels
Finally, you'll want to make sure that the user is subscribed to the channel they expect to be based on what their state prior to the connection disruption. If it is a page refresh, you likely just want to resubscribe them to the same list of channels. To do this, you just need to keep a list of channels they are currently subscribed to, once again, in localStorage. If the user navigates to a new page and this causes a full page reload (modern web apps should not require this, but...) then you may want to unsubscribe from some channel(s) and subscribe to new channel(s), it just depends on what that page navigation means to your app. Modern web app frameworks do not require full page reload for page navigation since the web app acts more like a desktop app than older web apps. And again, if the the user was offline for quite some time (more than 5 minutes) then it may not make sense to subscribe them to the same channels that they were subscribed to before. Really depends on your use case.
And by the way, Tophatter uses PubNub ;) but all of the above are generic best practice guidelines and recommendations and is not referencing any one app in particular.
EDIT: To address you question specifically, as pointed out in comments below...
You can't implement long-running process in PubNub BLOCKS (not currently, anyways), so you will need a server process for this. When the user refreshes the page, you just need to hit your server for current state. If using PubNub to keep this progress bar updated in realtime, you just subscribe to that channel that is sending the state of that progress bar and update your client. Using the same best practices I provided above are still necessary.