Real time app sync in Ionic

usanzadunje · September 17, 2021, 5:43pm

Hello guys,

I want to achieve following functionality : I have data that is displayed to users, one user can change the data and I want all other user to see the changed immediately. I want real time communication between users. I thought, since I use Firebase Cloud Messaging, to send notification to all users and on “pushNotificationReceived” event I update their data.

My question is: Is this good solution to the problem, what would be the better way?

Also since I send Push Notification using Firebase, it is displayed to user, is there a way to send it without showing Push Notification to user just so event triggers and I update information.

EinfachHans · September 17, 2021, 5:48pm

I mostly use Push notifications for szencarios like that yes. And you should search for FCM Data Push Notifications

usanzadunje · September 17, 2021, 5:51pm

Thanks for advice. I will look into that!

usanzadunje · September 25, 2021, 2:16pm

@EinfachHans Hey, I have one more question for you. When I register token from client app it is stored on backend. Is it possible that Firebase invalidates token or do they have expiry date. If yes how can I know when this happens so I can notify my backend to change token for new one?

Tommertom · September 25, 2021, 5:17pm

I am sure you are way better off using realtime listners on firestore instead fcm if u want under the hood realtime updates without notifications

usanzadunje · September 25, 2021, 5:46pm

@Tommertom
I am using Firebase only for FCM. I have my Laravel backend.

One user adds a number to total store i need to notify all other users in same group about it and add +1 to their store as well. In this scenario would you suggest i keep with Firebase notification for real time updates or something else. What would you suggest?

Tommertom · September 25, 2021, 5:51pm

No recommendation

If u have to stick to laravel then i cant tell the best way how to trigger updates for a larger group. I dont know laravel backends. Likely there is a laravel solution to this?

Using fcm without user notifications- maybe a bit off? But if hans says it works, why not. Not sure if u can disable the notification while still getting the push. Maybe in message config?

In firestore the realtime updating is a default feature and pretty cool. If u like that, maybe ditch laravel? Or even put firestore in between? Or next to the laravel api?

EinfachHans · September 25, 2021, 6:19pm

We are using Push but that doesn’t mean that it’s the best Can you share some information about firestore realtime updates also in cordova/capacitor apps? Always happy to learn new stuff

Tommertom · September 25, 2021, 6:32pm

Uhhh…. I use firebase web sdk to access data in firestore. Via angularfire wrapper

A doc(‘pathtodoc’).valueChnges() gives a stream of that doc. Whenever another app or server changes that doc, all who are subscribed to the stream will get those changes almost realtime. All with rxjs magic

U not using firestore then I presume?

github.com

angular/angularfire/blob/dd414b243c2e3987de5e25d33def647bbb8047fd/docs/firestore/documents.md

# 2. Documents in AngularFirestore

> Cloud Firestore is a NoSQL, document-oriented database. Unlike a SQL database, there are no tables or rows. Instead, you store data in *documents*, which are organized into *collections*.
Each *document* contains a set of key-value pairs. Cloud Firestore is optimized for storing large collections of small documents.

## Using `AngularFirestoreDocument`

The `AngularFirestoreDocument` service is a wrapper around the native Firestore SDK's [`DocumentReference` type](https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference). It is a generic service that provides you with a strongly typed set of methods for manipulating and streaming data. This service is designed for use as an `@Injectable()`.

```ts
import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

export interface Item { name: string; }

@Component({
  selector: 'app-root',
  template: `
    <div>

This file has been truncated. show original

EinfachHans · September 25, 2021, 6:39pm

No not yet. Our App is highly important to run and receive updates even after hours in background mode. It’s a emergency app, so stuff like this has to work perfectly over hours Even with internet connection losses and resuming…

Tommertom · September 25, 2021, 6:49pm

Ok sounds cool

Firestore allows for flaky connections and offline mode, and is pretty efficient in resources.

But of course cant say for mission critical stuff.

Can u share your techstack?

EinfachHans · September 25, 2021, 7:01pm

We are using latest Cordova Version (because we need native Google Maps integration) with Ionic.

Sounds interessting, i will check it out Thanks!

usanzadunje · September 25, 2021, 7:43pm

Actually when you send data notification there is nothing displayed. It is silent and i can do whatever i want with data. There isnt even push when app is in background.

Also reimplementing everything to use firestore seems ineficent since my app and real time part doesnt need to be exact in milisecond or even few seconds.

But thanks for info will defenitely look i to ir for future projects.

usanzadunje · September 25, 2021, 7:46pm

Do you by any chance use distance calculation in your app? If so which plugin you use?

I have distance calculation using some formula using lat and lng but its not calculating distance using roads like an google mapa does. It just calculates air distance which is not always 100% exact.

EinfachHans · September 25, 2021, 9:10pm

nope but i guess google has a library for that?