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
You don't have access to this class
Keep learning! Join and start boosting your career
In this class we are going to see how to implement the Add to Homescreen functionality.
IMPORTANT Note:
At the time of creating this course Chrome 68 is coming out, this version will change the Add to Homescreen behavior subtly.
create-react-app gives us a pre-built Web Manifest which we must configure. Everything that has to do with our Web Manifest is inside the index.html and manifest.json files in the public folder of our project.
For the moment we are going to work inside the manifest.json file, in it we can see several attributes, which are:
- short_name: It is the name used in the Homescreen.
- name: It is the name of our application.
- icons: Specifies an array of images that will serve as icons of the application. We will change the "favicon.ico" to "icon.png", specify the size to 512x512 and the type to "image/png".
- start_url: It indicates us in which page our application starts, for compatibility it is always convenient that it is "/" instead of "./index.html".
- display: Defines the display mode for the application. Standalone means that the application can run by itself.
- theme_color: Defines what color we are going to use in the Android taskbar to match our application.
- related_applications: It is used if we want Chrome in the Add to Homescreen to recommend an application from the Store.
To test our Add to Homescreen we must take into account that a fundamental requirement of the PWA is that everything works with HTTPS.
Our default app is fullscreen, so DON'T FORGET to provide a path to homescreen.
On iOS we need to add some metadata to the index.html of our project. When testing our application on iOS we will notice that the Add to Homescreen in this case must be added manually by the user.
Contributions 49
Questions 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
 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();
Want to see more contributions, questions and answers from the community?