Tutorial PWA

Para poder realizar este taller ud debe:

Tener instalado node.js en su máquina

En este tutorial se creará una versión inicial de una PWA en React. Para ello se necesita tener previamente instalado un servidor web. Esto lo puede hacer ejecutando el comando npm install -g http-server.

Cree un nuevo proyecto en React con el comando npx create-react-app jokesapp --template cra-template-pwa.

Ingrese a la carpeta jokesapp y compile la aplicación para un entorno de producción con el comando npm run build. Esto debe crear una nueva carpeta denominada build.

Ingrese a esa carpeta (cd build) y ejecute un servidor web con el comando http-server -o.

Esto desplegará en el browser la aplicación por defecto provista por React.

Abra las herramientas de desarrollo de su navegador y verifique en la pestaña Application que aún no hay soporte para PWA (ver opción Service Workers).

Para comprobarlo, marque la casilla Offline:

Luego de esto deberá ver el Downsaur:

Vaya al archivo src/index.js y cambie la línea 18 por serviceWorkerRegistration.register();

Compile nuevamente la aplicación para un entorno de producción, inicie el servidor web y mire el comportamiento en las herramientas de desarrollo. Verifique que ya existe un Service Worker:

Si pone el navegador fuera de línea, la aplicación seguirá apareciendo en el cache del navegador.

Modifique el archivo public/index.html, por ejemplo, cambiando el título de la página.

Compile la aplicación para un entorno de producción, inicie el servidor web y es posible que la página no se actualice a la nueva versión. Por tanto, es necesario forzar la limpieza del cache y hacer un hard reload de la página. Para esto, haga clic derecho en el ícono de actualización que está en la parte izquierda de la barra de direcciones del navegador y seleccione Empty Cache and Hard Reload.

Luego de esto deberá ver la actualización del título de la página.

Tomando como referencia lo visto en las clases anteriores, realice lo siguiente:

Cree un nuevo componente denominado Joke
Cree un hook de estado para un atributo denominado joke
En un hook de efecto haga un fetch al endpoint: https://api.chucknorris.io/jokes/random, el cual retorna un objeto que contiene un dato aleatorio sobre Chuck Norris
Cambie el estado del componente, asignando al atributo joke lo retornado por fetch en el atributo value.
En la vista del componente incluya un encabezado de primer nivel con el texto Joke, y un párrafo en el que se muestre el valor del atributo joke del estado.
En el archivo src/App.js defina a Joke como el componente principal de la aplicación

Compile todo de nuevo y ejecute la página, la cual debería presentar una información semejante a esta:

Modifique el archivo public/index.html y agregue está línea en el encabezado:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

Incluya el siguiente código en el archivo index.css:

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: brown;
        color: #fff;
        text-align: center;
        display: grid;
        align-items: center;
        font-family: 'Montserrat';
        font-size: 3em;
        padding: 2em;
}

body, html {
        height: calc(100% - 4em);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

Recompile la aplicación para un entorno de producción y visualice los resultados.

Para garantizar que siempre se puede visualizar algo en la página así se pierda conexión, modifique el hook de efecto del componente así:

useEffect(()=>{
        if(!navigator.onLine){
            if(localStorage.getItem("joke") === null) {
                setJoke("Loading...")
            } else {
                setJoke(localStorage.getItem("joke"));
            }
        } else {
            const URL = "https://api.chucknorris.io/jokes/random";
            fetch(URL).then(res=>res.json()).then(res=>{
                setJoke(res.value);
                localStorage.setItem("joke", res.value);
            })
        }
    }, []);

Recompile la aplicación para un entorno de producción y visualice los resultados.

Usando el api de Marvel (https://developer.marvel.com/) desarrolle una PWA en React que muestre información sobre los personajes del universo Marvel.

En primer lugar debe registrarse en la página de Marvel para poder obtener una llave pública y una llave privada. Una vez haya ingresado con sus credenciales, ingrese a la documentación del api para conocer los endpoints disponibles y su funcionamiento. En este caso debe utilizar el endpoint que sirve la información de los personajes:

https://gateway.marvel.com:443/v1/public/characters

Recuerde que en la URL del endpoint debe pasar 3 parámetros adicionales:

ts: una cadena de texto larga, por lo general se refiere a un timestamp u otra cadena que puede cambiar con el tiempo
apikey: la llave pública que le fue asignada
hash: el hash md5 de la concatenación del ts, la llave privada y la llave pública: hash = md5 (ts + private key + public key)