Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Trabajando Offline

14/16
Recursos

Vamos a mejorar la UX para que nuestro usuario tenga una respuesta visible de que se encuentra offline.

La forma de saber si la aplicación esta offline u online es a través de una variable llamada Navigator.onLine, algo muy importante a tener en cuenta es que la variable nos va a decir que estamos online siempre y cuando no estemos offline lo cual significa que si el usuario tiene mala conexión a internet igual va a marcar como online.

La forma correcta de checar si el navegador esta online u offline es con dos eventos que se añaden a window, “offline” y “online”.

Aportes 6

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Para los que quieren estar un poco más actualizados, este es el código de componente <IsOffline /> basado en Hooks.

import React, { memo, useState, useEffect } from "react";

const isOffline = ({ children }) => {
  const [online, setOnline] = useState(navigator ? navigator.onLine : true);

  useEffect(() => {
    if (!window) return;

    window.addEventListener("online", goOnline);
    window.addEventListener("offline", goOffline);

    return () => {
      window.removeEventListener("online", goOnline);
      window.removeEventListener("offline", goOffline);
    };
  });

  function goOnline() {
    setOnline(true);
  }

  function goOffline() {
    setOnline(false);
  }

  if (online) {
    return null;
  }

  return <span>{children}</span>;
};

export default memo(isOffline);

wowoooow

como se manipula ese html

En los archivos no está el código, por las dudas acá lo dejo

import React from 'react';

export default class IfOnline extends React.Component {
  constructor(props) {
    super(props)
    this.state = { onLine: navigator ? navigator.onLine : true }
  }

  componentDidMount() {
    if( ! window ) return

    window.addEventListener('online', this.goOnline)
    window.addEventListener('offline', this.goOffline)
  }

  componentWillUnmount() {
    window.removeEventListener('online', this.goOnline)
    window.removeEventListener('offline', this.goOffline)
  }

  goOnline = () => this.setState({ onLine: true })
  goOffline = () => this.setState({ onLine: false })

  render() {
    const { children } = this.props
    const { onLine } = this.state

    if( onLine ) return null

    return <span>{ children }</span>
  }
}

entre los archivos de la clase no está el componente IfOffline que se creo

¿Y en el caso de que se este usando SSR? ¿Cómo se bindearian los eventos al inicializarse el componente? ¿O cómo se detectaría el cambio?