Ir al contenido

Aplicación web progresiva

De Wikipedia, la enciclopedia libre
Aplicación

Una aplicación web progresiva (PWA por sus siglas en inglés) es un tipo de software de aplicación que se entrega a través de la web, creado utilizando tecnologías web comunes como HTML, CSS y JavaScript. Está destinado a funcionar en cualquier plataforma que use un navegador compatible con los estándares. La funcionalidad incluye trabajar sin conexión, notificaciones push y acceso al hardware del dispositivo, lo que permite crear experiencias de usuario similares a las aplicaciones nativas en dispositivos móviles y de escritorio. Dado que una aplicación web progresiva es un tipo de página web o sitio web conocido como aplicación web, no hay ningún requisito para que los desarrolladores o usuarios instalen las aplicaciones web a través de sistemas de distribución digital como Apple App Store o Google Play.

Si bien las aplicaciones web han estado disponibles para dispositivos móviles desde el principio, en general han sido más lentas, con menos funciones, y han sido utilizadas en menor medida que las aplicaciones nativas. Pero con la capacidad de trabajar sin conexión, que antes solo estaba disponible para aplicaciones nativas, los PWA que se ejecutan en dispositivos móviles pueden funcionar mucho más rápido y proporcionar más funciones, cerrando la brecha con las aplicaciones nativas, además de ser portátiles en plataformas de escritorio y móviles.

Los PWA no requieren agrupación o distribución por separado. La publicación de una aplicación web progresiva es como sería para cualquier otra página web. Los PWA funcionan en cualquier navegador, pero las características "similares a las aplicaciones", como ser independientes de la conectividad, instalarse en la pantalla de inicio y enviar mensajes, dependen de la compatibilidad del mismo. A partir de abril de 2018, esas características son compatibles en diversos grados con los navegadores Microsoft Edge, Google Chrome, Mozilla Firefox y Apple Safari, pero es posible que más navegadores admitan las funciones necesarias en el futuro.[1]​[2]​ Varios negocios destacan mejoras significativas[3]​ en una amplia variedad de indicadores clave de rendimiento después de la implementación de PWA, como un mayor tiempo dedicado a la página, conversiones o ingresos.

Antecedentes

[editar]

En el lanzamiento del iPhone en 2007, Steve Jobs anunció que las aplicaciones web, desarrolladas en HTML5 usando la arquitectura AJAX, serían el formato estándar para las aplicaciones de iPhone. No se requería un kit de desarrollo de software (SDK), y las aplicaciones se integrarían completamente en el dispositivo a través del motor del navegador Safari.[4]​ Este modelo se cambió más tarde para la App Store, como un medio para evitar los jailbreakers y apaciguar a los desarrolladores frustrados.[5]​ En octubre de 2007, Jobs anunció que se lanzaría un SDK al año siguiente. Como resultado, aunque Apple continuó admitiendo aplicaciones web, la gran mayoría de las aplicaciones de iOS se desplazaron hacia la App Store.

A principios de la década de 2010, las páginas web dinámicas permitieron utilizar las tecnologías web para crear aplicaciones web interactivas. El diseño web receptivo y la flexibilidad de tamaño de pantalla que proporciona, hicieron que el desarrollo de PWA sea más accesible. Las continuas mejoras en HTML, CSS y JavaScript permitieron que las aplicaciones web incorporaran mayores niveles de interactividad, haciendo posible experiencias similares a las nativas en un sitio web y, por lo tanto, en PWA.[6]​

Firefox lanzó Firefox OS en 2013. Estaba destinado a ser un sistema operativo de código abierto para dispositivos móviles que reemplazara las aplicaciones nativas con aplicaciones web, con Gaia constituida en su interfaz HTML5. El desarrollo del sistema operativo Firefox finalizó en 2016, siendo abandonado.

En 2015, el diseñador Frances Berriman y el ingeniero de Google Chrome Alex Russell acuñaron el término "aplicaciones web progresivas"[7]​ para describir las aplicaciones que aprovechan las nuevas funciones compatibles con los navegadores modernos, incluidos los service worker web y los manifiestos de aplicaciones web, que permiten a los usuarios actualizar las aplicaciones web a aplicaciones web progresivas en su sistema operativo (SO) nativo. Google luego realizó esfuerzos significativos para promover el desarrollo de PWA para Android.[8]​ Con la introducción por parte de Apple de la asistencia de los service worker para Safari en 2017,[9]​ las PWA han pasado a ser compatibles con los dos sistemas operativos móviles más utilizados, Android e iOS.

En 2019, las PWA estaban disponibles en los navegadores de escritorio Microsoft Edge[10]​ (en Windows) y Google Chrome[11]​ (en Windows, macOS, Chrome OS y Linux).

Características

[editar]

Las aplicaciones web progresivas están diseñadas para funcionar en cualquier navegador que cumpla con los estándares web. Al igual que con otras soluciones multiplataforma, el objetivo es ayudar a los desarrolladores a crear aplicaciones multiplataforma más fácilmente de lo que lo harían con las aplicaciones nativas.[9]​ Según los desarrolladores de Google,[7]​[12]​[13]​ las características de una PWA son:

  • Progresiva: funciona para todos los usuarios, independientemente de la elección del navegador, utilizando principios de mejora progresiva .
  • Adaptable: se adapta a cualquier factor de forma: computadora de escritorio, dispositivo móvil, tableta o formato que aún no han surgido
  • Más rápido después de la carga inicial: una vez finalizada la carga inicial, no es necesario volver a descargar el mismo contenido y elementos de página cada vez. Los sitios web ordinarios a menudo utilizan la memoria caché del navegador para evitar volver a descargar los mismos datos de forma redundante, mientras que para las PWA, el navegador asigna su propio espacio de almacenamiento independiente.
  • Conectividad independiente: los service worker permiten usos fuera de línea o en redes de baja calidad.
  • Como una aplicación: se siente como una aplicación para el usuario con interacciones y navegación de estilo de aplicación.
  • Actualizada: siempre actualizado debido al proceso de actualización del trabajador de servicio.
  • Segura : se sirve a través de HTTPS para evitar espiar y garantizar que el contenido no haya sido manipulado.
  • Detectable : identificable como una "aplicación" por manifest.json[14]​ y el registro del service worker, y detectable por los motores de búsqueda.
  • Reconectable: capacidad de utilizar notificaciones push para mantener la experiencia de usuario.
  • Instalable: proporciona iconos de la pantalla de inicio sin el uso de una tienda de aplicaciones.
  • Vinculable: se puede compartir fácilmente a través de una URL y no requiere una instalación compleja.

Russell describió los criterios de referencia técnicos para que un sitio sea considerado una aplicación web progresiva por los navegadores en una publicación de seguimiento:[15]​

  • Origen seguro. Servido sobre tecnologías de cifrado web modernas como TLS.
  • Cargue sin conexión (aunque solo sea una página sin conexión personalizada). Por implicación, esto significa que las aplicaciones web progresivas requieren de service worker.
  • Manifiesto de aplicación web con al menos las cuatro propiedades clave: nombre, short_name, start_url y display (con un valor de pantalla independiente o pantalla completa)
  • Un icono de al menos 144×144 de tamaño grande en formato PNG.
  • Uso de gráficos vectoriales.

Algunas aplicaciones web progresivas utilizan un enfoque arquitectónico llamado App Shell Model.[16]​ En este modelo, los service worker almacenan la interfaz de usuario básica o "shell" de la aplicación en la memoria caché sin conexión del navegador. Este modelo permite que los PWA mantengan un uso 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 el contenido se puede cargar de forma progresiva y dinámica.[17]​

Tecnologías

[editar]

Existen muchas tecnologías de uso común para crear aplicaciones web progresivas. Todas las PWA requieren, como mínimo, un service worker y un manifiesto.[18]​[19]​[20]​

Manifiesto

[editar]

El manifiesto de la aplicación web[21]​ es una especificación W3C que define un manifiesto basado en JSON (generalmente denominado manifest.json)[14]​ para proporcionar a los desarrolladores un lugar centralizado para colocar metadatos asociados con una aplicación web que incluye:

  • El nombre de la aplicación web.
  • Enlaces a los iconos de aplicaciones web u 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 para configurar el modo de visualización, por ejemplo, pantalla completa

Estos metadatos son cruciales para que una aplicación sea agregada a una pantalla de inicio o se enumere junto con las aplicaciones nativas.

En iOS

[editar]

iOS Safari no implementa manifiestos, pero la mayoría de los metadatos de 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 a pantalla completa, definir iconos y pantallas de presentación, y especificar un nombre para la aplicación.[22]​ Las API para nuevas tecnologías también se quedaron atrás de la implementación de Android WebView de Google, aunque iOS 12.2 y 13 se han puesto al día un poco.[23]​

Service worker

[editar]

Un service worker es un archivo JavaScript que funciona como un tipo de web worker. Funciona separadamente del hilo principal del navegador para manejar notificaciones push, sincronizar datos en segundo plano, almacenar en caché o recuperar solicitudes de recursos, interceptar solicitudes de red y recibir actualizaciones centralizadas.[24]​ Los service worker se utilizan en un intento de dar a las aplicaciones web progresivas la capacidad de proporcionar el alto rendimiento y la rica experiencia de las aplicaciones móviles nativas, con el bajo espacio de almacenamiento, las actualizaciones en tiempo real y la visibilidad mejorada del motor de búsqueda de las aplicaciones web tradicionales.[25]​

Los service worker pasan por un ciclo de vida de tres pasos de registro, instalación y activación. El registro implica decirle al navegador la ubicación del service worker en preparación para la instalación. La instalación se produce cuando no hay un 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 todas las páginas de PWAs están cerradas, por lo que no hay conflicto entre la versión anterior y la actualizada. El ciclo de vida también ayuda a mantener la coherencia al cambiar entre versiones del service worker, ya que solo un único service worker puede estar activo para un dominio.[24]​

Técnicamente, los service worker proporcionan un proxy de red programable en el navegador web para administrar las solicitudes web/HTTP mediante programación. Los service worker se encuentran entre la red y el dispositivo para suministrar el contenido. Son capaces de utilizar los mecanismos de caché de manera eficiente y permiten un comportamiento sin errores durante los períodos fuera de línea.

Almacenamiento web

[editar]

El Almacenamiento web es una API estándar de W3C que permite el almacenamiento de valores clave en navegadores modernos. La API consta de dos objetos, sessionStorage (que habilita el almacenamiento de solo sesión que se borra al finalizar la sesión del navegador) y localStorage (que habilita el almacenamiento que persiste en las sesiones).[26]​

WebAssembly

[editar]

WebAssembly permite que el código precompilado se ejecute en un navegador web, a una velocidad casi nativa.[27]​ Por lo tanto, las bibliotecas escritas en lenguajes como C se pueden agregar a las aplicaciones web. Debido al costo de pasar datos de JavaScript a WebAssembly, los usos a corto plazo serán principalmente de reducción de números (como el reconocimiento de voz y la visión por computadora), en lugar de aplicaciones completas.

Bibliotecas de bases de datos

[editar]

Indexed Database API es una API estándar de W3C para interactuar con una base de datos NoSQL. La API es compatible con los navegadores modernos y permite el almacenamiento de objetos JSON y cualquier estructura representable como una cadena.[28]​ Se usa más comúnmente con el contenedor idb a su alrededor.

Algunas otras bibliotecas de bases de datos con soporte para PWA incluyen:

  • PouchDB: una implementación de JavaScript de CouchDB que es compatible con la API. CouchDB se puede usar en el lado del servidor y PouchDB en el lado del cliente. Una vez que la aplicación se conecta, ambos se pueden sincronizar.[29]​
  • RxDB: construida sobre PouchDB, esta base de datos ofrece capacidades funcionales reactivas para las aplicaciones.[30]​
  • GunDB: un sistema de almacenamiento de datos basado en gráficos que se basa en IndexedDB. [cita requerida]
  • Hood.ie: una biblioteca que almacena datos en el navegador mediante PouchDB (incluso sin conexión) y sincroniza esos datos con una base de datos compatible con CouchDB en el servidor cuando está en línea.[31]​

AppCache (obsoleto)

[editar]

El Caché de aplicaciones (o AppCache o el manifiesto de caché HTML5) es una tecnología anterior que permitía a la aplicación almacenar en caché el contenido por adelantado para su uso posterior cuando el dispositivo está desconectado.[32]​ Funciona adecuadamente para single-page application para las que fue diseñado, pero falla en formas problemáticas para aplicaciones de varias páginas como wikis.[33]​ A partir de mayo de 2019, la tecnología es compatible con los principales navegadores y algunos sitios la usan durante años, pero ya está en desuso a favor de los service workers y finalmente será eliminada de las especificaciones.

Existen frameworks de JavaScript como PaulaJS (Portable Adaptable Utility for Lightweight Applications) que ofrece funciones para facilitar la creación de Aplicaciones Web Progresivas, mejoras en la estética y experiencia de usuario.

Véase también

[editar]

Referencias

[editar]
  1. ↑ «Can I use pwa?». CanIUse. Consultado el 14 de agosto de 2018. 
  2. ↑ «Is Service Worker Ready?». Jake Archibald. 
  3. ↑ Rzutkiewicz, Jason. «Why Progressive Web Apps Are The Future of Mobile Web (2019 Research)». YML. Archivado desde el original el 4 de octubre de 2019. Consultado el 4 de octubre de 2019. 
  4. ↑ Ritchie, Rene (5 de marzo de 2018). «App Store Year Zero: Unsweet web apps drove iPhone to an SDK». iMore (en inglés). Consultado el 23 de mayo de 2019. 
  5. ↑ «Jobs’ original vision for the iPhone: No third-party native apps». 9to5Mac. 21 de octubre de 2011. Consultado el 22 de mayo de 2019. 
  6. ↑ Marcotte, Ethan. «Responsive Web Design». A List Apart. Consultado el 25 de mayo de 2010. 
  7. ↑ a b Russell, Alex. «Progressive Web Apps: Escaping Tabs Without Losing Our Soul». Consultado el 15 de junio de 2015. 
  8. ↑ Ladage, Aaron (17 de abril de 2018). «Progressive Web Apps Are Here and They’re Changing Everything». DEG. Archivado desde el original el 6 de agosto de 2020. Consultado el 23 de mayo de 2019. 
  9. ↑ a b Evans, Jonny (26 de enero de 2018). «Apple goes back to the future with web apps». Computerworld (en inglés). Consultado el 23 de mayo de 2019. 
  10. ↑ Pflug, Kyle (6 de febrero de 2018). «Welcoming Progressive Web Apps to Microsoft Edge and Windows 10». Microsoft Windows Blogs (en inglés). Consultado el 13 de septiembre de 2019. 
  11. ↑ LePage, Pete (4 de junio de 2019). «Progressive Web Apps on Desktop». Google Developers (en inglés). Consultado el 13 de septiembre de 2019. 
  12. ↑ «Your First Progressive Web App | Web Fundamentals - Google Developers». Your First Progressive Web App | Web Fundamentals - Google Developers. Consultado el 17 de julio de 2016. 
  13. ↑ Google Developers. «Progressive Web App». Consultado el 15 de junio de 2015. 
  14. ↑ a b W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016
  15. ↑ Russell, Alex. «What, Exactly, Makes a Progressive Web App». Consultado el 18 de octubre de 2016. 
  16. ↑ «The App Shell Model». 
  17. ↑ Osmani, Addi. «The App Shell Model | Web Fundamentals». Google Developers (en inglés). Consultado el 23 de mayo de 2019. 
  18. ↑ «Discoverable». Mozilla Developer Network (en inglés estadounidense). Consultado el 24 de abril de 2017. 
  19. ↑ «Network independent». Mozilla Developer Network (en inglés estadounidense). Consultado el 24 de abril de 2017. 
  20. ↑ «Instant Loading Web Apps with an Application Shell Architecture». Google Developers (en inglés). Consultado el 24 de abril de 2017. 
  21. ↑ «Web Manifest Docs on MDN». MDN Web Docs. 
  22. ↑ «Configuring Web Applications». Safari Web Content Guide. 
  23. ↑ «PWAs on iOS 13 beta: Here Comes Good News - SimiCart». SimiCart Blog. 7 de junio de 2019. 
  24. ↑ a b «Introduction to Service Worker | Web». Google Developers (en inglés). 1 de mayo de 2019. Consultado el 23 de mayo de 2019. 
  25. ↑ «Learn Everything About Progressive Web Apps». 
  26. ↑ «Web Storage API». MDN. Consultado el 14 de agosto de 2018. 
  27. ↑ «WebAssembly Concepts». MDN. Consultado el 14 de agosto de 2018. 
  28. ↑ «Concepts behind IndexedDB». MDN. Consultado el 14 de agosto de 2018. 
  29. ↑ «PouchDB, the JavaScript Database that Syncs!». pouchdb.com. Consultado el 16 de noviembre de 2019. 
  30. ↑ «Introduction · RxDB - Documentation». rxdb.info. Consultado el 17 de octubre de 2019. 
  31. ↑ «Hoodie – A generic backend with a client API for Offline First applications». hood.ie. Consultado el 16 de noviembre de 2019. 
  32. ↑ «Using the application cache». MDN. Mozilla. Archivado desde el original el 15 de febrero de 2019. Consultado el 14 de agosto de 2018. 
  33. ↑ «Application Cache is a Douchebag». A List Apart. Consultado el 14 de agosto de 2018. 
Obtenido de «https://es.wikipedia.org/w/index.php?title=Aplicación_web_progresiva&oldid=157074210»