No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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, 鈥渙ffline鈥 y 鈥渙nline鈥.

Aportes 6

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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?