No tienes acceso a esta clase

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

Creando un Web Manifest

5/16
Recursos

En esta clase vamos a ver c贸mo implementar la funcionalidad de Add to Homescreen.

Nota IMPORTANTE:

Al momento de crear este curso esta saliendo Chrome 68, dicha versi贸n va a cambiar el comportamiento del Add to Homescreen sutilmente.
create-react-app nos da un Web Manifest pre armado el cual debemos configurar. Todo lo que tiene que ver con nuestro Web Manifest est谩 dentro de los archivos index.html y manifest.json de la carpeta public de nuestro proyecto.

Por el momento vamos a trabajar dentro del archivo manifest.json, en el podemos ver varios atributos, los cuales son:
鈥 short_name: Es el nombre que se utiliza en la Homescreen.
鈥 name: Es el nombre de nuestra aplicaci贸n.
鈥 icons: Especifica un array de im谩genes que servir谩n como iconos de la aplicaci贸n. Cambiaremos el 鈥渇avicon.ico鈥 por 鈥渋con.png鈥, especificamos el tama帽o a 512x512 y el tipo a 鈥渋mage/png鈥.
鈥 start_url: Nos indica en que p谩gina comienza nuestra aplicaci贸n, por compatibilidad siempre conviene que sea 鈥/鈥 en lugar de 鈥./index.html鈥.
鈥 display: Define el modo de visualizaci贸n para la aplicaci贸n. Standalone significa que la aplicaci贸n puede correr por su misma.
鈥 theme_color: Define qu茅 color vamos a usar en la barra de tareas de Android para que combine con nuestra aplicaci贸n.
鈥 related_applications: Sirve si queremos que Chrome en el Add to Homescreen recomiende una aplicaci贸n del Store.

Para probar nuestro Add to Homescreen debemos tener en cuenta que un requisito fundamental de las PWA es que todo funcione con HTTPS.

Nuestra aplicaci贸n por defecto es fullscreen, as铆 que NO OLVIDES de brindar un camino al home.

En iOS necesitamos a帽adir alguna metadata al index.html de nuestro proyecto. Al momento de probar nuestra aplicaci贸n en iOS nos daremos cuenta de que el Add to Homescreen en este caso debe ser a帽adido manualmente por el usuario.

Aportes 48

Preguntas 10

Ordenar por:

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

o inicia sesi贸n.

Tuve problemas al ejecutar

npm run build && npm start

Lo que hice fue modificar el script de start

"start": "serve ./build -s -p 4000",

luego, ejecute de nuevo:

npm run build && npm start

Hubiera sido muy ch茅vere que el proyecto se construyera para ir paso a paso y no que ya le muestren uno hecho

Configuraciones Apple:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Para los amigos que tienen problemas al ejecutar npm start recomiendo hacer lo siguiente:
Instalamos serve globalmente:

npm install -g serve

Configuramos nuestro package.json

"scripts": {   
    "start": "serve ./build -s -l 5000",
    "build": "react-scripts build"
     },

Parece que chrome ha cambiado nuevamente la interfaz. Tarde en descubrirla pero es asi:

No puede ser!, me quiero volver chango!, donde has estado todo este tiempo NGROK que recien te vendo a conocer!!!.

UGH, por qu茅 no muestran la pantalla de Roberto mientras muestran su cara

Con Netlify es muy sencillo , solo lo instalan y le dan netlify deploy y listo les da un link donde estar谩 corriendo

A los que no les salga el add to homescreen, solo tienen que agregar el icon.png a la carpeta public. El archivo esta en los backups de la clase.

Importante

Cuando vayan a generar el reporte de lighthouse haganlo desde el modo incognito.

There were issues affecting this run of Lighthouse:
Chrome extensions negatively affected this page鈥檚 load performance. Try auditing the page in incognito mode or from a Chrome profile without extensions.

Yo esperaba hacer un proyecto desde cero鈥

Creo que lo mejor para el curso es hacer un ejemplo del SW desde 0 para luego entrar al worbox

Si tienen problemas con el separador //&&// pueden utilizar
este comando con el siguiente separador 馃憞

npm run build | npm start

Este curso est谩 incre铆ble.

No es necesario tener una cuenta en ngrok

Para las personas que tiene homebrew instalado aqu铆 les dejo el comando para instalar ngrok

$ brew install ngrok

Si por alguna raz贸n tu homebrew no tiene el paquete de ngrok y obtienes un error similar a este

 Error: No available formula with the name 鈥渘grok鈥

Ya sea porque esta desactualizado o razones ajenas a la vida entonces utiliza el siguiente comando

brew cask install ngrok

Una vez instalado en nuestra terminal corremos el comando

ngrok http 4000

veremos que nos genera 2 url una con http y otra con https, vamos a copiar la que nos habla de https y la vamos a pegar en el navegar.

Y Voila.

Para los que tienen problemas con el comando npm run build && npm run start, a mi me sirvio borrar la carpeta node_modules e instalar nuevamente ahi me solicito instalar el paquete de isomorphic-fetch lo instale y se soluciono el problema.

Los que utilizan code de la nueva version este comando no te sera util
npm run build && npm start

por lo que tendras que utilizar este comando quitando &&

npm run build npm start

ok mirando un poco Stack overflow, me tope con el error en terminal

ngrok command not found

, como buen samaritano yo lo descargue de la pagina oficial, lo descomprimi en el escritorio, abr铆 la instalaci贸n y se supone que funcionaba, pero no. Soluci贸n pon en la terminal la ruta donde esta el archivo ya descomprimido, en mi caso seria la ruta /Desktop y ahora corre el comando

sudo cp ngrok /usr/local/bin

lo que permite que puedas usar el comando y puedas continuar con la clase !

Para quienes necesitan descargar ngrok para el linux subsystem de windows 10:

curl https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip -o ngrok-linux.zip
unzip ngrok-linux.zip

Podria haber grabado mas la pantalla, se ve en ciertas ocasiones que toca algo en la pantalla pero no lo muestra

jm

No me aparece la opci贸n de 鈥淎DD TO HOME SCREEN鈥, que podr铆a hacer ?

A mi no me sali贸 el 鈥淎dd to homescreen鈥 en mis dispositivos, pero cuando lo corr铆 en el emulador s铆 me apareci贸.

Les comparto las gu铆as de google que para que sepan, necesitan tener al menos dos tama帽os de iconos para que aparezca el 鈥渁dd to homescreen鈥, uno de 192x192 y otro de 512x512

https://developers.google.com/web/fundamentals/app-install-banners/native

![](

no me aparece esa barrita de Add.

Para que salga el add to homescreen
Otra opci贸n es subirlo a Firebase Hosting.
Primero debes ingresar a firebase y crear un proyecto y seleccionar Desarrollo/Hosting y sigues los pasos de este link:

https://www.robinwieruch.de/firebase-deploy-react-js/

Aunque para Safary no sale 馃槙

Esto esta chevere 馃槺馃槺
馃憤馃憤馃憤馃憤馃憤

A mi no me funciono el 鈥淎dd to homescreen鈥:
Lo solucione haciendo un deploy a now y todo funciono correcto. sospecho que es por no tener en local la forma de montar https.
si alguien tiene una mejor soluci贸n por favor me la comentan.

Los invito a ver el estado de las PWA鈥檚 en iOS 13
.
https://brainhub.eu/blog/pwa-on-ios-13/

Para testear en iphone o su dispositivo m贸vil, descarguen ngrok. Aqu铆 les dejo el link: https://ngrok.com/

De manera muy sencilla les permitir谩 ver c贸mo funciona el su telefono y es maravilloso el resultado.

Tengo un error al ejecutar npm run start

2021, Iphone Xs y Iphone 12 Pro Max, la PWA se ejecuta sin problemas y sin ser tan lenta como se explica en clase.

display

En este dato especificamos como el usuario visualizar谩 nuestra p谩gina Web al visitarla, las opciones que puedes aplicar son:

fullscreen: Se usar谩 todo el espacio del navegador para visualizar la p谩gina Web.
standalone: La Web usar谩 sus propios elementos o estilos como una ventana diferente, su propio icono, etc.
minimal-ui: Usar谩 los elementos m铆nimos para visualizar la Web.
browser: La Web se abre en una pesta帽a o ventana nueva. (Este valor es el predeterminado)

ta interesante la info sobre el manifest

por que no explican lo de ngrok o como hacer lo del emulador 馃う馃徑鈥嶁檪锔弙eo que hay un monton de gente que tampoco le sale la parte de agregar el homescreen鈥 o no se si sea la nueva version de chrome

驴Alguien podr铆a explicar claramente como funciona ngrok? De verdad siento que no logro comprender del todo su funcionalidad.

En la versi贸n 73 o superior de Google Chrome ya no sale ning煤n mensaje cuando accedemos al http://localhost:5000, simplemente vamos a nuestro emulador de android y abrimos el link que nos proporciona Ngrok y ya nos aparecer谩 la opci贸n de Agregar a la pantalla de inicio

Aunque coloque el tag 鈥渁pple-mobile-web-app-capable鈥 en 鈥渘o鈥 igual la aplicaci贸n en Apple se muestra en pantalla completa, al parecer desde ios12 la prioridad la tiene el archivo manifest.json

En las ultimas versiones ya no aparece por default en pantalla 鈥淎dd to HomeScreen鈥, pero si aparece en las opciones, no necesitas instalar nada extra

no me funciona el ejemplo en android y IOS

Para los que no les funcione la app debido a la api por ser de pago (patreon) les dejo algunas opciones para sustituirlo en mealbd-api.js la parte de c贸digo:

< const request = await fetch(`${baseUrl}/latest.php`)>
//Lo podemos sustituir por: 
  const request = await fetch(`${baseUrl}/search.php?s=a`);

o por alguna de las opciones que les dejo aqu铆 en el link

Para los que no les funcione el comando de start pueden cambiarlo por:

"start": "npx serve ./build -s"

Si no tienen serve

pueden instalarlo desde npm

npm install -g serve

Y si no tienen npx igual pueden instalarlo

npm install -g npx

Por si les sirve pueden probar con su telefono o tambien instalar https://www.bluestacks.com/es/index.html

Creo que el proyecto en este caso se deberia nanejar por un GIT ya que hay varias versiones

para complementar aqui

./ngrok http 3000 -host-header="localhost:3000"

Que tal, estoy tratando de utilizar en lugar del add to home screen un banner de instalaci贸n de app nativa para hacer instalaci贸n desde las stores en lugar de la PWA.

Ya le di vueltas a la Documentaci贸n y nada mas no encuentro como hacerlo.

Alguien sabe o ha logrado implementar algo como esto?

No he podido resolver el redireccionamiento de http hacia https,

Para las personas que no les funciona el comando npm run build && npm start

Primero ejecuten npm run build, luego npm install -g serve

Luego ejecuten lo siguiente

npm run build | npm start y estar谩 todo listo !

Para solucionar el error no matching service worker detected del browser se debe hacer el cambio del metodo unregister() a register() en el archivo index.js

serviceWorker.register();