Probablemente hayas escuchado varias veces el término, pero no acabes de entender qué son exactamente las Progressive Web Apps [PWA] y qué usos o ventajas tienen respecto a las páginas web «estándar».
Lo cierto es que hoy en día cada vez son más frecuentes y utilizadas en la creación de todo tipo de sitios online. Y no es de extrañar, debido a versatilidad y experiencia de uso general que permiten.
En este artículo aprenderás qué son progressive web apps, cómo funcionan, qué ventajas tienen y muchos más recursos para que puedas continuar indagando sobre este apasionante tema. ¡Comenzamos! 👇
Contents
· ¿Qué es PWA – Progressive Web Application?
Las PWA o aplicaciones web progresivas son el término utilizado para referirse a la nueva generación de aplicaciones. Su nombre hace referencia a todas las características y patrones de comportamiento que presentan. Vayamos por partes.
→ Son denominadas progresivas ya que son capaces de incrementar sus funcionalidades dependiendo de la capacidad del dispositivo en el que sean ejecutadas.
→ Su segunda característica es que son construidas mediante las principales tecnologías web disponibles, de ahí el término web. Hablamos de HTML, CSS y javaScript, pero también de una nueva generación de APIs de javaScript.
→ Completando el término, encontramos aplicaciones. Y esto es que permite crear aplicaciones dinámicas que pueden ejecutarse tanto en un escritorio [desktop] como en un dispositivo móvil [mobile].
📝 En términos prácticos, es posible decir que funcionan como una página web, pero que también pueden ser utilizadas como apps nativas. Una especie de «aplicaciones híbridas» que presentan numerosos puntos interesantes.
· Ventajas de las Progressive Web Apps
Probablemente aún no entiendas todas las implicaciones y ventajas que esta «nueva hornada» de aplicaciones tienen en el mundo real. No te preocupes, poco a poco irás descubriendo su potencial.
De momento, te dejamos con los principales puntos positivos.
Versatilidad
Uno de los puntos positivos de este tipo de apps progresivas es el hecho de que pueden ser ejecutadas en cualquier navegador que sea compatible con estos estándares.
✔️ De hecho, por su alto índice de relación con el ecosistema iOS, [realmente nacieron con la aparición del primer iPhone y la necesidad de crear «aplicaciones» para este smartphone] tienen una gran presencia en Safari. Pero Google también ha apostado fuertemente por las mismas y su inclusión en Android y Chrome.
Completando la lista, también es posible encontrarlas en Linux y Windows. Aunque de una forma más discreta.
Mejoras Extras
Realmente, estas PWA van sobre mejorar un poco en cada aspecto de lo que ya existía anteriormente. Y en este sentido, es posible destacar algunas mejoras significativas.
· Permiten las notificaciones push
Estas son las clásicas notificaciones que puedes encontrar deslizando en la barra superior de tu móvil. Son enviadas de forma directa desde el servidor a dispositivos móviles, ya sean teléfonos inteligentes o tabletas.
Así que, si recibes este tipo de notificaciones desde sitios web, ya sabes que es debido a estas PWA.
· Mejora del rendimiento
Es otro punto determinante.
👉 A pesar del gran desarrollo de la tecnología en dispositivos móviles, aún hoy en día es posible encontrar dispositivos que tengan problemas para «mover» ciertas aplicaciones. Otros sí que pueden hacerlo con solvencia, pero varias al mismo tiempo, ya que su RAM tiene una capacidad limitada.
Sea cual esa el caso, las progressive web apps requieren de mucha menos memoria que las apps nativas para móviles y tablets. Permitiendo un mejor rendimiento y fluidez en este tipo de dispositivos.
Reducción de Costes
Si las comparamos directamente con aplicaciones nativas, otra ventaja de las aplicaciones progresivas es el hecho de que requieren de un menor tiempo de programación y desarrollo.
👌 Al tratarse de una página web y una aplicación independiente de plataforma, tiene unos costes de desarrollo más bajos, debido a que es necesario emplear menos tiempo para su creación.
· Cómo funcionan las PWA
Es hora de entrar en una parte algo más técnica. Aunque te prometemos que no nos extenderemos demasiado, ya que este artículo no tienen la intención de servir cómo base para crear una PWA.
👉 El funcionamiento de estas aplicaciones web progresivas está 100% relacionado con los services workers. Básicamente. un service worker es un script [un proxy controlable que se ejecuta entre navegador y servidor] que permite posibilitar ciertas funciones que no vienen predefinidas en una página web.
Para estas PWA, los service workers se valen de la caché web, del historial web, y, de esta forma, obtienen resultados casi instantáneos.
Por otro lado, cabe señalar que estos services workers sólo se encuentran operativos mientras dure su acción. Se activan y desactivan continuamente.
📝 Por ejemplo: En una PWA, al realizar un clic en algún boto concreto o realizar una función determinada, un script se activa procesando este evento y valorando si existen resultados adecuados en la caché sin conexión que permitan completar la solicitud.
Cuantas más cachés fuera de línea existan para que puedan ser usadas en un momento dado por la PWA, más funcionalidades te permiten sin necesidad de estar conectado a internet.
✔️ Este sistema posibilita que, en ocasiones donde la conexión a internet sea irregular, puedas obtener una mejor experiencia de uso ya que la PWA utiliza cachés anteriores y no la última actualizada online. Cargando más rápido y fluyendo de forma muy ligera.
· Características principales de las aplicaciones web progresivas
Continuemos repasando sus principales características y funcionalidades.
Como verás, muchas de estas también pueden ser consideradas ampliamente como ventajas, ya que las progressive web applications intentan lograr la usabilidad de una aplicación móvil nativa incluyendo características de un navegador moderno.
▷ Universalidad
El primer concepto clave para estas PWA es el de universalidad. Es decir, una aplicación web progresiva debe ser capaz de funcionar sin problemas para cada usuario, independientemente de su navegador web.
▷ Responsive o Adaptabilidad
También debe ser capaz de ser ejecutada y visualizada de forma óptima en cualquier tipo de dispositivo. Ya sea un ordenador, un portátil, una tablet o un smartphone. Independientemente de sus características o marca.
▷ Diseño
Uno de los puntos más clave. Una PWA debe parecer una aplicación móvil nativa, mantener su diseño y estructura. En líneas generales, podemos señalar que debe contar con menús simplificados y fáciles de encontrar y con una interacción muy simple aunque requiera de funciones avanzadas.
▷ Seguridad
Acorde con las nuevas directrices en materia de ciberseguridad, las PWA deben usar siempre el cifrado SSL. Deberán contar con la «marca HTTPS» que garantiza cierta seguridad para los datos del usuario.
▷ Actualizaciones
Al contar con interacción continua y permanente con el sitio web, las PWA se mantienen actualizadas de forma 100% automática, sin necesidad de realizar ningún tipo de acción manual. Ofreciendo siempre las últimas versiones de un servicio o sitio.
▷ Descubrimiento
Íntimamente relacionado con el diseño, el descubrimiento hace referencia al hecho de que los usuarios deben poder identificar estas PWA como una aplicación, en lugar de un sitio web.
▷ Instalación
Otro aspecto clave. Las PWA no requieren de una instalación y descarga desde una tienda de aplicaciones [como Apple Store o la Playstore de Google]. Estas podrán ser utilizadas desde cualquier navegador sin pasos adicionales. Como una página web.
▷ Compartir
Al no tratarse de archivos 100% almacenadas y descargados en el dispositivo, son fácilmente compartibles. Tan solo necesitas la URL de la PWA y otro usuario podrá comenzar a utilizar al instante. Sin ningún tipo de instalación requerida.
Para que una PWA funcione con total normalidad, han de cumplirse dos factores:
- Un navegador compatible que las soporte y ejecute.
- Un servidor habilitado para las mismas.
✔️ Si necesitas conocer qué versiones de navegador son compatibles con este tipo de apps, puedes encontrar toda la información específica en páginas web como Is Serviceworker ready?
✔️ Por otro lado, también es posible descubrir y averiguar en qué versión concreta adoptaron el soporte para este tipo de aplicaciones los distintos navegadores. Para esta tarea, simplemente échale un vistazo a Can I use?
💡 En el siguiente gráficos encontrarás , de forma visual, cómo fueron poco a poco los navegadores aceptando esta tecnología. Como puedes ver, Fierfox tómó la delantera.
Si nos centramos en el presente, habrás podido comprobar que, en la actualidad, la mayoría de los principales navegadores del mundo son compatibles con esta tecnología. puedes realmente.
Si vamos al detalle, es posible encontrar:
▷ Escritorio
-
- Soporte completo: Chrome, Firefox, Opera, Edge, Safari
- Soporte parcial: QQ, Baidu
▷ Dispositivo móvil
-
- Soporte completo: Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
- Soporte parcial: QQ, Android Browser, Opera Mobile
· Ejemplos de Aplicaciones Web Progresivas actuales
Debemos advertirte que es realmente muy probable que ya hayas utilizado una de estas PWAs, ya que están por todas partes.
Numerosas empresas a lo largo y ancho del mundo ya han modificado sus páginas web y servicios para ofrecer una versión de Progressive Web App con toda la información y funcionalidades de su sitio.
De hecho, puedes entrar en unas de ellas prácticamente sin darte cuenta navegando con tu móvil por la red. Por ejemplo, si decides utilizar «la versión móvil de Twitter», en tu tablet o smartphone, ya estarás en una ellas.
Si quieres tener una vista general de otros sitios que también han abrazado esta tecnología, te recomendamos visitar el portal online OutWeb. En ella se enumeran muchísimas PWAS del ecosistema actual y otras muchas opciones nuevas que van surgiendo.
La alternativa a Outweb más conocida quizás sea Pwa.Rocks, que incluye algunas novedades y un surtido de apps realmente interesante.
📝 Los ejemplos más famosos de PWA utilizadas por millones de personas serían «las versiones light» de las aplicaciones tradicionales más utilizadas. Destacando:
- Twitter Lite
- Facebook Lite
- Instagram Lite
- Google Maps GO
· ¿Dominarán las PWA el ecosistema digital? – Conclusión Final
Las Progressive web apps suponen una evolución en el desarrollo de tecnología web para todo tipo de dispositivos, integrando tecnologías y funcionalidades que realmente se desconocía que podían ser implementadas.
💡 El factor de progresividad y adaptabilidad al medio tienen un componente revolucionario y que tan sólo puede ser la punta del iceberg, la mecha que prenda el desarrollo de nuevas soluciones técnicas. Ya que dependiendo de la capacidad del navegador, más capacidad puede tener esta PWA.
En la vida real, actualmente las PWA funcionan así:
📝 Si esta se abre en un ordenador de escritorio o en un portátil, la aplicación progresiva se comportará exactamente igual que una aplicación web habitual [con HTML,CSS..etc]. En cambio, si esta es abierta desde un smartphone o una tablet, es mostrada como una aplicación nativa.
Esto implica que, si las funcionalidades del dispositivo lo permiten, podrían entonces utilizar funciones que son totalmente normales para las apps nativas: como la cámara, el GPS ,el micrófono y las notificaciones push. Pero sin descargar absolutamente nada en el terminal.
Liberando espacio y memoria. Agilizando su uso.
Además del hecho de que no requieran la descarga ni instalación de Apks, las progressive web apps presentan otra ventaja muy clara. No requieren de ningún tipo de actualización manual, ya que siempre cogen «la última versión disponible» de la red. Ahorrando recursos, pero sin una dependencia extrema de internet, debido a la caché.
Todo ello provoca que el tiempo de respuesta de estas progressive web apps sea realmente inferior al de las aplicaciones nativas. Aunque todo tiene un coste.
Principales riesgos
❌ Actualmente, la mayor desventaja que tienen frente a aplicaciones nativas «al uso», es un apartado muy intangible, pero que marca una diferencia en los usuarios. Se trata del «feeling» general, de cómo se sienten y se utilizan. Ya que estas no están específicamente diseñadas para dispositivos de reducidas dimensiones y pantalla táctil.
✔️ Desde un punto de vista de desarrollo, el hecho de que estas aplicaciones sean más «sencillas» de crear y sean tan polivalentes, aporta esperanzas de cara al futuro, para que cada vez más y más «Players» del mercado apuesten por ellas.
👉 Actualmente se aprecia un gran empujón por parte de Google, Mozilla, Microsoft y Opera. En cambio, Apple parece no querer sumarse al carro, ya que su ecosistema iOS cerrado está orientado a potenciar las aplicaciones nativas para su Apps Store y la compatibilidad de las mismas con macOS.
Aquí concluye el artículo sobre PWA. Esperamos que hayas podido entender qué son las progressive web apps y cómo funcionan. A partir de aquí, ya puedes investigar más a fondo , si quieres, sobre esta interesante tecnología que marcará un antes y un después.
