store data from firebase into firebase offline storage with ionic 5

Question

I am new in ionic with angular and firebase. So I want to store my firebase data list in a cache so that the page can load once because currently I have a lot of data and it slows down the app when the user enters the page each time. please how can I handle my problem?

that is my model

    import { Media } from './Media';
    export class Post {
        id?: string;
        icone: string;
        owner?: string;
        titre?: string;
        description?: string;
        medias?: Array<Media> = new Array();
        mediasThumbnail?: Array<Media> = new Array();
        abonnees?: Array<string> = new Array();
        typePost?: string; // Formation, Projet, ...
        refSrc?: string;
        date?;
        location?: string;
        userSaved: string[] = new Array();
        userDel: string[] = new Array();
        debut;
        fin;
        breComment: number;enter code here
        descriptioncourte: string;
        competences?: string[];
        userliked?: string[] = new Array();
        userviewed?: string[] = new Array();
        }

that is my service

    import { Injectable } from '@angular/core';
        import * as firebase from 'firebase';
        import { Post } from '../models/Post';
        import {
          AngularFirestoreCollection,
          AngularFirestore,
        } from "@angular/fire/firestore";
        @Injectable({
          providedIn: 'root'
        })
        export class PostService {
          db: firebase.firestore.Firestore;
          readonly path = "posts";
          constructor(private afs: AngularFirestore) {
            this.db = firebase.firestore();
          }
        
        
          findByfilters(keys: string[], operator: firebase.firestore.WhereFilterOp[], values: any[], orderby?: string): firebase.firestore.CollectionReference {
        
            let query;
            let i = 0;
            keys.forEach(s => {
                if (!query) {
                    query = this.db.collection(this.path).where(s, operator[i], values[i]);
                } else {
                    query = query.where(s, operator[i], values[i]);
                }
        
                i++;
            });
            if (!query) {
                query = this.db.collection(this.path);
            }
            if (orderby) {
                return query.orderBy(orderby);
            }
            return query;
        }
        
         }
    
   

and then that is how I list my data

class MyPage {
  constructor(private postSvc: PostService) {
      this.postSvc.
      findByfilters(this.keys, 
        this.operator, 
        this.values).onSnapshot((data) => {
        this.postitems = new Array<Post>();
        data.forEach(async (item) => {
          const post = item.data() as Post;
          post.id = item.id;
          this.postitems.push(post);
        })
      });
  }
}

Please can somebody help me to show how can I implement my service to save my data in firebase offline? thanks.

Answer 1

AngularFire provides a built-in feature for offline persistence . This will be completely transparent for you, db.collection() will simply return what AngularFire did store in its cache when there is no connection available.

To enable it you should simply add AngularFirestoreModule.enablePersistence() in your module (probably app.module.ts ).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(), // <--- HERE
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}