Firebase Offline Exemplo

products.service.ts

import { Injectable } from '@angular/core';
import { Product } from '../interfaces/product';
// aqui você substitui pelo angularFire que ta utilizando
import * as firebase from 'firebase';
// import do localStorage do angular, tem que instalar essa lib https://www.npmjs.com/package/@ngx-pwa/local-storage
import { StorageMap } from '@ngx-pwa/local-storage';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  // se ta conectado ou não. Sempre que for fazer uma chamada no banco vc tem que vir no serviço verificar se ta conectado.
  public conectado: boolean;
  // o tipo da conexão atual
  public tipoConexao: string;
  // quais is tipos de conexões aceitas para poder gravar os dados.
  private conexoesAceitas: [string] = ['wifi', '3g', '4g'];

  constructor(private _storage: StorageMap) {
    /*
      !!!ATENÇÃO AQUI!!!
      Esse código fica no constructor do app.component
      ESse _products seria a referencia a esse serviço de produtos aqui, teria que importar, declarar no construtor e tal
      Primeiro inicializa as propriedades da conexão e do tipo dela
      Depois cria eventListeners que vão observar as mudanças de conexão e alterar as propriedades para serem usadas
      no app todo, na hora da consulta.
    */
    this._products.conectado = navigator.onLine;
    this._products.tipoConexao = navigator.onLine ? navigator.connection.effectiveType : '';
    window.addEventListener('online', () => {
      this._products.conectado = true;
      this._products.tipoConexao = navigator.connection.effectiveType;
      // essa chamada eu colocaria na home e não aqui, ai na home você poderia fazer tipo:
      // if (this._products.conectado), se ta conectado chama o metodo que salva os dados que estão salvos offline
      // ou da a opção pro usuario se ele quer ou não salvar já
      this._products.salvaDadosNaReconexao();
    });
    window.addEventListener('offline', () => {
      this._products.conectado = false;
      this._products.tipoConexao = '';
    });
  }

  // esse metodo vai salvar se estiver online
  salvaDadosFirebase(dados){
    // aqui você faz a parte de salvar normalmente, tratar sucesso e erro, etc.
  }

  // esse metodo vai salvar no localStorage os dados, se ta offline cai aqui
  // primeiro pega os dados salvos no localstorage
  // se existem produtos, se não veio null ou undefined, então da um push no array e salva os dados novamente no storage
  // se não existe, salva um array com o objeto dos dados
  salvaDadosLocalStorage(dados){
    this._storage.get('produtosOffline').subscribe(produtos => {
      if (produtos) {
        produtos.push(dados);
        this._storage.set('produtosOffline', produtos).subscribe(() =>{});
      } else {
        this._storage.set('produtosOffline', [dados]).subscribe(() =>{});
      }
    });  
  }
  
  // quando reconectar cai aqui
  // Se existem os produtos, se esta conectado e o tipo de conexão é uma conexão boa, então vai salvar os dados
  salvaDadosNaReconexao(){
    this._storage.get('produtosOffline').subscribe(produtos => {
      if (produtos && this.conectado && this.conexoesAceitas.includes(this.tipoConexao)){
        for(let i = 0; i < produtos.length; ){
        // aqui tenta salvar os dados, se der certo, da um produtos.unshift() pra tirar o produto da posição 0
        // se der erro, da um i++ pra passar pro proximo
        // no final se sobrar algum você pode dar um toast informando o usuario que faltaram alguns e se ele quer tentar novamente
        // se ele quiser da um update no localStorage e chama o metodo novamente, se não, só da o update e bola pra frente.
        }
      }
    });
  }
}