PROGRESIVE WEB APP

Vista previa del material en texto

Docente: 
M.A. Alex Pacheco Moya 
PWA 
CONTENIDO 
• Que son las PWA 
• Ventajas 
• Como funciona 
• Elementos 
• Crear PWA 
 
S2 
 
 
M.A. Alex Pacheco Pagina #2 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
 
 
 
PROGRESSIVE WEB APP 
PWA 
 
 
 
 
M.A. Alex Pacheco Pagina #3 
Instituto de Educación Superior Privado El Buen Pastor 
¿Qué son las Progressive Web Apps? ¿Por qué son tan importantes? 
 
Progressive web apps (PWA) o aplicación web progresiva es una solución basada en la web 
tradicional que todos conocemos, aunque incorpora algunas particularidades que la hacen 
parecerse a una app nativa para teléfonos móviles y tabletas. Cada proyecto es independiente 
y el nivel de adaptación de la web al formato app es progresivo, por lo que puede que visitemos 
un site con una PWA casi idéntica a una app o quizá sea una web con algunos avances. 
Ventajas Progressive Web App (PWA) 
1. La primera ventaja que encontramos con las progressive web apps es que no 
necesitamos entrar a Google Play o Apple Store para descargar nada. Solo se 
requiere, al principio, una conexión a internet y un navegador que puede ser Chrome, 
Safari o Firefox. 
2. El segundo gran avance con la PWA es que cualquier usuario puede ‘instalarla’ en la 
pantalla de inicio de su dispositivo. Y es que todos hemos tenido, alguna vez, el móvil 
al borde de capacidad. Hemos borrado fotografías, vídeos o desinstalado aplicaciones 
porque no cabía nada más. Pero siempre hay espacio para una PWA en cualquier 
teléfono móvil porque funciona como un acceso directo que te abre la web y recupera el 
contenido si no hay conexión o lo refresca si el usuario está conectado a la red. 
Sí, has leído bien. Con la progressive web app, el usuario puede seguir consultando tu web, 
aunque haya perdido la conexión. Es una de las ventajas que la hacen tan atractiva y que 
han provocado que tenga una gran aceptación entre los internautas. 
¿Cómo funciona una Progressive Web Apps (PWA)? 
Ester Ribas nos explica el funcionamiento de una PWA: Uno de los elementos más importantes 
que conforman las PWA es el manifiesto de la aplicación y que está en formato JSON. Este, 
nos permite controlar cómo se verá nuestra aplicación en áreas donde normalmente los 
usuarios tienen aplicaciones nativas. 
 
Este archivo o manifiesto contiene lo siguiente: 
• Name: Nombre de la aplicación que aparecerá en el menú mobile del usuario. 
• Description: Indicar la descripción de nuestra aplicación móvil 
• Icons: Crear distintos iconos, con resoluciones distintas, para que de esta manera, se 
vea bien en todos los dispositivos. 
• Start url: URL de inicio cuando abrimos la aplicación 
• Display: En este caso, podemos elegir varias configuraciones (standalone, fullscreen, 
minimal-ui, entre otros) 
• Orientation: Cuando hablamos de orientación nos referimos a si queremos que la 
aplicación web se deba usar en modo retrato o en modo paisaje. 
• Theme_color: el color que se usará para la barra superior de la aplicación. 
• Background_color: color para la pantalla antes de la carga completa de la aplicación. 
Otro elemento que encontramos es el Service Workers, se trata de uno o varios scripts que 
funcionan en un segundo plano y que nos permiten generar una experiencia offline, 
descargando los contenidos imprescindibles para que la aplicación funcione, así como generar 
notificaciones push. 
 
 
M.A. Alex Pacheco Pagina #4 
Instituto de Educación Superior Privado El Buen Pastor 
El Service Workers es realmente importante ya que nos permite optimizar la retención de 
los usuarios. Hasta la fecha, esta funcionalidad solo la tenían las aplicaciones nativas, pero se 
ha convertido en una de las funcionalidades más importantes para poder mejorar el retorno del 
usuario a nuestra app. No obstante, con el aumento de notificaciones en todas las app, esta 
funcionalidad o característica cada vez queda más oculta. 
Además, es importante tener en cuenta que esta funcionalidad no funciona para todos los 
dispositivos, como es el caso de los dispositivos que utilizan iOS. Podemos comprobar si un 
sitio utiliza Service Worker mediante Chrome, realizando los pasos siguientes: 
• Abrir la página https://billingsgazette.leeaws.com/pwa/ 
• Hacer clic con el botón derecho y darle a inspeccionar 
• Ir a la pestaña “Application” y “Service Workers” 
• Podemos ver que el Service Workers está activo 
Si nos fijamos en el apartado “Cache Storage”, podremos ver los archivos que han sido 
descargados y cacheados por el Service Worker. 
Tener la posibilidad de usar el portal sin tener conexión es un gran avance, pero implica que 
deberemos desarrollar un sistema para recabar todos los datos obtenidos de la navegación 
offline, y que estos, sean mandados a Google Analytics o cualquier otro programa de medición 
de datos que estemos utilizando. 
ELEMENTOS MÁS IMPORTANTES DEL DOM DE UNA PROGRESSIVE WEB APP 
Las Progressive Web Apps se componen de dos partes principales, el App-Shell, que hace 
referencia a la estructura de la página y el contenido, que puede variar entre las distintas 
páginas de nuestra aplicación. 
Dependiendo de la tecnología que se haya usado para desarrollar la página, el contenido se 
puede mandar desde el servidor en formato de código HTML o mediante script JSON, sin 
embargo, a la hora de utilizar JSON debemos ir con cuidado, ya que esta técnica nos puede dar 
problemas de indexación en caso de que se implemente mal. Este detalle es importante tenerlo 
en cuenta, sobre todo para a lo que el SEO se refiere. 
MEDIR LA VELOCIDAD DE UNA PWA 
El principal beneficio de las PWA son su peso, se trata de páginas que completas pueden 
tener un peso de menos de 1MB, ofreciendo una experiencia veloz para los usuarios. Esto 
aporta una gran ventaja al mundo mobile-first al que nos encontramos. 
En definitiva, la fidelización del usuario a través de los push, el acceso directo, la UX y la 
velocidad de carga son las grandes ventajas de las progressive web apps, que te ayudarán 
a que tu web siga ganando relevancia. Miles de negocios de todo el mundo han identificado 
estos avances y ya están trabajando con ellos para lograr el mayor número de ventas posibles 
en este mercado tan competido. ¿A qué esperas para explotar al máximo tu web? 
 
https://billingsgazette.leeaws.com/pwa/
https://www.iebschool.com/blog/que-es-etiqueta-html-analitica-usabilidad/
 
 
M.A. Alex Pacheco Pagina #5 
Instituto de Educación Superior Privado El Buen Pastor 
Crear Web APP 
 
1. Crear Web responsive 
 
Paso 1: Configurar el proyecto 
1. Abre Visual Studio Code. 
2. Crea una carpeta en tu sistema donde quieras almacenar tu proyecto. Por ejemplo, 
puedes crear una carpeta llamada "mi-sitio-web". 
3. Abre Visual Studio Code y luego abre la carpeta que acabas de crear usando File > Open 
Folder. 
Paso 2: Crear la estructura de carpetas y archivos 
Dentro de la carpeta del proyecto, crea las carpetas css, images y js. Tu estructura de 
carpetas debería verse así: 
 
 
Paso 3: Crear el archivo index.html 
Dentro de la carpeta del proyecto, crea un archivo llamado index.html y agrega el siguiente 
código HTML como punto de partida: 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #6 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
Paso 4: Agregar estilos CSS 
Dentro de la carpeta css, crea un archivo llamado styles.css. Aquí puedes agregar estilos CSS 
para hacer que tu sitio web sea responsive. Por ejemplo, puedes usar CSS flexible (Flexbox) o 
rejillas (Grid) para controlar el diseño. Se muestra un ejemplo básico para hacer que el 
encabezado y el pie de página sean flexibles: 
 
 
 
 
 
M.A. Alex Pacheco Pagina #7 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
M.A. Alex Pacheco Pagina #8 
Instituto de Educación Superior Privado El Buen Pastor 
Paso 5: Agregar imágenes y scripts 
Dentro de las carpetas images y js, puedes agregar tus archivosde imágenes y scripts 
respectivamente. 
Paso 6: Visualizar tu sitio web 
Para ver tu sitio web, abre el archivo index.html en Visual Studio Code y haz clic derecho en el 
archivo. Luego, selecciona "Abrir con Live Server" si tienes la extensión Live Server instalada, o 
simplemente abre el archivo en tu navegador web. 
 
Instalar Live Server 
 
 
Paso 7: Visualización en el Navegador 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #9 
Instituto de Educación Superior Privado El Buen Pastor 
 
2. Convertir tu sitio web en una Progressive Web App (PWA) 
Paso 1: Agregar un archivo manifest 
El archivo manifest es un archivo JSON que describe tu PWA y proporciona información como el 
nombre de la aplicación, los íconos de la aplicación y cómo debe comportarse en diferentes 
plataformas. Crea un archivo llamado manifest.json en la raíz de tu proyecto y agrégale la 
siguiente información: 
 
 
 
M.A. Alex Pacheco Pagina #10 
Instituto de Educación Superior Privado El Buen Pastor 
Paso 2: Registrar el Service Worker 
El Service Worker es un script que se ejecuta en segundo plano y permite que tu PWA funcione 
sin conexión y realice otras tareas como notificaciones push. Crea un archivo llamado service-
worker.js en la raíz de tu proyecto y agrégale el siguiente código: 
 
 
 
 
Paso 3: Registrar el Service Worker en tu página 
En tu archivo index.html, agrega el siguiente código en la sección <head> para registrar el 
Service Worker: 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #11 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
Paso 4: Hacer que tu sitio web sea seguro 
Para que tu PWA funcione en la mayoría de los navegadores, tu sitio debe servirse a través de 
HTTPS en lugar de HTTP. Esto es importante para garantizar la seguridad de la PWA. 
Paso 5: Pruebas y optimizaciones 
Es importante realizar pruebas en diferentes navegadores y dispositivos para asegurarte de que 
tu PWA funcione correctamente. Además, puedes considerar la optimización de rendimiento y la 
implementación de notificaciones push si es relevante para tu aplicación. 
Con estos pasos, habrás convertido tu sitio web en una PWA básica. Puedes agregar más 
funcionalidades y características avanzadas según tus necesidades específicas. 
 
Prueba usando Navegador Google Chrome 
La mayoría de los navegadores modernos te permiten emular un entorno HTTPS para pruebas 
de desarrollo. Aquí te muestro cómo hacerlo en Google Chrome: 
1. Abre Google Chrome y visita tu sitio web local en HTTP (por ejemplo, 
http://localhost:8080). 
2. Abre las herramientas de desarrollo de Chrome (puedes hacerlo presionando F12 o 
haciendo clic derecho en tu página y seleccionando "Inspeccionar" o "Inspect"). 
3. Ve a la pestaña "Aplicación" (Application). 
 
 
M.A. Alex Pacheco Pagina #12 
Instituto de Educación Superior Privado El Buen Pastor 
4. En el panel de la izquierda, selecciona "Service Workers". 
5. En la sección "Opciones", marca la casilla que dice "Bypass for network" para ignorar el 
registro de Service Workers seguro. 
6. Ahora, el PWA debería funcionar incluso en un entorno HTTP local. 
Esto es útil para pruebas locales, pero cuando despliegues el PWA en un entorno de producción, 
debes utilizar un certificado SSL válido para proporcionar un sitio HTTPS seguro a tus usuarios. 
Esto es esencial para que las PWAs funcionen en la mayoría de los navegadores y para 
garantizar la seguridad de tus usuarios. 
 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #13 
Instituto de Educación Superior Privado El Buen Pastor 
 
---------------------------------------------------- 
 
 
Referencia: 
 
¿Qué son las Progressive Web Apps? ¿Por qué son tan importantes? 
https://www.iebschool.com/blog/progressive-web-apps-analitica-
usabilidad/#funciona 
 
 
Convierte tu página web en una app para Android 
https://computerhoy.com/paso-a-paso/internet/convierte-tu-pagina-web-app-
android-40121 
 
Creando una PWA( Progressive Web Application) facil y rapido en 2021 
https://www.youtube.com/watch?v=HZURIHU92ks 
 
 
Taller Progressive Web Apps: Convierte tu Sitio Web en PWA (1 / 6) - #jonmircha 
https://www.youtube.com/watch?v=9oQIylJ-JpU 
 
https://www.iebschool.com/blog/progressive-web-apps-analitica-usabilidad/#funciona
https://www.iebschool.com/blog/progressive-web-apps-analitica-usabilidad/#funciona
https://computerhoy.com/paso-a-paso/internet/convierte-tu-pagina-web-app-android-40121
https://computerhoy.com/paso-a-paso/internet/convierte-tu-pagina-web-app-android-40121
https://www.youtube.com/watch?v=HZURIHU92ks
https://www.youtube.com/watch?v=9oQIylJ-JpU