¿Qué son las PWA? Aplicaciones Web Progresivas para Principiantes

En el mundo actual, todo es posible gracias a los teléfonos móviles y las aplicaciones.

Digamos que necesitas pedir comida. Puedes hacerlo a través de una aplicación en un abrir y cerrar de ojos. O quizás necesites algún servicio público, lo mismo. Incluso puedes obtener atención médica de emergencia a través de una aplicación.
Hay aplicaciones para todo, desde bancos hasta entrenamientos, desde comercio hasta compras. Cada negocio tiene su propia aplicación, e incluso nuestros organismos gubernamentales han simplificado sus servicios hasta llegar al formato de aplicación.

Espera, pero crear y mantener una aplicación no es fácil y es bastante caro para una pequeña empresa. ¿Cómo lo hacen?

Es muy simple: los avances en tecnología han llegado al punto de que existe una opción que puede ayudar a las pequeñas empresas. Combina las funciones de una aplicación con la tecnología que se utiliza en el desarrollo web, y todo esto ayuda a crear servicios asequibles para los negocios. Hablo de las aplicaciones web progresivas (PWA – Progressive Web Apps).

Profundicemos un poco en este tema y entendamos qué son las PWA.

¿Qué es una Aplicación Web Progresiva?

Las aplicaciones web progresivas (PWA – Progressive Web Apps) son aplicaciones que se crean utilizando tecnologías web que probablemente ya conoces y te gustan, como HTML, CSS y JavaScript. Pero a pesar de esto, tienen la atmósfera y la funcionalidad de una verdadera aplicación nativa. ¡Un momento! ¿Qué se entiende por «aplicación nativa»?

Una aplicación nativa es una aplicación de software que se crea utilizando un lenguaje de programación específico para una plataforma determinada: iOS o Android.

Las PWA tienen características como notificaciones push y modo de funcionamiento sin conexión. Además, se crean y complementan con API modernas, lo que proporciona mejores posibilidades, confiabilidad y capacidad de instalación en cualquier dispositivo.

Las PWA aprovechan las ventajas del gran ecosistema web, incluidos los complementos y las comunidades. Además, son relativamente fáciles de implementar y mantener a diferencia de las aplicaciones nativas, que son bastante complejas en términos de desarrollo. Esto significa que para crear una PWA no se requiere tanto tiempo y esfuerzo.

La popularidad de estas aplicaciones ha impulsado a muchas empresas a migrar a ellas. Creo que esto se debe a que pueden funcionar tanto en Android como en iOS sin mayores diferencias.

Una característica de estos productos es que todos pueden instalarse en el escritorio, pueden funcionar en modo «sin conexión» (desde el lugar donde abandonaste la aplicación) y ofrecen posibilidades y funciones comparables a sus aplicaciones nativas.

Al crear una aplicación móvil nativa, debes cumplir con algunos requisitos para crear un buen producto para el consumidor. Lo mismo se aplica a las PWA. Veamos qué hace que una PWA sea tan buena.

Características de las PWA

Aquí tienes una lista de lo que debes tener en cuenta al desarrollar una PWA:

Adaptabilidad

Las diferentes empresas producen dispositivos con diferentes tamaños de pantalla, y tú, como desarrollador, eres responsable de que todos los usuarios puedan valorar el producto, independientemente del dispositivo que utilicen. Es por eso que es bueno asegurarte de que tu aplicación sea utilizable en todas las pantallas y que su contenido se pueda leer en cualquier tamaño de ventana de visualización.

Posibilidad de instalación

Los estudios han demostrado que, en general, a los usuarios les gusta más trabajar con versiones instaladas de las aplicaciones que con sus sitios web oficiales. Las PWA ofrecen a los usuarios una imagen, una atmósfera y una sensación de interacción con una aplicación normal.

Conexión independiente a la red

Si mantienes la interacción del usuario con tu aplicación, incluso cuando está sin conexión, podrás proporcionar una experiencia de mayor calidad que si lo enviaras a una página sin conexión predeterminada.

Un buen ejemplo aquí sería una aplicación de música. Tus usuarios deben poder acceder a la reproducción «sin conexión» y escuchar la música almacenada incluso sin conexión a Internet. Otro buen ejemplo es Twitter. Allí, el usuario puede volver a los tweets que ya ha leído y que pudo haber pasado por alto.

Descubrimiento

Dado que la mayoría de las PWA son sitios web transformados, sería justo que puedan detectarse en los motores de búsqueda. Esto puede atraer a más usuarios. Además, esta es una ventaja sobre las aplicaciones nativas que no se pueden encontrar en los motores de búsqueda.

Apariencia

La apariencia de la aplicación no debe diferenciarse de ninguna manera de una aplicación normal, por lo que debes agregar cosas como un icono de aplicación que la ayude a ser fácilmente reconocible, y una pantalla de bienvenida que agregue atmósfera a una aplicación normal.

Multiplataforma

Las PWA se desarrollan principalmente como aplicaciones web, lo que significa que deben funcionar en todos los navegadores/sistemas, no en algunos específicos. Los usuarios deben poder trabajar con ellos en cualquier navegador antes de querer instalarlo.

¡Así que, amigos! Esa fue toda la información general sobre las PWA. Mientras leías el artículo, puede que hayas notado que comparaba las PWA con las aplicaciones nativas de vez en cuando. Puede que esto te haya confundido un poco. Bueno, vamos a hacer una comparación y a aclarar este asunto.

Diferencia entre las PWA y las Aplicaciones Nativas

Costo de desarrollo

El costo de desarrollo de una PWA es diferente del costo de desarrollo de una aplicación nativa: es más bajo. Cuando desarrollas una aplicación nativa, debes aprender un lenguaje de programación específico y luego crear versiones de la aplicación para cada tipo de dispositivo (Android e iOS). Por supuesto, puedes contratar a un especialista que haga todo este trabajo por ti, pero te costará aún más.

Más adelante, también necesitarás recursos para mantener y actualizar la aplicación, lo que significa que se invertirá aún más dinero y tiempo.

Si hablamos de PWA, puedes tener una única base de código para diferentes plataformas. Esto también ahorra tiempo, ya que no tendrás que desarrollarla desde cero. Puedes simplemente configurar tu sitio web actual de acuerdo con tus necesidades.

E incluso si decides contratar a un desarrollador, solo será un desarrollador. En el caso de una aplicación nativa, tendrías que contratar al menos dos, dependiendo de las plataformas en las que funcionará tu aplicación.

Descubrimiento

Las aplicaciones nativas no pueden ser indexadas por los motores de búsqueda. Solo se pueden encontrar en la tienda de aplicaciones. Por supuesto, puedes hacer que tu aplicación sea más accesible para el descubrimiento en estas tiendas utilizando ASO (Optimización de la tienda de aplicaciones), pero esa es otra historia.
A diferencia de las aplicaciones nativas, las PWA funcionan según el principio de los sitios web, por lo que los motores de búsqueda pueden indexarlos. Esto les ayuda a clasificarse mejor en los resultados de búsqueda.

Seguridad

Actualmente, para ejecutar un sitio web, es necesario encriptarlo con un certificado SSL. De esta manera, se agrega un nivel adicional de seguridad. Y las PWA, como ya sabemos, son sitios que se han transformado en aplicaciones, lo que significa que son más seguras, ya que funcionan a través del protocolo HTTPS. Estos son protocolos de seguridad que garantizan un intercambio seguro de datos entre el cliente y el servidor, y no permiten la posibilidad de pirateo.

Para proteger tus aplicaciones, necesitas aplicar una serie de medidas de seguridad, como la autenticación multifactor, etc.

Instalación y Descarga

Las aplicaciones nativas se deben descargar e instalar desde la tienda de aplicaciones. Este proceso requiere que el usuario haga un esfuerzo para completarlo de principio a fin. Además, antes de instalar la aplicación, los usuarios deben pasar las comprobaciones de permisos.

Las PWA no necesitan nada de esto. Simplemente puedes agregar la aplicación a los marcadores de tu navegador o agregar un acceso directo al escritorio con unos pocos clics.

Ventajas de las PWA

Muchas organizaciones (tanto privadas como públicas) están migrando a las PWA. Esto no solo ocurre porque son más baratas en términos de desarrollo, sino también porque atraen más atención.

Ahora, revisemos rápidamente las ventajas de las PWA:

• Son adaptables y pueden funcionar en pantallas de diferentes tamaños
• Pueden funcionar en diferentes plataformas y en cualquier dispositivo que tenga un navegador web moderno
• Funcionan según el principio de las aplicaciones nativas normales
• Las actualizaciones se producen independientemente del usuario, es decir, no es necesario acceder a la tienda de aplicaciones para obtener una nueva actualización
• Se crearon utilizando las tecnologías web más comunes
• Son rápidas y ligeras
• Pueden funcionar en modo «sin conexión» (a diferencia de otros sitios web)
• Se pueden encontrar a través de un motor de búsqueda
• Son fáciles de instalar
• Bajo costo de mantenimiento

Recomendaciones para Comenzar a Desarrollar una PWA

Para comenzar a desarrollar una PWA, no se requiere mucho tiempo. Solo necesitarás algunas cosas.

Herramientas

El stack de tecnologías más conocido para desarrollar PWA es AngularJS. Existen otros stacks, como ReactJS y Polymer.

HTTPS

Necesitarás un servidor que admita una conexión HTTPS. De esta manera, garantizarás la seguridad de los datos de tus usuarios. Además, esto agregará un nivel adicional de seguridad a tu sitio web.

Shell de la aplicación

Es responsable de la primera impresión cuando se carga tu aplicación. En pocas palabras, es lo que ve el usuario cuando interactúa por primera vez con tu aplicación.

Service Worker

Esta es una de las tecnologías clave detrás de la creación de PWA. Son scripts que ayudan a mantener tu aplicación funcionando sin conexión, y también son responsables de realizar el almacenamiento en caché de páginas y ejecutar tareas en segundo plano. Service Worker puede ejecutar tareas incluso si la propia PWA no está en ejecución. Estas son algunas funciones adicionales de las que también es responsable Service Worker:

• Envío de notificaciones push
• Iconos de información
• Ejecución de tareas de actualización en segundo plano, etc.

Archivo Manifest

Este es un archivo JSON que se crea con un generador de manifiestos para aplicaciones web. Este archivo contiene información sobre cómo debería verse y funcionar tu PWA. En él puedes definir el nombre, la descripción, el icono, los colores y otras características de tu PWA. Aquí tienes un ejemplo de un archivo de manifiesto:

{
"short_name": "DevBlogger", 
"name": "DevBlogger", 
"description": "Todas las historias dev bajo un mismo techo",
"theme_color": "#eb5252", 
"background_color": "#000000", 
"display": "fullscreen", 
"Scope": "/", "orientation": "portrait", 
"icons": [ 
{
 "src": "images/android/android-launchericon-48-48.png", 
 "type": "image/png", 
 "sizes": "48x48"
},
 { 
 "src": "images/android/android-launchericon-96-96.png",
 "type": "image/png", 
 "sizes": "96x96"
 }, 
 { 
 "src": "images/android/android-launchericon-192-192.png",
 "type": "image/png", 
 "sizes": "192x192"
 } 
 ], 
 "start_url": "index.html?utm_source=homescreen"
 }

Realiza una auditoría de tu aplicación

Esto se puede hacer utilizando la herramienta Google Lighthouse. Google Lighthouse es un software de código abierto que está disponible para que todos lo utilicen en cualquier página web. Google es un gran defensor de las PWA y las promueve como parte del futuro de Internet. Puedes utilizar Lighthouse para ver qué tan rápido funciona tu PWA, qué tan accesible es y su nivel de preparación para SEO.

Cómo Crear una PWA

Siguiendo estos pasos, podrás crear sin problemas una PWA completamente funcional que se pueda utilizar en cualquier dispositivo.

Paso 1 – Planifica tu aplicación

Antes de empezar a desarrollar, debes pensar para qué propósitos estás creando una PWA, qué funciones quieres agregar, cuáles son las principales tareas de esta aplicación y cómo interactuará con los usuarios.

En la mayoría de los casos, este paso se denomina «etapa de investigación». Tienes la oportunidad de formar una idea, recopilar comentarios de usuarios y otras partes interesadas, y pensar en la parte funcional de tu futuro producto.

Paso 2 – Diseña la interfaz de usuario

Una vez que hayas planeado todo, puedes empezar a diseñar la interfaz de usuario de tu aplicación. En este paso, debes tener en cuenta aspectos como la adaptabilidad, la compatibilidad con diferentes plataformas, etc. Asegúrate de anotar todos los detalles que serán clave para el usuario, incluida su interacción con la aplicación y su participación en el proceso de uso.

Paso 3 – Desarrolla la parte de la interfaz

Puedes desarrollar una interfaz visualmente atractiva para los usuarios utilizando tecnologías web como HTML, CSS, JavaScript y frameworks como Angular, React y Vue.js. Y no olvides que al desarrollar con este stack, las aplicaciones deben estar orientadas principalmente a dispositivos móviles, pero a la vez deben poder adaptarse también a pantallas más grandes.

Paso 4 – Implementa Service Worker

Como ya hemos dicho, Service Worker es un componente clave de las PWA. Son archivos JavaScript que funcionan en segundo plano, lo que garantiza que la aplicación funcione sin conexión, envía notificaciones push y realiza el almacenamiento en caché. Para que tu PWA funcione a plena potencia, debes registrar e implementar Service Worker en tu página. La forma de hacerlo depende en gran medida del framework que utilices.

Paso 5 – Agrega notificaciones push

Para implementar la función de envío de notificaciones push, utiliza Push API y Service Worker. Obtén todos los consentimientos necesarios del usuario y utiliza un servicio de envío de notificaciones push para enviar notificaciones a los usuarios.

Paso 6 – Optimiza el rendimiento

La optimización es una etapa crucial del desarrollo. Al optimizar la aplicación, tus usuarios podrán trabajar sin problemas, el tiempo de carga se reducirá gracias al uso de técnicas como la división de código y el almacenamiento en caché, y podremos lograr que nuestro PWA funcione de manera más rápida y eficiente.

Paso 7 – Prueba y depura

Prueba tu PWA en diferentes dispositivos, en diferentes navegadores y en diferentes estados de red para asegurarte de que cumple con todos los objetivos establecidos. Además, recopila comentarios de los usuarios y realiza las mejoras necesarias.

Conclusión

Teniendo en cuenta el hecho de que las PWA son un producto nuevo y aún no son tan populares, pueden ser una excelente adición a tu arsenal.

Gracias a las últimas tecnologías y a las herramientas adecuadas, al empezar a trabajar con PWA, podrás aumentar las ganancias de tu producto a la larga, tanto si actúas como persona física como si eres una organización. Estas aplicaciones tienen una gran cantidad de características, incluida la velocidad de funcionamiento, la capacidad de funcionar sin conexión, y también el funcionamiento según el principio de las aplicaciones nativas normales. Todo esto mejora el proceso de interacción de los usuarios con la aplicación, lo que no puede dejar de influir en su impresión al usarla.