Hi everyone, below I will explain and share with you how I achieved an in-app notifications system (with no code).
Features:
- In app foreground notifications (when user is using the app)
- Choosing to play a sound or not for each notification. (custom sound)
- You choose the pages it shows in
_____________________________________________________________________________________
Let us start with the Database 👇
_____________________________________________________________________________________ The notification component 👇
__________________________________________________________________________________________________________
Now we need to do three things in order for this two work:
1- we put the component inside each page we want it to be viewed, inside a "conditional builder" (so we can hide it and display it without any issue)
2- we run a periodic action on page load that checks our database if there's a new notification (every 5 seconds).
3- we track the page we are on using an "app state". (page name)
Note: I've tried to run it using the "on data change" option but with no luck.
1- Page structure:
- We put our component inside a conditional builder with the below set of conditions and rules
- If our Ref. query action (there's new data) then we display it.
- Note: I've used an empty component to display nothing.
2- On page load we run our periodic function:
