La creación de apps ha experimentado un crecimiento importante desde la llegada de los primeros smartphones. Ha crecido tanto, que en la actualidad la mayoría de empresas y organizaciones cuentan con su propia app. Ya sea para sus clientes o para uso interno, para las operaciones de su compañía. Al ver sus iconos en un smartphone, puedes pensar que todas son aplicaciones creadas para funcionar de manera independiente a otras herramientas y programas. Lo cierto es que no es así, aunque en la mayoría de casos, no verás la diferencia hasta hacer clic en su icono. Algunas de ellas darán paso a una interfaz propia, con sus funciones y herramientas. Otras, sin embargo, abrirán un navegador y funcionarán con base en tecnologías web. A una aplicación de este último tipo se la conoce como web app progresiva. Descubre sus secretos y cómo diseñarla.
¿Qué es una web app progresiva?
Antes de ver cómo puedes diseñar una web app progresiva con facilidad, es necesario aclarar a qué nos referimos cuando hablamos de ella; también, cuáles son sus bases. Para empezar, concretemos su definición: una web app progresiva, o progressive web app, es un tipo de aplicación para móviles o tablets que se caracteriza por estar creada utilizando tecnologías y lenguajes de programación empleados para el desarrollo y diseño web. Entre ellas, el HTML, el CSS y el JavaScript.
Para que estas apps funcionen, una vez instaladas, solo es necesario contar con un navegador instalado en el dispositivo. Por tanto, funcionan en prácticamente todas las plataformas; únicamente es necesario que tengan un navegador web operativo. Entre sus principales características está que su diseño es responsive; es decir, que su contenido, cuando están desarrolladas, se adapta a las dimensiones de la pantalla del dispositivo en el que se utiliza.
Una web app progresiva, además, es una app segura, y se puede instalar prácticamente como cualquier app que no está basada en web. Eso sí, por sus características, quienes la desarrollan no tienen la necesidad de publicarla en una tienda de aplicaciones. Además, a pesar de que hemos hablado de que se puede instalar, no lo hace como una app convencional. En esencia, lo que se instalará de esta app es un icono con un enlace que llame al navegador para abrirse en él.
Similitudes con una app convencional
Como hemos mencionado, una web app progresiva cuenta siempre con un icono propio, que se coloca en pantalla junto con los del resto de apps. Además, funciona sin necesidad de tener conexión a internet. Asimismo, y como el resto de apps -al menos en Android-, permite recibir notificaciones push.
En esencia, a pesar de utilizar un navegador web como soporte, una web app progresiva funciona de manera parecida a una app convencional, a pesar de ser realmente una web que puede contener enlaces a otras páginas y archivos. Se puede instalar en Android a partir de un archivo con extensión apk creado para ella, pero tampoco es necesario. Y es que, para logralo, solo es necesario guardar en el dispositivo su página principal para poder tenerla disponible.
Principales elementos de una app de este tipo
Principalmente, una web app progresiva está compuesta por un protocolo HTTPS (HTTP seguro) cifrado, un archivo de manifiesto y un mínimo de un service worker. Uno de los aspectos que es más necesario cuidar durante su desarrollo es su tiempo de carga, para que sea lo más reducido posible. No obstante, suele ser muy bajo, debido a la arquitectura base que suelen tener este tipo de aplicaciones.
En cuanto al service worker, que hemos incluido en la lista de elementos básicos de una web app progresiva, se trata de un script que tiene como misión el control de la manera en la que un navegador gestiona las solicitudes de la red, así como el almacenamiento de ficheros en caché. Entre otras cosas, este permite que las páginas web que funcionan como apps progresivas lo hagan tanto con conexión como sin ella.
Además, da la oportunidad a los creadores de este tipo de apps de mejorar la retención de usuarios, gracias a que gestiona las notificaciones que estos reciben. De esta manera, pueden llevar a un usuario a abrir y utilizar la app más veces de lo que lo haría si no las recibiese.
El archivo de manifiesto
Entre los elementos básicos de una web app progresiva está también lo que se conoce como archivo de manifiesto. Se trata de un archivo JSON que se encarga de controlar de qué manera aparece una aplicación ante un usuario. Además, cuenta con la información necesaria para poder cambiar el formato de la app de uno propio de una página web a una aplicación.
De igual modo, el archivo de manifiesto también incluye un indicador del nombre de la app (Name), que aparecerá en el menú móvil del usuario, y la descripción de la web app progresiva, junto con los distintos iconos que identifiquen la aplicación. En la medida de lo posible, es conveniente que sean varios, con distintos tamaños y resoluciones. De esta manera conseguiremos que estos iconos se vean bien siempre, independientemente del dispositivo.
Asimismo, llevará lo que se conoce como Start URL; es decir, la dirección web con la que se abre la aplicación. Otro de los ítems que incluirá son las distintas configuraciones de display (pantalla) entre las que podemos elegir. También la opción que fija cómo se utilizará la web app, si en modo de visualización de paisaje o como retrato. Por último, llevará indicado el color de la barra de la parte superior de la aplicación (Theme_color), así como el que tendrá la pantalla antes de que la app se cargue por completo al iniciarla (Background_color).
Cómo diseñar una web app progresiva
El primer paso consiste en el diseño y la creación de la web que servirá de base para su funcionamiento. Para ello, tienes que tener presente la necesidad de crear una web con maquetación responsive. Si no lo haces de esta manera, la web no se podrá ejecutar en todos los dispositivos disponibles, independientemente de su tamaño y disposición de pantalla. Y, por tanto, la web app progresiva que dé acceso a ella no funcionará de la manera deseada.
Después, debes generar un archivo de manifiesto, que contiene los elementos que acabamos de ver. En este fichero es necesario detallar tanto el comportamiento que queremos que tenga la web app progresiva, como la configuración principal de la misma. Ya con estos dos elementos preparados, es necesario emplear un service worker, cuyo funcionamiento hemos visto también en el apartado anterior. Con este elemento, que utiliza una tecnología basada en JavaScript, una página web se convertirá en una web app progresiva.
Un elemento multifunción
El service worker, por lo tanto, es el componente de una app de este tipo que hace que su funcionamiento sea similar al que tiene una app nativa. Para ello, se encarga de realizar diversas tareas: entre ellas está la ejecución del navegador que sirve como base para el funcionamiento de la app en cuestión en segundo plano.
Otra de las funciones de este service worker es reservar memoria caché, de manera que no sea necesario que la app realice peticiones al servidor de manera repetitiva. Además, se encarga del almacenamiento de la información precisa para que no haya que contar con conexión a internet para utilizar la aplicación. También descarga datos y contenido, gestiona la ejecución de la web app progresiva cuando no hay conexión, y habilita el servicio de notificaciones push para Android. Solo lo hace en este sistema, porque en iOS de momento no son posibles las notificaciones push en las web app progresivas.
Recursos para lograrlo
Lo cierto es que la creación de una web app progresiva puede parecer una tarea compleja. Sobre todo, porque debes tener conocimientos de diversos lenguajes de programación, entre ellos de HTML, CSS y JavaScript. También has de utilizar distintos componentes y herramientas, como por ejemplo la librería OneUI CSS. Esta te servirá para agregar diseño responsive a una web, de manera que se pueda ver bien en cualquier smartphone o tablet.
Afortunadamente, hay determinados kits desarrollados para facilitar tanto el diseño como la creación de una web app, como PWA Builder. Con esta herramienta tendrás que saber programar, pero el sistema te guiará a través de todos los pasos a dar para dejar tu app lista y funcionando. Estos recursos también te indican, paso a paso, los elementos adicionales que necesitarás para conseguirlo. Como, por ejemplo, una cuenta de desarrollador en GitHub. En cualquier caso, si sabes diseñar y crear una página web, y cuentas con unas nociones básicas de JavaScript, no tendrás dificultades para diseñarla, así que, ¡lánzate a crear tu web app progresiva! Y si necesitas ayuda, cuenta con nosotros.