Firebase Firestore / React Native Chat Notification - javascript

My app currently supports a chat function which is working only with Firebase Firestore, nothing else.
My idea is to implement a notification whenever a new message is received, the catch is: I want to get the notification even if the app is closed. (If you close Instagram or Whatsapp you also get notifications if somebody messages you, that's what I mean.)
The problem I face is that all Firebase listener work only as long as my app is connected to the Firebase servers but as soon as I close the app of course the app disconnects from the servers and so do the listeners not work anymore.
What I need is a function or a feature to track in the background if something on the Firebase Firestore has changed (in this case, if a new documents in a specific location was created) and if yes, trigger a notification, even if the app is closed.
Does anybody have an approach for me how I could accomplish this task?

You can use Firebase cloud messaging to solve this problem as whenever there is new data available to sync it checks with the client device status and updates it. Here you can find step by step guide on how to set it up.

Related

React-Native - How is it possible that when I close an app like messenger I can still receive incoming call notifications from others

I am building an app like Messenger, everything works normally like sending messages, receiving messages, video calling. the technologies i use are react-native, reactJS, socket.io, nodeJS, react-native-webrtc
I wonder how can when I close an app like the messenger I can still receive incoming call notifications from other people. I'm studying firebase notification and react-native-background-timer but it doesn't seem to work the way I want it to
Has anyone had a problem like this and have an answer, please let me know
Have a nice day guys <3
In react native firebase there are two types of notifications "background" and "foreground".
Foreground Notifications:
A foreground service performs some operation that is noticeable to the user. For example, an audio app would use a foreground service to play an audio track. Foreground services must display a Notification. Foreground services continue running even when the user isn't interacting with the app.
When you use a foreground service, you must display a notification so that users are actively aware that the service is running. This notification cannot be dismissed unless the service is either stopped or removed from the foreground.
Background Notification:
A background service performs an operation that isn't directly noticed by the user. For example, if an app used a service to compact its storage, that would usually be a background service.
You want to follow there Documentation to apply push notifications in react native.

Modify notification from FCM / onMessageReceived not called when app is in background

I'm building an app in react native, and I attached react-native-fcm library to the code, in order to work with notification messages.
I have two main problems:
1) Notification from the firebase doesn't look like the ordinary notification messages: it's not appear with app icon, it doesn't popup and presented when the screen is closed.
2) I wanted just to get the event of messaging, also here after reviewing the library code, I saw that notification get to the function: onMessageReceived only if the app on foreground, like it say in the website.
But in the website I couldn't understand how to get the general event of catching notificaiton regardless to the appstate.
I also tried to implement class that extends FirebaseMessagingService, and there the notification doesn't get to the onMessageReceived override at all.
You will need to use FCM API and send data in data field instead of using Firebase console or notification field so that the method onMessageReceived is always called regardless of whether the app is in foreground or background. When this method is called, you can create a notification as you like.
Read about FCM admin API at: https://firebase.google.com/docs/cloud-messaging/admin/
Read about FCM HTTP API at:
https://firebase.google.com/docs/cloud-messaging/http-server-ref
You can use Postman to send notification if you choose to use FCM HTTP API.

Listen to firebase database changes when app is closed

I am creating an Ionic 2 app with firebase and I need a way to listen to database changes (specifically on child_added) when the app is closed (I.e. in foreground,background and killed)
Basically, I want to use WebRTC to make calls within the app like whatsapp and I am following this post - https://websitebeaver.com/insanely-simple-webrtc-video-chat-using-firebase-with-codepen-demo
However, the only thing that puzzles me is how it will work when the app is closed. Can anyone please help me understand?
Thanks!
It's not possible to actively listen to database changes using the Firebase client SDK in exactly the same way that you can when your app's code is running.
If you want your app to receive information about changes to your database, you can instead use Firebase Cloud Messaging to send your app a notification with a small payload that contains information about the change. When your app receives the notification, it can then make a decision about what to do. There are some limitations with web support, so be sure to read about that.
Also look into Cloud Functions for Firebase to make it easier to write some server side code that can trigger in response to a database change and send a notification when those changes happen.

PWA + Native APP Push Notifications (Firebase)

I'm looking for ways to handle push notifications from PWA and Native apps.
We have both, and now when we send a push, I want that if user has installed both native and pwa on their mobile, to only receive the push from native, so we would avoid spamming the user with dublicate notifications. We are using Firebase for push notifications.
What are the best practices to handle this dublicate notification issue? I couldn't find any related info on the web.
This can only be achieved if the user is logged in. In this case you can store the user-identity together with the push notification token. Then on the server you can check which user has registered two notification tokens and send your message only to one token.
If your app does not provide any user identity, I see no way to achieve it.
But, are you sure this is the desired behavior?
Keep in mind that the user can have more than two tokens, for example if he uses your pwa on multiple devices/browsers.

Pubnub: Background Processes for an Auction App Development

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.

Categories