Progressive Web Apps (PWA): ¿dominarán los próximos años?

Empecemos por su definición. Las PWA son las siglas de Progressive Web App o Aplicación Web Progresiva. Básicamente se trata de aplicaciones web que se pueden ver desde cualquier navegador de Internet moderno, pero con una serie de características especiales que hacen que su comportamiento se parezca más al de una aplicación o App que a la de una web tradicional. De hecho, su uso está más orientado hacia los dispositivos móviles o teléfonos inteligentes.

Esta metodología fue presentada por Google en 2015, aunque en los últimos tiempos está tomando más protagonismo. Se puede considerar como una capa que se pone por encima de una aplicación web. Si analizamos su nombre, PWA, podemos extraer lo siguiente.

• Progressive. Se adaptan a las capacidades de cada dispositivo en el cual se ejecutan. De esta manera, funcionan para cada usuario. Independientemente de su dispositivo y navegador. Sea cual sea, se adaptará para dar la mejor experiencia posible.
• Web. No deja de ser una web, por lo que está desarrollada básicamente con HTML, CSS y JavaScript. Aunque con algunas características especiales para mejorar la experiencia del usuario en todos los dispositivos.
• App. Son aplicaciones web que pueden tener más funcionalidades que una web tradicional. Pero, sin llegar a ser una aplicación nativa con todas sus ventajas y desventajas (pros y contras), tiene el aspecto y el comportamciento de una App con el fin de mejorar la experiencia de usuario (UX).

Características de las PWA

Vamos a repasar algunas características que debería cumplir cualquier Progressive Web App. Al menos, sería lo deseable ya que dependerá del caso.

• Progressive. Como ya hemos visto, se debe adaptar al dispositivo del usuario, con las características del mismo.
• Responsive. Su diseño se debe adaptar a cualquier tamaño de pantalla sin tirar por tierra la experiencia de usuario. Ya sea en un equipo de escritorio, móvil o tableta. Si su principal objetivo es el de usarlo en móviles, quizás sea buena idea seguir una metodología mobile-first.
• Independiente de la conectividad. Optimizar con service workers para poder trabajar offline o en situaciones de poca cobertura o conexiones de baja calidad.
• App-like. Disponer de un estilo de navegación e interacción similar al de una aplicación nativa.
• Fresco. Siempre actualizada gracias a los procesos de actualización del service worker bien configurados.
• Seguro. Servido bajo el protocolo seguro HTTPS, por lo que el servidor deberá estar preparado.
• Identificable. Se identifican como “aplicaciones” gracias al manifiesto con el formato definido por W3C y al registro del service worker. Esto permite a los motores de búsqueda localizarlos y a los navegadores identificarlos como instalables y ayudarse del service worker para su funcionamiento.
• Reinteracción. Hacer sencillo que la gente se involucre mediante funciones como las notificaciones push.
• Instalable. Permitir a los usuarios mantener las apps que encuentren más útiles a mano, en su pantalla de inicio. Y sin necesidad de pasar por la tienda de aplicaciones correspondiente.
• Enlazable. Se puede compartir de manera sencilla, simplemente mediante su URL y sin una instalación compleja.

Cómo se crea una PWA

Como hemos visto, se basa en una aplicación web con ciertas características, a la cual se le añade una capa para transformarla en una PWA. Esta nueva capa, consta de los siguientes elementos, los cuales necesitas conocer para saber como hacer una PWA.

• Manifest. Se trata de un fichero en formato JSON en el cual se describe las características de la aplicación. Desde su nombre e icono, hasta el color principal. Ahí se define el aspecto que tendrá al instalarse en un teléfono móvil.
• Service Worker. Es el elemento que coordina la aplicación. Se encarga del buen funcionamiento de la aplicación y de su optimización. Entre otras cosas, gestiona la caché de la misma. Por ello, es muy importante que esta gestión de caché esté bien configurada y permita guardar los datos necesarios para poder ejecutarse offline, pero también la capacidad de actualizarse cuando haya novedades.

Aspectos técnicos de las PWA

Las tecnologías sobre las que se basan, son de sobra conocidas por los desarrolladores web y compatibles con la gran mayoría de navegadores de escritorio y de dispositivos móviles.

Por lo tanto, se basan en HTML5, CSS3 y JavaScript con sus múltiples frameworks. Así como tener tu PWA con React, Vue o Angular. Adicionalmente, por parte del servidor se puede utilizar cualquier lenguaje, ya sea PHP, .NET o Java siempre y cuando el resultado final sea una aplicación web. Aunque no hay que perder de vista que el objetivo será su ejecución por parte de dispositivos móviles, así que es recomendable no sobrecargar los procesos de la aplicación así como su diseño.

Si lo que deseas es tener una PWA para Wordpress, también es posible. Incluso es más sencillo, ya que hay plugins que se encargan de eso con un mínimo esfuerzo. Además, suelen dar la opción de personalizar la pantalla de carga o algunos otros aspectos.

Así que en lo que respecta al servidor, podría alojarse en cualquiera siempre y cuando funcione bajo el protocolo HTTPS. Hoy en día, esto es sencillo gracias a los emisores gratuitos de certificados SSL, como es el caso de Let’s Encrypt.

A tener en cuenta para los dispositivos móviles

Como el principal propósito es aplicarlo en teléfonos móviles, habrá que tener en cuenta algunas cosas.

La principal, es que hay que dotarla de la configuración de caché necesaria para que se pueda ejecutar incluso sin acceso a Internet. Al menos en la medida de lo posible. Para ello, en el primer acceso se descargará los ficheros necesarios para poder ser utilizados en las posteriores ejecuciones. De la misma manera, aunque continúe teniendo acceso a la red, tirará de los recursos almacenados en cache para dar más velocidad a la aplicación y, de paso, ahorrar consumo de datos.

Por otro lado, de forma más limitada que las aplicaciones nativas, también puede recibir notificaciones push. Así que esa manera de interactuar y llamar la atención no se pierde.

También de forma más limitada, pero se puede utilizar el hardware del móvil. Como puede ser la cámara o el GPS.

Las instalaciones de este tipo de aplicaciones son mínimas, por lo que apenas requerirán espacio libre en el móvil. Además, se actualizará automáticamente de manera transparente al usuario. Así que siempre que se actualice la aplicación web del servidor, el usuario al instante tendrá la última versión.

Aún así, si se cuida el aspecto, el usuario ni siquiera notará diferencia con una aplicación nativa. Ya que a través del manifiesto se puede también personalizar el icono, incluso la splash screen o pantalla de carga.

¿Pero no existían ya las aplicaciones híbridas?

Así es, ya existían. Y sí, tienen un cierto parecido. Pero se podría decir que las PWA es la evolución de las aplicaciones híbridas.

Una aplicación híbrida, se podría decir que es una aplicación web, a la cual se le ha añadido una capa para que sea una aplicación nativa. Pero internamente, sigue siendo una web en HTML, CSS y JavaScript. Existen frameworks como Phonegap y Apache Cordova que se encargan de automatizar el proceso de crear una aplicación nativa a partir de una web.

Al tener la capa de una aplicación nativa, adquiere sus características principales: hay que instalarla para usarla, ocupa más espacio, el mantenimiento es más complejo … pero no obtiene la principal ventaja de las aplicaciones nativas, como es un mayor rendimiento y aprovechamiento de las capacidades del móvil. Así como de temas de navegabilidad y look-and-feel. Por eso no suelen ser eficientes. Con las PWA no heredas estos inconvenientes de las aplicaciones híbridas.

Además, hay que tener en cuenta que la misma PWA sirve para todos los sistemas operativos. Mientras que las aplicaciones híbridas hay que generar una aplicación por cada sistema operativo: iOS, Android, Windows, etc.

¿Va a sustituir a las aplicaciones nativas?

Para nada, seguirán conviviendo juntas. Son complementarias. Cada una con sus ventajas e inconvenientes. Así que habrá que analizar las necesidades para decidirse por un tipo de aplicación.

Si la aplicación móvil es el núcleo de tu negocio, es más recomendable la aplicación nativa, ya que estará menos limitada en futuras ampliaciones para explotar el móvil al máximo. Por ejemplo, puedes incluir widgets de escritorio o servicios en segundo plano. Es el caso de Twitter o Facebook entre otros, donde es fundamental una aplicación nativa muy depurada.

En cambio, si la aplicación móvil es algo útil y aprovechable, pero secundario a tu negocio, puede ser buena idea sacar una PWA. Y más si ya tienes una aplicación web, la adaptación suele ser sencilla.

¿Quieres tu propia PWA?

Ya conoces las ventajas de este tipo de aplicaciones, así que ya puedes valorar si se ajusta a lo que necesitas. Si aún así tienes dudas, puedes contactarme y vemos si te puedo ayudar a desarrollar la PWA que necesitas.

Valoraré tus necesidades y te aconsejaré sobre lo que más se puede ajustar a lo que necesitas. Si es una PWA y lo deseas, podemos colaborar para llevarla a cabo.😀