U1. Tarea 1 v2022

Datos del Alumno Fecha
Nombre completo Matrícula

Oscar David Leyva Garibo 19/09/2022
19307042
¿Qué es una Aplicación Web Progresiva PWA (Progressive

Web Apps)?
Las aplicaciones web progresivas (mejor conocidas como PWAs por
«Progressive Web Apps») son aplicaciones web que utilizan APIs y funciones emergentes del
navegador web junto a una estrategia tradicional de mejora progresiva para ofrecer una aplicación
nativa —como la experiencia del usuario para aplicaciones web multiplataforma. Las
aplicaciones web progresivas son un patrón de diseño útil, aunque no son un estándar
formalizado. Se puede pensar que PWA es similar a AJAX u otros patrones similares que abarcan
un conjunto de atributos de aplicación, incluido el uso de tecnologías y técnicas web específicas.
Este conjunto de documentos te dice todo lo que necesitas saber sobre ellas.
Las PWA son aplicaciones web desarrolladas utilizando una serie de tecnologías específicas y
patrones estándar que les permiten aprovechar las funciones de la aplicación web y nativa. Por
ejemplo, las aplicaciones web son más detectables que las aplicaciones nativas; es mucho más
fácil y rápido visitar un sitio web que instalar una aplicación, y también puede compartir
aplicaciones web enviando un enlace.
Por otro lado, las aplicaciones nativas se integran mejor con el sistema operativo y, por lo tanto,
ofrecen una experiencia más fluida para los usuarios. Puede instalar una aplicación nativa para
que funcione sin conexión, y a los usuarios les encanta tocar sus iconos para acceder fácilmente a
sus aplicaciones favoritas, en lugar de navegar hasta ellas con un navegador.
Las PWA nos brindan la capacidad de crear aplicaciones web que pueden disfrutar de estas
mismas ventajas.
Asignatura Carrera
Aplicaciones Web Ingeniería en Desarrollo y Gestión de Software
Progresivas Actividades de Investigacion y Tareas Digitales en Canvas
19307042
No es un concepto completamente nuevo: estas ideas se han revisado muchas veces en la

plataforma web con varios enfoques en el pasado. La mejora progresiva y el diseño receptivo ya
nos permiten crear sitios web compatibles con dispositivos móviles.
Sin embargo, las PWA brindan todo esto y más sin perder ninguna de las características
existentes que hacen que la web sea excelente.
¿Qué características y ventajas tiene una PWA?

Para poder llamar PWA a una aplicación web, técnicamente hablando debe tener las siguientes
características: Contexto seguro (en-US) (HTTPS), uno o más Servicio Workers y un archivo de
manifiesto.
Contexto seguro (en-US) (HTTPS)
La aplicación web se debe servir a través de una red segura. Ser un sitio seguro no solo es una
buena práctica, sino que también establece tu aplicación web como un sitio confiable,
especialmente si los usuarios necesitan realizar transacciones seguras. La mayoría de las
funciones relacionadas con una PWA, como la geolocalización e incluso los servicios workers,
solamente están disponibles cuando la aplicación se ha cargado mediante HTTPS.
Servicio workers
Un servicio worker es un script que permite interceptar y controlar cómo un navegador web
maneja tus solicitudes de red y el almacenamiento en caché de activos. Con los
Asignatura Carrera
19307042
servicios worker, los desarrolladores web pueden crear páginas web rápidas y fiables junto con
experiencias fuera de línea.
El archivo manifest
Un archivo JSON que controla cómo se muestra tu aplicación al usuario y garantiza que las
aplicaciones web progresivas sean detectables. Describe el nombre de la aplicación, la URL de
inicio, los iconos y todos los demás detalles necesarios para transformar el sitio web en un
formato similar al de una aplicación.
 Ventajas de PWA
Las PWA deben ser detectables, instalables, enlazables, independientes de la red, progresivas,
reconectables, responsivas y seguras. Para obtener más información sobre lo que esto significa,
lee Ventajas de las aplicaciones web progresivas (en-US).
 . Visibilidad
El objetivo final es que las aplicaciones web tengan una mejor representación en los motores de
búsqueda, sean más fáciles de exponer, catalogar y clasificar, y tener metadatos utilizables por
los navegadores para darles capacidades especiales.
Algunas de las capacidades ya han sido habilitadas en ciertas plataformas basadas en la web
mediante tecnologías patentadas como Open Graph, que proporciona un formato para especificar
metadatos similares en el bloque HTML <head> usando etiquetas
<meta>.
Asignatura Carrera
19307042
El estándar web relevante aquí es el manifiesto de la aplicación web, que define las
características de una aplicación, como el nombre, el icono, la pantalla de inicio y los colores del
tema en un archivo de manifiesto con formato JSON. Esto es para usar en contextos como
listados de aplicaciones y pantallas de inicio de dispositivos.
 Instalabilidad
Una parte central de la experiencia de la aplicación web es que los usuarios tengan íconos de
aplicaciones en su pantalla de inicio y puedan tocar para abrir aplicaciones en su propio
contenedor nativo que se siente muy bien integrado con la plataforma subyacente.
Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de
propiedades establecidas dentro del manifiesto de la aplicación web y a través de una función
disponible en los navegadores de teléfonos inteligentes modernos llamada instalación de la
aplicación web.
 Vinculabilidad
Una de las características más poderosas de la web es la capacidad de vincular una aplicación en
una URL específica sin necesidad de una tienda de aplicaciones o un proceso de instalación
complejo. Así ha sido siempre.
 Independencia de la red
Las aplicaciones web modernas pueden funcionar cuando la red no es confiable o incluso no
existe. Las ideas básicas detrás de la independencia de la red son poder:
Vuelva a visitar un sitio y obtenga su contenido incluso si no hay una red disponible.
Asignatura Carrera
19307042
Navega por cualquier tipo de contenido que el usuario haya visitado previamente al menos una
vez, incluso en situaciones de mala conectividad.
Controla lo que se muestra al usuario en situaciones donde no hay conectividad.
Esto se logra mediante una combinación de tecnologías: Service Workers para controlar las
solicitudes de página (por ejemplo, almacenándolas sin conexión), Cache API para almacenar
respuestas a solicitudes de red sin conexión (muy útil para almacenar activos del sitio) y
tecnologías de almacenamiento de datos del lado del cliente como como Web Storage e
IndexedDB para almacenar datos de aplicaciones sin conexión.
 Soporte de mejora progresiva

Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia
excelente a los navegadores totalmente capaces y una experiencia aceptable (aunque no tan
brillante) a los navegadores menos capaces. Hemos estado haciendo esto durante años con las
mejores prácticas, como la mejora progresiva. Mediante el uso de la mejora progresiva, las PWA
son compatibles con navegadores cruzados. Esto significa que los desarrolladores deben tener en
cuenta las diferencias en la implementación de algunas características y tecnologías de PWA
entre diferentes implementaciones de navegador.
 Reactivación
Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios
pueden volver a interactuar con las actualizaciones y el contenido nuevo, incluso cuando no están
mirando la aplicación o usando sus dispositivos. Las aplicaciones web modernas ahora también
pueden hacer esto, usando nuevas tecnologías como Service Workers para controlar páginas, la
Web Push API para enviar actualizaciones directamente del servidor a la aplicación a través
de un service worker y la API de
Asignatura Carrera
19307042
notificaciones para generar notificaciones del sistema para ayudar a involucrar a los usuarios
cuando no están usando activamente su navegador web.
 Sensibilidad
Las aplicaciones web receptivas utilizan tecnologías como consultas de medios y ventanas
gráficas para asegurarse de que sus interfaces de usuario se ajusten a cualquier factor de forma:
computadora de escritorio, dispositivo móvil, tableta o lo que venga después.
 Seguro
La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y, al

mismo tiempo, garantiza que el contenido no haya sido manipulado, siempre que aproveche
HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad.
También es fácil para los usuarios asegurarse de que están instalando la aplicación correcta,
porque su URL coincidirá con el dominio de su sitio. Esto es muy diferente de las aplicaciones en
las tiendas de aplicaciones, que pueden tener una serie de aplicaciones con nombres similares,
algunas de las cuales incluso pueden estar basadas en su propio sitio, lo que solo aumenta la
confusión. Las aplicaciones web eliminan esa confusión y aseguran que los usuarios obtengan la
mejor experiencia posible.
¿Cuál es la diferencia de una PWA vs Native App?
PWA (aplicación web progresiva)
PWA son las siglas de Progressive Web App (o Aplicación). La PWA es un sitio web
especialmente modificado que ha sido totalmente optimizado para dispositivos móviles.
Asignatura Carrera
19307042
Una PWA es única en el sentido de que puede acceder a herramientas y funciones en el

dispositivo móvil que accede a ella. Esto se hace mediante la integración con el navegador web
y la conexión con la función de destino, como una cámara o una linterna.
Los usuarios móviles pueden acceder a una PWA, sin instalar una aplicación, utilizando un
navegador web y descargar contenido de amor mientras navegan. Esto hace que el desarrollo de
PWA sea más económico que el desarrollo de aplicaciones móviles. Esto se debe a que la PWA
solo se desarrolla en una fase para adaptarse a una amplia gama de dispositivos móviles y los
diferentes sistemas operativos que ejecutan. Aunque suena inteligente, esto generalmente
conduce a importantes problemas de funcionalidad y usabilidad en el futuro, especialmente dado
el rápido ritmo de evolución y actualizaciones que están registrando la mayoría de los sistemas
operativos móviles.
 Ventajas
 Requiere menos tiempo de configuración que las aplicaciones móviles: debido a que el
desarrollo de una PWA solo involucra una etapa, requiere menos tiempo para
completarse. Esta es una buena noticia para aplicaciones rápidas y sencillas, para las que
se puede recomendar una aplicación web progresiva. Los proyectos que tienen plazos
muy cortos pueden utilizar PWA para lograr resultados inmediatos. Es posible que
también desee utilizar una PWA para probar un software específico y determinar la
reacción del mercado.
 Costo más bajo: desarrollo de un PWA en comparación con las aplicaciones móviles que
requieren dos etapas de desarrollo que requieren un conjunto especializado de
herramientas y recursos de desarrollo. Los costos financieros involucrados en el
desarrollo de una PWA también son más bajos, ya que solo necesita un equipo para
trabajar en el proyecto y requiere una sola fase.
Asignatura Carrera
19307042
 Menor requisito de memoria: este no es un gran problema para los dispositivos de gama
alta con una capacidad de memoria masiva. Para los dispositivos menores que tienen que
administrar la asignación de memoria para los archivos multimedia y de respaldo, tener
que eliminar continuamente información importante para dejar espacio para nuevas
aplicaciones puede ser una tarea. PWA proporciona una solución para este problema, ya
que los usuarios no necesitan descargar datos de la aplicación para acceder a ellos.
 Velocidad de acceso: cuanto más grande sea la aplicación, más tardará en iniciarse. PWA
proporciona un acceso más rápido que solo está restringido por la velocidad de su
conexión a Internet. También para los recién llegados, PWA elimina el retraso debido a la
instalación.
 Posicionamiento en buscadores: una aplicación web progresiva sigue siendo

esencialmente un sitio web y, como tal, está optimizada para los motores de búsqueda.
Esto significa que es más probable que las consultas de búsqueda muestren primero los
resultados de PWA, esto mejoraría la presencia en línea y aumentaría la popularidad entre
los usuarios.
 Desventajas
 Dependencia de la conexión a Internet: dependiendo de su ubicación, y una conexión a
Internet disponible puede ser un límite para la usabilidad y accesibilidad de una aplicación
web progresiva. Para proporcionar una pantalla a los clientes durante la exposición,
también deberá proporcionar una conexión a Internet adecuada.
 Compatibilidad del navegador web: aunque no tan variados como los sistemas operativos,
los navegadores web tienen sus complejidades. No todos los navegadores web admiten
aplicaciones web progresivas. La incompatibilidad con
Asignatura Carrera
19307042
un navegador web haría que los usuarios experimentaran errores, fallas y problemas
de rendimiento.
 Funcionalidad reducida: dado que una PWA está diseñada para adaptarse ampliamente a
teléfonos inteligentes a través de navegadores web, una sola diferencia invalidaría su
conexión con las funciones del teléfono. Esto reduce la versatilidad y la funcionalidad en
comparación con las aplicaciones móviles. Un ejemplo importante es la función Bluetooth
que es inaccesible para una PWA.
 Rentabilidad: También es casi imposible configurar correctamente las transacciones

dentro de la aplicación con una PWA. Esto hace que sea imposible monetizar, algo que se
hace fácilmente con una aplicación móvil.
 Mala interfaz y experiencia de usuario: Debido a las muchas diferencias, los usuarios
encontrarán numerosos fallos al utilizar una PWA. El diseño y la maniobrabilidad de la
interfaz también son deficientes en comparación con las aplicaciones móviles.
Aplicaciones móviles nativas

Las aplicaciones móviles nativas se desarrollan y diseñan específicamente para el dispositivo
móvil y el sistema operativo. Debido al paso adicional en el diseño, las aplicaciones móviles se
adaptan más a los matices únicos de un determinado dispositivo y sistema operativo. Las
aplicaciones móviles generalmente se desarrollan en etapas, para tener en cuenta los dos sistemas
operativos utilizados popularmente por los teléfonos inteligentes. Dependiendo del tipo de
aplicación y su mercado objetivo, la versión de Android se diseña primero debido a la mayor
cantidad de usuarios de Android.
Asignatura Carrera
19307042
Después de eso, la versión de iOS se desarrolla para atender a los usuarios de teléfonos
inteligentes de Apple. El desarrollo de aplicaciones móviles requiere más tiempo y recursos y
cuesta más. Por otro lado, las aplicaciones móviles obtienen más usabilidad, funcionalidad,
cumplimiento de UX, singularidad e integración entre aplicaciones porque cada versión está
optimizada de manera única para adaptarse a un dispositivo de destino específico. Para utilizar
una aplicación móvil, el usuario debe descargar e instalar la versión de la aplicación requerida y
todo su contenido desde la App Store (es decir, Apple Store para dispositivos iOS y Google Play
para usuarios de Android).
 Ventajas
 Mejor seguridad: aunque una PWA puede utilizar URL cifradas, los dispositivos móviles
proporcionan rutas de acceso más fiables.
 Mejor interfaz y experiencia de usuario: Las aplicaciones móviles nativas brindan más en
términos de gráficos creativos, animación y mejor maniobrabilidad. La experiencia del
usuario aumenta con más configuraciones de personalización.
 Integración de la aplicación: a diferencia de una PWA, una aplicación móvil no solo

puede interactuar con las funciones del teléfono, sino también comunicarse con otras
aplicaciones móviles en el teléfono.
 Acceso a las funciones del teléfono: Las aplicaciones móviles pueden acceder fácilmente
a cualquier función del teléfono para la que estén diseñadas. La especialización le permite
integrarse correctamente con su sistema operativo sin fallas o problemas de rendimiento.
Conclusión
Aunque una PWA puede ser más barata y rápida de armar, ofrece menos opciones que una
aplicación móvil. La aplicación móvil le permite hacerlo bien la primera vez y garantiza
Asignatura Carrera
19307042
la satisfacción del usuario a largo plazo. Hasta que el futuro traiga un desarrollo sustancial,
consideramos la aplicación web progresiva como la opción deficiente.
Responde a las siguiente preguntas:

En lista y detalla dos ejemplos cotidianos de Aplicaciones Web
Progresivas (PWA).
1. AliExpress
Aunque AliExpress tiene una aplicación nativa propia, también existe la posibilidad de usarla
como PWA. Visitar esta la web de AliExpress es como usar cualquier otra aplicación o página
web, pero con la gran diferencia de que hay la posibilidad de hacer compras online de todo lo que
se encuentra durante la navegación. Esta tienda asiática tiene una de las mejores PWA que se
puede dar el uso. La plataforma es muy sencilla, el diseño es amigable y, lo mejor de todo, tienen
20 puntos en usabilidad.
2. Telegram
Otra web muy conocida es Telegram, uno de los pocos servicios de mensajería que ha apostado
por una PWA y al que le ha ido genial. Los usuarios que tienen Telegram no notan la diferencia
para nada de esta aplicación en su formato web progresivo que en su formato app nativa y eso es
una ventaja bastante importante. Difusiones, foros, envío de archivos, llamadas, chat, todo sigue
intacto y muy funcional.
3. Dev.to
Dev.to es una popular plataforma de blogs para desarrolladores web. A pesar de su popularidad,
no se incluye en la mayoría de los ejemplos de PWA, lo que resulta
Asignatura Carrera
19307042
sorprendente si cuando se trata de la alta puntuación de la aplicación web, con un 100 en

progresividad y 90 en rendimiento.
Es importante saber que las plataformas de blogs y noticias son una de las aplicaciones web más
difíciles de optimizar, ya que están llenas de información textual y visual aportada por diferentes
usuarios. Sin embargo, Dev.to ha demostrado que todavía es posible que un blog popular tenga
un PWA de alto rendimiento.
4. Flipboard
Flipboard es la aplicación web progresiva para todos los que quieren estar informados de los
últimos acontecimientos del mundo ya que es una aplicación web sobre noticias y novedades.
Esta red social solía ser muy lenta al usarla en el móvil en formato app nativa, ya que está
cargada de contenido; sin embargo, su nuevo formato PWA funciona rápido y con pocos
recursos, así que se puede navegar a través de ella sin ningún tipo de problema.
5. Twitter
En 2017, Twitter decidió realizar una PWA para rejuvenecer su tecnología y ofrecer un formato
más rápido. La razón por la que se decidió llevar a cabo fue porque siempre había sido una
aplicación pesada que necesitaba muchos recursos del móvil para funcionar correctamente. Sin
embargo, sigue existiendo la app nativa para aquellos que quieran seguir usándola.
La organización, sabiendo el problema que ocurría, lanzó una versión más ligera para que los
móviles menos potentes puedan soportarla y ejecutarla de forma correcta: Twitter lite. Esta
aplicación web progresiva es todo lo que muchos usuarios de Twitter estaban esperando: carga
videos e imágenes de forma rápida, se actualiza de manera veloz pero conserva la apariencia de la
App Nativa.
Asignatura Carrera
19307042
¿Cuáles crees (si tuvieras que realizar una PWA) que serían los
escenarios de implementación para el uso de Aplicaciones Web
Progresivas (PWA), detalla tres posibles escenarios?
 Usar el almacenamiento en caché para mejorar PWA rendimiento

Con la introducción de los trabajadores de servicio, la plataforma web agregó la Cache
API para proporcionar acceso a los recursos almacenados en caché administrados. Esta API
basada en Promesa permite a los desarrolladores almacenar y recuperar muchos recursos web(
HTML, CSS, JavaScript, imágenes, JSON, entre otros). Normalmente, la API de caché se usa en
el contexto de un trabajador de servicio, pero también está disponible en el subproceso principal
del window objeto.
Un uso común para la Cache API es almacenar previamente en caché los recursos críticos cuando
se instala un trabajador de servicio, como se muestra en el código siguiente.
self.addEventListener( "install", function( event ){
event.waitUntil(
caches.open( "static-cache" )
.then(function( cache ){
return cache.addAll([
"/css/main.css",
"/js/main.js",
Asignatura Carrera
19307042
"/img/favicon.png",
"/offline/"
]);
})
);
});
El código anterior se ejecuta durante el evento del ciclo de install vida del trabajador de servicio y
abre una memoria caché denominada static-cache. Cuando tiene un puntero a la memoria caché,
agrega cuatro recursos a la memoria caché mediante el método addAll() .
El enfoque anterior suele combinarse con la recuperación de caché durante un fetch

evento, como se muestra a continuación:
self.addEventListener( "fetch", event => {
const request = event.request;
const url = request.url;
// If we are requesting an HTML page.
if ( request.headers.get("Accept").includes("text/html") ) {
event.respondWith(
// Check the cache first to see if the asset exists, and if it does,
// return the cached asset.
caches.match( request )
Asignatura Carrera
19307042
.then( cached_result => { if
( cached_result ) {
return cached_result;
// If the asset isn't in the cache, fall back to a network request
// for the asset, and proceed to cache the result. return
fetch( request )
.then( response => {
const copy = response.clone();
// Wait until the response we received is added to the cache. event.waitUntil(
caches.open( "pages" )
.then( cache => {
return cache.put( request, response );
});
);
return response;
})
// If the network is unavailable to make a request, pull the offline
// page out of the cache.
.catch(() => caches.match( "/offline/" ));
Asignatura Carrera
19307042
})
); // end respondWith
} // end if HTML
});
El código anterior se ejecuta en el trabajador de servicio siempre que el explorador realiza una
fetch solicitud para este sitio. Dentro de ese evento, hay una instrucción condicional que se
ejecuta si la solicitud es para un archivo HTML. El trabajador de servicio comprueba si el
archivo ya existe en cualquier caché mediante el método match() :
Si la solicitud existe en la memoria caché, se devuelve el resultado almacenado en caché.
Si la solicitud no existe en la memoria caché, fetch se ejecuta una nueva para ese recurso, se
almacena en caché una copia de la respuesta para más adelante y se devuelve la respuesta.
Si se produce fetch un error porque la red no está disponible, la página sin conexión se devuelve
de la memoria caché.
Esta sencilla introducción muestra cómo usar el almacenamiento en caché en la aplicación web
progresiva (PWA). Cada PWA es diferente y puede usar diferentes estrategias de
almacenamiento en caché. El código puede tener un aspecto diferente y puede usar diferentes
estrategias de almacenamiento en caché para distintas rutas dentro de la misma aplicación.
 Usar IndexedDB en su PWA almacenar datos estructurados
IndexedDB es una API para almacenar datos estructurados. Al igual que la Cache API, también
es asincrónica. Esto significa que puede usarlo en el subproceso principal o con trabajadores web,
como trabajadores de servicio. Use la IndexedDB API para almacenar
Asignatura Carrera
19307042
una cantidad significativa de datos estructurados en el cliente o datos binarios, como objetos
multimedia cifrados. Consulte MDN primer on using IndexedDB
 Service Workers
Constituyen una tecnología muy interesante, a la par que compleja, orientada a ejecutar servicios
en segundo plano cuando utilizas un navegador.
Un Web Worker te permite ejecutar código pesado en segundo plano mientras utilizas un
navegador para que la interfaz no se bloquee y puedas seguir trabajando con ella.
Los Service Workers van un paso más allá y ejecutan tareas de forma independiente. De esta
forma, aunque hayas cerrado la aplicación del navegador, seguirá trabajando con capacidades
avanzadas como el envío de notificaciones, la descarga de contenidos en segundo plano o el
cacheado de la información.
En realidad, las funcionalidades que ofrecen los Service Workers ni siquiera serían necesarias
para el funcionamiento de muchas apps. Sin embargo, su desarrollo es un precedente para el
futuro de apps más ambiciosas.
Actualmente, y como te comentábamos un poco antes, los únicos navegadores que permiten el
uso de Service Workers son Chrome y Firefox (en su versión de escritorio, PC). En el caso de los
móviles, el único navegador capaz de soportar esta tecnología es Chrome v.51.
Si querías que la PWA funcionase igualmente en iOS, Windows Phone o teléfonos Android algo
antiguos, sentimos comunicarte que todavía no está disponible.
 App Shell
No constituye una tecnología en sí misma, sino un patrón para separar las funcionalidades del
contenido y cargarlos de forma separada.
Asignatura Carrera
19307042
Lo idóneo consiste en que las aplicaciones se encuentren cacheadas para usar fuera de línea
(cargando rápidamente la interfaz y los elementos visuales fijos) y que el contenido (fotos,
vídeos, documentos, etc) se carguen aparte (bien utilizando un caché inicial o a través de la web
cuando haya conexión).
El App Shell ayudaría por tanto a un proceso de carga veloz, la piedra angular de toda aplicación
debido a la impaciencia que nos caracteriza como seres humanos.
 Manifiesto de aplicación
Es la última parte de la cadena que consolida el desarrollo de las PWAs.
Como os explicamos al inicio de este artículo, desde el inicio de la era smartphone puedes anclar
una página web concreta del navegador al menú inicio para acceder directamente a ella (como si
fuese una aplicación normal y corriente).
Para definir el aspecto visual del icono resultante cada navegador y sistema operativo utiliza
técnicas diferentes.
En iOs y Windows Phone se utilizan cabeceras “meta” que se añaden a la pantalla principal. En
Chrome para Android, y solo para Android, se usa un archivo llamado “Manifiesto” que está
operativo desde la v.38 de 2014.
Asignatura Carrera
19307042
Bibliografía
Aplicaciones Web Progresivas | MDN. (2022, 14 agosto). Recuperado 18 de septiembre de 2022,
de https://developer.mozilla.org/es/docs/Web/Progressive_web_apps
Cstillo., A. (2020, 3 febrero). PWA vs aplicación nativa. cynoteck. Recuperado 18 de septiembre
de 2022, de https://cynoteck.com/es/blog-post/pwa-vs-native-app-comparing-cost-and-
long-term-usability/
Introduction to progressive web apps - Progressive web apps (PWAs) | MDN. (2022, 9
septiembre). Recuperado 18 de septiembre de 2022, de https://developer.mozilla.org/en-
US/docs/Web/Progressive_web_apps/Introduction#browser_support
L., O. (2021, 2 enero). Ejemplos de aplicaciones web progresivas. sirvelia. Recuperado 18 de
septiembre de 2022, de https://sirvelia.com/ejemplos-aplicaciones-web-progresivas/
Microsof. (2022, 11 marzo). Escenarios sin conexión. Recuperado 18 de septiembre de 2022,
de https://learn.microsoft.com/es-es/microsoft-edge/progressive-web-apps-chromium/
how- to/offline
Asignatura Carrera
19307042
S., S. (2020, 6 julio). Tecnologías que aprovechan las PWA. Evoluciona. Recuperado 18 de
septiembre de 2022, de https://www.evoluciona.com/aplicaciones-web-progresivas/#gref
Asignatura Carrera

U1. Tarea 1 v2022

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

U1. Tarea 1 v2022

Cargado por

Copyright:

Formatos disponibles

Datos del Alumno Fecha

Nombre completo Matrícula

¿Qué es una Aplicación Web Progresiva PWA (Progressive

No es un concepto completamente nuevo: estas ideas se han revisado muchas veces en la

¿Qué características y ventajas tiene una PWA?

Contexto seguro (en-US) (HTTPS)

Controla lo que se muestra al usuario en situaciones donde no hay conectividad.

 Soporte de mejora progresiva

La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y, al

¿Cuál es la diferencia de una PWA vs Native App?

PWA (aplicación web progresiva)

Una PWA es única en el sentido de que puede acceder a herramientas y funciones en el

 Posicionamiento en buscadores: una aplicación web progresiva sigue siendo

 Rentabilidad: También es casi imposible configurar correctamente las transacciones

Aplicaciones móviles nativas

 Integración de la aplicación: a diferencia de una PWA, una aplicación móvil no solo

Responde a las siguiente preguntas:

sorprendente si cuando se trata de la alta puntuación de la aplicación web, con un 100 en

 Usar el almacenamiento en caché para mejorar PWA rendimiento

self.addEventListener( "install", function( event ){

El enfoque anterior suele combinarse con la recuperación de caché durante un fetch

self.addEventListener( "fetch", event => {

const request = event.request;

const url = request.url;

// If we are requesting an HTML page.

// return the cached asset.

.then( cached_result => { if

// If the asset isn't in the cache, fall back to a network request

// for the asset, and proceed to cache the result. return

.then( response => {

const copy = response.clone();

// Wait until the response we received is added to the cache. event.waitUntil(

.then( cache => {

return cache.put( request, response );

// If the network is unavailable to make a request, pull the offline

// page out of the cache.

.catch(() => caches.match( "/offline/" ));

Si la solicitud existe en la memoria caché, se devuelve el resultado almacenado en caché.

 Usar IndexedDB en su PWA almacenar datos estructurados

Es la última parte de la cadena que consolida el desarrollo de las PWAs.

Cstillo., A. (2020, 3 febrero). PWA vs aplicación nativa. cynoteck. Recuperado 18 de septiembre

septiembre). Recuperado 18 de septiembre de 2022, de https://developer.mozilla.org/en-

L., O. (2021, 2 enero). Ejemplos de aplicaciones web progresivas. sirvelia. Recuperado 18 de

septiembre de 2022, de https://sirvelia.com/ejemplos-aplicaciones-web-progresivas/

Microsof. (2022, 11 marzo). Escenarios sin conexión. Recuperado 18 de septiembre de 2022,

septiembre de 2022, de https://www.evoluciona.com/aplicaciones-web-progresivas/#gref

También podría gustarte