Aplicación web progresiva
Forma específica de aplicación web de página única
Logotipo de PWA

Una aplicación web progresiva ( PWA ), o aplicación web progresiva , es un tipo de aplicación web que se puede instalar en un dispositivo como una aplicación independiente . [1] Las PWA se instalan utilizando el caché sin conexión del navegador web del dispositivo . [2]

Las PWA se introdujeron en 2016 como una alternativa a las aplicaciones nativas (específicas del dispositivo), con la ventaja de que no requieren una distribución o empaquetamiento por separado para diferentes plataformas. Se pueden utilizar en una variedad de sistemas diferentes, incluidos los dispositivos móviles y de escritorio . La publicación de la aplicación en sistemas de distribución digital como Apple App Store o Google Play es opcional. [2]

Debido a que una PWA se entrega en forma de una página web o sitio web creado con tecnologías web comunes, como HTML , CSS , JavaScript y WebAssembly , [3] puede funcionar en cualquier plataforma con un navegador compatible con PWA. A partir de 2021, las funciones de PWA son compatibles en distintos grados con Google Chrome , Apple Safari , Firefox para Android y Microsoft Edge [4] [5], pero no con Firefox para escritorio. [6]

Historia

Antecesores

En la Conferencia Mundial de Desarrolladores de Apple de 2007, Steve Jobs anunció que el iPhone "ejecutaría aplicaciones creadas con estándares de Internet Web 2.0". [7] No se requirió ningún kit de desarrollo de software (SDK), y las aplicaciones se integrarían completamente en el dispositivo a través del motor del navegador Safari . [8] Este modelo se trasladó más tarde a la App Store , como un medio para apaciguar a los desarrolladores frustrados. [9] En octubre de 2007, Jobs anunció que se lanzaría un SDK al año siguiente. [8] Como resultado, aunque Apple continuó dando soporte a las aplicaciones web, la gran mayoría de las aplicaciones de iOS se trasladaron a la App Store.

A principios de la década de 2010, las páginas web dinámicas permitieron que se utilizaran tecnologías web para crear aplicaciones web interactivas . El diseño web adaptable y la flexibilidad del tamaño de pantalla que proporciona han hecho que el desarrollo de PWA sea más accesible. Las mejoras continuas de HTML, CSS y JavaScript permitieron que las aplicaciones web incorporaran mayores niveles de interactividad, lo que hizo posible experiencias similares a las nativas en un sitio web. [10]

En 2013, Mozilla lanzó Firefox OS . Su objetivo era ser un sistema operativo de código abierto para ejecutar aplicaciones web como aplicaciones nativas en dispositivos móviles. Firefox OS se basaba en el motor de renderizado Gecko con una interfaz de usuario llamada Gaia, escrita en HTML5. El desarrollo de Firefox OS finalizó en 2016, [11] y el proyecto se interrumpió por completo en 2017, [12] aunque se utilizó una bifurcación de Firefox OS como base de KaiOS , una plataforma de teléfonos con funciones. [13]

Introducción inicial

En 2015, la diseñadora Frances Berriman y el ingeniero de Google Chrome Alex Russell acuñaron el término "aplicaciones web progresivas" [14] para describir las aplicaciones que aprovechan las nuevas funciones compatibles con los navegadores modernos, incluidos los trabajadores de servicios y los manifiestos de aplicaciones web , que permiten a los usuarios actualizar las aplicaciones web a aplicaciones web progresivas en su sistema operativo (OS) nativo. Luego, Google realizó importantes esfuerzos para promover el desarrollo de PWA para Android. [15] [16] Firefox introdujo soporte para trabajadores de servicios en 2016, y Microsoft Edge y Apple Safari lo siguieron en 2018, [17] [15] haciendo que los trabajadores de servicios estén disponibles en todos los sistemas principales.

En 2019, las PWA eran compatibles con las versiones de escritorio de la mayoría de los navegadores, incluidos Microsoft Edge [18] (en Windows ) y Google Chrome [19] (en Windows, macOS , ChromeOS y Linux ).

En diciembre de 2020, Firefox para escritorio abandonó la implementación de las PWA (específicamente, eliminó la configuración del prototipo de " navegador específico del sitio " que había estado disponible como una función experimental). Un arquitecto de Firefox señaló: "La señal que espero que estemos enviando es que la compatibilidad con PWA no llegará pronto a Firefox para escritorio". [6] Mozilla aún planea admitir PWA en Android. [20]

Compatibilidad con navegadores

NavegadorApoyoComentario
VentanasmacOSLinuxAndroideiOS y iPadOS
Basado en cromoSíSíSíSí—Incluye Google Chrome , Microsoft Edge , [18] Brave , Opera , Vivaldi , [21] y otros .
FirefoxNo [6]No [6]No [6]ParcialNo
Safari—Parcial [22]——Parcial [23]

Características

Las aplicaciones web progresivas están diseñadas para funcionar en cualquier navegador que cumpla con los estándares web apropiados . Al igual que con otras soluciones multiplataforma, el objetivo es ayudar a los desarrolladores a crear aplicaciones multiplataforma con mayor facilidad que con las aplicaciones nativas. [15] Las aplicaciones web progresivas emplean la estrategia de desarrollo web de mejora progresiva .

Algunas aplicaciones web progresivas utilizan un enfoque arquitectónico llamado App Shell Model. [24] En este modelo, los trabajadores de servicio almacenan la interfaz básica de usuario o " shell " de la aplicación web de diseño web responsivo en la memoria caché sin conexión del navegador . Este modelo permite que las PWA mantengan un uso similar al nativo con o sin conectividad web. Esto puede mejorar el tiempo de carga, al proporcionar un marco estático inicial , un diseño o arquitectura en el que se puede cargar el contenido de forma progresiva y dinámica. [25]

Criterios técnicos

Los criterios técnicos básicos para que un sitio se considere una aplicación web progresiva y, por lo tanto, pueda ser instalada por los navegadores fueron descritos por Russell en 2016 [26] y actualizados desde entonces: [27] [28]

  • Proceden de un origen seguro. Se entregan a través de TLS y no tienen contenido mixto activo. Las aplicaciones web progresivas deben entregarse a través de HTTPS para garantizar la privacidad y la seguridad del usuario y la autenticidad del contenido.
  • Registrar un service worker con un controlador de búsqueda. Las aplicaciones web progresivas deben usar service workers para crear cachés de contenido programables. A diferencia de los cachés web HTTP normales , que almacenan el contenido en caché después del primer uso y luego se basan en varias heurísticas para adivinar cuándo el contenido ya no es necesario, los cachés programables pueden buscar contenido de manera explícita por adelantado antes de que se use por primera vez y descartarlo explícitamente cuando ya no es necesario. [29] Este requisito ayuda a que las páginas sean accesibles sin conexión o en redes de baja calidad.
  • Hacer referencia a un manifiesto de aplicación web . El manifiesto debe contener al menos las cinco propiedades clave: nameo short_name, start_url, y display(con un valor de standalone, fullscreeno minimal-ui), y icons(con versiones de 192 px y 512 px). La información contenida en el manifiesto hace que las PWA se puedan compartir fácilmente a través de una URL, que los motores de búsqueda las detecten y alivia los procedimientos de instalación complejos (pero las PWA aún pueden aparecer en una tienda de aplicaciones de terceros ). [30] Además, las PWA admiten interacciones y navegación nativas de estilo de aplicación, incluida la adición a la pantalla de inicio , la visualización de pantallas de presentación , etc.

Tecnologías

Existen muchas tecnologías que se utilizan comúnmente para crear aplicaciones web progresivas. Una aplicación web se considera una PWA si cumple con los criterios de instalación, por lo que puede funcionar sin conexión y se puede agregar a la pantalla de inicio del dispositivo. Para cumplir con esta definición, todas las PWA requieren como mínimo un manifiesto y un service worker. [31] [32] [33] Se pueden utilizar otras tecnologías para almacenar datos, comunicarse con servidores o ejecutar código.

Manifiesto

El manifiesto de la aplicación web [34] es una especificación del Consorcio World Wide Web (W3C) que define un manifiesto basado en JSON (normalmente denominado manifest.json) [30] para proporcionar a los desarrolladores un lugar centralizado donde colocar metadatos asociados con una aplicación web, incluidos:

  • El nombre de la aplicación web
  • Enlaces a los iconos de la aplicación web o a objetos de imagen
  • La URL preferida para iniciar o abrir la aplicación web
  • Los datos de configuración de la aplicación web
  • Orientación predeterminada de la aplicación web
  • La opción de configurar el modo de visualización, por ejemplo, pantalla completa.

Estos metadatos son cruciales para que una aplicación se agregue a una pantalla de inicio o aparezca junto a las aplicaciones nativas.

Compatibilidad con iOS

Safari para iOS implementa parcialmente los manifiestos, mientras que la mayoría de los metadatos de la PWA se pueden definir a través de extensiones específicas de Apple para las metaetiquetas. Estas etiquetas permiten a los desarrolladores habilitar la visualización en pantalla completa, definir íconos y pantallas de presentación y especificar un nombre para la aplicación. [35] [36]

Trabajadores de servicios

Un service worker es un web worker que implementa un proxy de red programable que puede responder a solicitudes web/HTTP del documento principal. Es capaz de comprobar la disponibilidad de un servidor remoto, almacenar en caché el contenido cuando ese servidor está disponible y servir ese contenido más tarde al documento. Los service workers, como cualquier otro web worker, trabajan independientemente del contexto del documento principal. Los service workers pueden manejar notificaciones push y sincronizar datos en segundo plano, almacenar en caché o recuperar solicitudes de recursos, interceptar solicitudes de red y recibir actualizaciones centralizadas independientemente del documento que las registró, incluso cuando ese documento no está cargado. [37]

Los service workers pasan por un ciclo de vida de tres pasos: registro, instalación y activación. El registro implica indicar al navegador la ubicación del service worker en preparación para la instalación. La instalación se produce cuando no hay ningún service worker instalado en el navegador para la aplicación web o si hay una actualización del service worker. La activación se produce cuando se cierran todas las páginas de la PWA, de modo que no haya ningún conflicto entre la versión anterior y la actualizada. El ciclo de vida también ayuda a mantener la coherencia al cambiar entre versiones de un service worker, ya que solo un único service worker puede estar activo para un dominio. [37]

WebAsamblea

WebAssembly permite ejecutar código precompilado en un navegador web a una velocidad casi nativa. [38] De esta forma, se pueden añadir bibliotecas escritas en lenguajes como C a las aplicaciones web. Anunciado en 2015 y lanzado por primera vez en marzo de 2017, WebAssembly se convirtió en una recomendación del W3C el 5 de diciembre de 2019 [39] [40] [41] y recibió el premio al mejor software de lenguajes de programación de ACM SIGPLAN en 2021. [42]

Almacenamiento de datos

Los contextos de ejecución de aplicaciones web progresivas se descargan siempre que sea posible, por lo que las aplicaciones web progresivas necesitan almacenar la mayor parte de su estado interno a largo plazo (datos del usuario, recursos de la aplicación cargados dinámicamente) de una de las siguientes maneras:

Almacenamiento web
Web Storage es una API estándar del W3C que permite el almacenamiento de claves y valores en los navegadores modernos. La API consta de dos objetos: sessionStorage (que permite el almacenamiento exclusivo de sesiones que se borra al finalizar la sesión del navegador) y localStorage (que permite el almacenamiento que persiste entre sesiones). [43]
API de base de datos indexada
La API de base de datos indexada es una API de base de datos estándar del W3C disponible en todos los navegadores principales. La API es compatible con los navegadores modernos y permite el almacenamiento de objetos JSON y cualquier estructura representable como una cadena. [44] La API de base de datos indexada se puede utilizar con una biblioteca contenedora que proporcione construcciones adicionales a su alrededor.

Comparación con aplicaciones nativas

En 2017, Twitter lanzó Twitter Lite, una alternativa de PWA a las aplicaciones nativas oficiales de Android e iOS . Según Twitter, Twitter Lite consumía solo entre el 1 y el 3 % del tamaño de las aplicaciones nativas. [45] Starbucks ofrece una PWA que es un 99,84 % más pequeña que su aplicación equivalente para iOS. Después de implementar su PWA, Starbucks duplicó la cantidad de pedidos en línea, y los usuarios de computadoras de escritorio realizaron pedidos aproximadamente al mismo ritmo que los usuarios de la aplicación móvil. [46]

Una revisión de 2018 publicada por Forbes encontró que los usuarios de la PWA de Pinterest pasaron un 40% más de tiempo en el sitio en comparación con el sitio web móvil anterior. Las tasas de ingresos por publicidad también aumentaron en un 44% y las interacciones principales en un 60%. [47] Flipkart vio que el 60% de los clientes que habían desinstalado su aplicación nativa volvieron a usar la PWA de Flipkart. Lancôme vio una disminución del 84% en el tiempo hasta que la página es interactiva, lo que genera un aumento del 17% en las conversiones y un aumento del 53% en las sesiones móviles en iOS con su PWA. [48]

Lanzamiento a través de tiendas de aplicaciones

Dado que una PWA no requiere una distribución o empaquetamiento por separado para diferentes plataformas y está disponible para los usuarios a través de la web, no es necesario que los desarrolladores la publiquen en sistemas de distribución digital como Apple App Store , Google Play , Microsoft Store o Samsung Galaxy Store . Las principales tiendas de aplicaciones admiten la publicación de PWA en distintos grados. [2] Google Play, Microsoft Store, [49] y Samsung Galaxy Store admiten PWA, pero Apple App Store no. Microsoft Store publica automáticamente algunas PWA que califican (incluso sin solicitudes de los autores de la aplicación) después de descubrirlas a través de la indexación de Bing . [50]

Véase también

  • Google Lighthouse , una herramienta de auditoría de código abierto para PWA desarrollada por Google

Referencias

  1. ^ "¿Qué son las aplicaciones web progresivas? Guía de PWA para principiantes". freeCodeCamp.org . 2024-01-18 . Consultado el 2024-05-06 .
  2. ^ abc "Aplicaciones web progresivas | Software AG". techradar.softwareag.com . Consultado el 25 de septiembre de 2020 .
  3. ^ Ltd, Cybellium. Dominando el desarrollo front-end. Cybellium Ltd. pág. 273. ISBN 979-8-8668-4882-9.
  4. ^ "¿Puedo usar PWA?". CanIUse . Consultado el 27 de enero de 2021 .
  5. ^ "¿Está listo el Service Worker?". Jake Archibald.
  6. ^ abcde Newman, Jared (26 de enero de 2021). "Firefox acaba de abandonar una pieza clave de la web abierta". Fast Company . Consultado el 27 de enero de 2021 .
  7. ^ Jobs, Steve; Apple (11 de junio de 2007). "El iPhone soportará aplicaciones Web 2.0 de terceros". Apple .
  8. ^ ab Ritchie, Rene (5 de marzo de 2018). "App Store Year Zero: Unsweet web apps drove iPhone to an SDK" (El año cero de la App Store: las aplicaciones web poco atractivas llevaron al iPhone a utilizar un SDK). iMore . Consultado el 23 de mayo de 2019 .
  9. ^ "La visión original de Jobs para el iPhone: no hay aplicaciones nativas de terceros". 9to5Mac . 21 de octubre de 2011 . Consultado el 22 de mayo de 2019 .
  10. ^ Marcotte, Ethan (25 de mayo de 2010). "Diseño web adaptable". A List Apart . Consultado el 25 de mayo de 2010 .
  11. ^ "Mozilla pone fin al desarrollo comercial del sistema operativo Firefox - gHacks Tech News". gHacks Technology News . 2016-09-27 . Consultado el 2022-05-05 .
  12. ^ Hoffman, Chris; PCWorld | (28 de septiembre de 2016). «Mozilla está deteniendo todo desarrollo comercial en Firefox OS». PCWorld . Consultado el 17 de marzo de 2021 .
  13. ^ "KaiOS, una plataforma de teléfonos con funciones creada sobre las cenizas de Firefox OS, agrega aplicaciones de Facebook, Twitter y Google". TechCrunch . 26 de febrero de 2018 . Consultado el 17 de marzo de 2021 .
  14. ^ Russell, Alex. "Aplicaciones web progresivas: cómo escapar de las pestañas sin perder el alma" . Consultado el 15 de junio de 2015 .
  15. ^ abc Evans, Jonny (26 de enero de 2018). «Apple vuelve al futuro con aplicaciones web». Computerworld . Consultado el 23 de mayo de 2019 .
  16. ^ Ladage, Aaron (17 de abril de 2018). "Las aplicaciones web progresivas ya están aquí y están cambiando todo". DEG . Consultado el 23 de mayo de 2019 .
  17. ^ "¿Puedo usar... Tablas de soporte para HTML5, CSS3, etc."? caniuse.com . Consultado el 16 de mayo de 2021 .
  18. ^ ab "Descripción general de las aplicaciones web progresivas en Windows". Documentación de Microsoft Edge . 13 de marzo de 2021 . Consultado el 13 de marzo de 2021 .
  19. ^ LePage, Pete (4 de junio de 2019). "Aplicaciones web progresivas en el escritorio". Google Developers . Consultado el 13 de septiembre de 2019 .
  20. ^ agi90 (19 de diciembre de 2020). "Comentario". Reddit . No tenemos planes de eliminar las PWA en dispositivos móviles, que yo sepa.{{cite web}}: CS1 maint: nombres numéricos: lista de autores ( enlace )
  21. ^ "Consigue tu PWA". Navegador Vivaldi . 2021-10-07 . Consultado el 2021-10-11 .
  22. ^ Angle, Patrick; Avenard, Jean-Yves; Caceres, Marcos; Cannon, Ada Rose; Carlson, Eric; Davidson, Garrett; Davis, Jon; Dubost, Karl; Eidson, Brady (6 de junio de 2023). "Novedades de la WWDC23: Funciones de WebKit en la versión beta de Safari 17". WebKit . Consultado el 14 de junio de 2023 .
  23. ^ Angle, Patrick; Caceres, Marcos; Caliman, Razvan; Davis, Jon; Eidson, Brady; Hatcher, Timothy; Niwa, Ryosuke; Simmons, Jen (2023-03-27). «Funciones de WebKit en Safari 16.4». WebKit . Consultado el 2023-06-14 .
  24. ^ "El modelo de App Shell".
  25. ^ Osmani, Addi. "El modelo de App Shell | Fundamentos de la Web". Google Developers . Consultado el 23 de mayo de 2019 .
  26. ^ Russell, Alex. "Qué es exactamente lo que hace que una aplicación web progresiva sea una aplicación" . Consultado el 18 de octubre de 2016 .
  27. ^ "¿Qué se necesita para que sea instalable?". web.dev . Consultado el 19 de mayo de 2021 .
  28. ^ "Aplicación web progresiva". web.dev . Consultado el 15 de junio de 2015 .
  29. ^ "Almacenamiento en caché de Service Workers y almacenamiento en caché HTTP". web.dev . Consultado el 19 de mayo de 2021 .
  30. ^ ab W3C "Web App Manifest", Borrador de trabajo, recuperado el 12 de septiembre de 2016.
  31. ^ "Descubrible". Red de desarrolladores de Mozilla . Consultado el 24 de abril de 2017 .
  32. ^ "Independiente de la red". Red de desarrolladores de Mozilla . Consultado el 24 de abril de 2017 .
  33. ^ "Aplicaciones web de carga instantánea con una arquitectura de shell de aplicación". Google Developers . Consultado el 24 de abril de 2017 .
  34. ^ "Documentación del manifiesto web en MDN". Documentación web de MDN .
  35. ^ "Novedades de iOS 12.2 para aplicaciones web progresivas". Medium . 27 de marzo de 2019.
  36. ^ "Configuración de aplicaciones web". Guía de contenido web de Safari .
  37. ^ ab "Introducción a Service Worker | Web". Google Developers . 1 de mayo de 2019 . Consultado el 23 de mayo de 2019 .
  38. ^ "Conceptos de WebAssembly". MDN . Consultado el 14 de agosto de 2018 .
  39. ^ Consorcio World Wide Web. «Especificación básica de WebAssembly». Consorcio World Wide Web (W3) . Consultado el 6 de mayo de 2024 .
  40. ^ "WebAssembly 1.0 se convierte en una recomendación del W3C y el cuarto lenguaje que se ejecuta de forma nativa en los navegadores". InfoQ . Consultado el 6 de mayo de 2024 .
  41. ^ Kantha Nguyen (1 de mayo de 2022). "Home Nest" . Consultado el 6 de mayo de 2024 .
  42. ^ "Premio de software de lenguajes de programación". www.sigplan.org . Consultado el 6 de mayo de 2024 .
  43. ^ "Web Storage API". MDN . Consultado el 14 de agosto de 2018 .
  44. ^ "Conceptos detrás de IndexedDB". MDN . Consultado el 14 de agosto de 2018 .
  45. ^ Shankland, Stephen (30 de julio de 2020). "La aplicación de Twitter está ayudando a evitar que los teléfonos estrangulen la web". CNET . Consultado el 11 de febrero de 2023 .
  46. ^ "Los 12 mejores ejemplos de aplicaciones web progresivas (PWA) en 2021". SimiCart . 2021-02-22 . Consultado el 2021-05-16 .
  47. ^ Osmani, Addy (30 de noviembre de 2017). "Estudio de caso sobre el rendimiento de una aplicación web progresiva de Pinterest". Equipo ChromiumDev . Consultado el 10 de febrero de 2023 .
  48. ^ Gazdecki, Andrew (9 de marzo de 2018). "Por qué las aplicaciones web progresivas reemplazarán a las aplicaciones móviles nativas". Forbes . Consultado el 10 de febrero de 2023 .
  49. ^ MSEdgeTeam. "Publica tu aplicación web progresiva en Microsoft Store - Desarrollo de Microsoft Edge". docs.microsoft.com . Consultado el 16 de mayo de 2021 .
  50. ^ "El primer lote de aplicaciones web progresivas de Windows 10 ya está aquí". Windows Central . 2018-04-07 . Consultado el 2021-05-16 .
  • Índice de estándares del Grupo de trabajo de aplicaciones web
Obtenido de "https://es.wikipedia.org/w/index.php?title=Aplicación_web_progresiva&oldid=1247363775"