Manipulando o Status de Conexão com Angular

As aplicações front-end modernas possuem muitos recursos que enriquecem a experiência do usuário. Um comportamento bastante utilizado é o de informar visualmente quando a conexão com a internet é perdida ou recuperada.

Neste artigo demonstrarei como podemos detectar o status de conexão do browser em uma aplicação Angular. Esta detecção é ainda mais útil quando você está desenvolvendo uma Progressive Web App que oferece uma disponibilidade maior mesmo estando offline.

Dentro do objeto global window, temos dois eventos que são disparados quando há a troca de conexão. Também temos uma variável booleana que informa se há conexão com a internet.

Observable isOffline$

Agora que temos este conhecimento, podemos coletar estas informações e criar um Observable que nos dará o status de uma forma reativa e reutilizável para os nossos componentes.

Vamos analisar cada um dos detalhes. Estamos utilizando a função merge do RxJS que vai unir todos os observables que estão dentro dele e transformá-los em um só.
Podemos emitir a troca de conexão com o fromEvent. Um para o evento online e outro para o evento offline. Precisamos também emitir um evento logo quando o observable for iniciado. Para isso utilizamos o operador of.

Agora que temos todos os eventos sob controle, basta fazer a seguinte lógica: quando qualquer um dos três operadores emitir um evento, mapeamos para um novo observable com o operador switchMapTo, retornando o status a partir da variável navigator.onLine.

É importante ressaltar que precisamos retornar um novo stream a partir da função defer, caso contrário nossa inscrição vai emitir sempre o mesmo valor. Saiba mais sobre o observable defer neste artigo.

Com o observable em mãos, iremos utilizar em um componente com o pipe async.

Como temos um observable, podemos também nos inscrever nele e executar alguma ação quando houver a troca. Um caso de uso que costumo utilizar bastante é o de guardar informações no cache quando estiver offline e posteriormente enviá-los para o servidor quando a conexão for recuperada.

Bônus: Diretiva com o status de conexão

Vamos imaginar uma situação onde é preciso desabilitar alguns botões e outros elementos caso o usuário perca a conexão com a internet. Podemos criar uma diretiva para adicionar este comportamento.

Utilizamos o HostListener para ouvir os eventos online/offline e atribuímos o valor em uma variável. Por fim utilizamos o HostBinding para habilitar ou desabilitar o elemento conforme esta variável. Veja mais sobre os decorators HostListener e HostBinding neste artigo.

Utilizamos nossa diretiva em qualquer elemento de forma muito simples.

Dica Final

Para testar este comportamento de forma mais rápida, podemos simular uma perda de conexão pelo Chrome DevTools. Acesse a aba Network e selecione a opção Offline.