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
Introducción a PWA
¿Qué es una PWA?
Progressive Web App vs. Native App
El proyecto
Google Lighthouse
Creando un Web Manifest
Implementar el Manifest
Service Workers
¿Qué es un Service Worker?
Introducción a Workbox
Implementando Workbox
Aplicando Estrategias de Carga
Google Analytics Offline
Experimentar con Workbox
Funcionalidades Avanzadas
Web Share API
Trabajando Offline
Notificaciones
Publicando la app
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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 “favicon.ico” por “icon.png”, especificamos el tamaño a 512x512 y el tipo a “image/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
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.
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

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();
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.