Creando un Web Manifest

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’s 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 “ngrok”

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 “ADD TO HOME SCREEN”, que podría hacer ?

A mi no me salió el “Add 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 “add 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 “Add 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’s en iOS 13
.
https://brainhub.eu/blog/pwa-on-ios-13/

Si alguien encuentra un error al ejecutar la web (TypeError: n.meals.map is not a function) y no se generan las recetas

.

Solo debe cambiar la url a la que se le hace petición (/latest.php)

.
Por en este caso (/random.php)

.
Sucede que ahora el endpoint (/latest.php) es solo para patrocinadores de la API

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 🤦🏽‍♂️veo 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 “apple-mobile-web-app-capable” en “no” 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 “Add 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();