PWA, vuélvete versátil en la web

En la actualidad, muchas empresas, desde pequeños negocios hasta grandes corporaciones, tienen presencia en internet y realizan inversiones significativas en el desarrollo de aplicaciones web. Estas aplicaciones deben ser intuitivas y útiles, garantizando así una experiencia completa para los usuarios, quienes buscan lograr sus objetivos sin dificultades. Es evidente que crear una aplicación web es una tarea compleja. Ahora, imagina tener que migrar esas aplicaciones a dispositivos móviles. Como es de esperar, esta alternativa conlleva un impacto tanto en términos de costos como de tiempo para las empresas.

¿Alguna vez te preguntaste por qué algunas aplicaciones solo están disponibles en un sistema operativo en particular? O ¿por qué algunas aplicaciones son gratuitas en una tienda mientras que en otra requieren pago? Seguramente, muchas de estas situaciones se deben a las políticas y directrices de las tiendas de aplicaciones. Además, en varias ocasiones es necesario pagar por listar tu aplicación en estos servicios de descarga, lo que puede suponer un inconveniente adicional para muchos negocios.

Una versátil solución para este tipo de situaciones es la herramienta conocida como PWA (Progressive Web App), un tipo de aplicación web que combina características de sitios web y aplicaciones móviles para ofrecer una experiencia de usuario avanzada y progresiva. Una PWA está diseñada para funcionar en cualquier plataforma que use un navegador web moderno, como computadoras de escritorio, tabletas y dispositivos móviles.

Estas son algunas de las características más destacables de las PWA:

• Actualizaciones automáticas: Las PWA se actualizan automáticamente, lo que garantiza que los usuarios siempre tengan acceso a la última versión de la aplicación.
  
• Responsivas: Están diseñadas para adaptarse a diferentes tamaños de pantalla y dispositivos, lo que proporciona una experiencia consistente en todos los dispositivos.
  
• Acceso sin conexión: Las PWA pueden funcionar sin conexión a internet o en conexiones de red lentas, lo que las hace más accesibles en diversas situaciones.
  
• Instalación en pantalla de inicio: Los usuarios pueden "instalar" una PWA en la pantalla de inicio de sus dispositivos móviles o computadoras, lo que les permite acceder rápidamente a la aplicación sin necesidad de una tienda de aplicaciones.
  
• Seguridad: Las PWAs se ejecutan en un entorno seguro a través de HTTPS, lo que protege los datos y la privacidad del usuario.
  
• Íconos y notificaciones: Pueden mostrar íconos en la pantalla de inicio y enviar notificaciones push, similar a las aplicaciones móviles.
  
• Enlace directo: Las PWAs se pueden compartir fácilmente a través de enlaces, lo que facilita su distribución.
  
• Interacción rápida: Ofrecen una experiencia de usuario rápida y fluida, similar a una aplicación nativa.
  

La realidad es que, aunque a primera vista una PWA y una aplicación móvil puedan parecer similares para un usuario común, sin embargo presentan diferencias notables. Estas diferencias se hacen evidentes desde el proceso de instalación. En el caso de una aplicación móvil, el usuario promedio simplemente accede a una tienda de aplicaciones y descarga lo que necesita.

Por otro lado, en el caso de una PWA, se requiere informar a los visitantes que está disponible para su descarga en dispositivos, lo que pone de manifiesto la importancia de un sólido diseño de interfaz de usuario (UI) y experiencia de usuario (UX). Esto se debe a que el usuario podría sospechar que se le está haciendo descargar un archivo malicioso o simplemente no entender el proceso de descarga.

Otro aspecto importante son las plataformas de desarrollo y la compatibilidad con dispositivos, lo cual representa una ventaja significativa para las PWA. Estas aplicaciones se desarrollan utilizando tecnologías estándar como HTML, CSS y JavaScript, y son compatibles con varios frameworks como Laravel, React, Codeigniter, entre otros.

En contraste, en el caso de las aplicaciones móviles, es necesario crear una versión específica para la plataforma en la que se desea lanzar, ya sea iOS o Android. Esta versatilidad hace que las PWA resulten más atractivas para muchas empresas, ya que les permite centrar su atención en la contratación de programadores web capaces de crear entornos multiplataforma en lugar de concentrarse exclusivamente en el desarrollo móvil.

Pero lo más importante y la variable más significativa que te llevará a elegir entre una PWA y una aplicación móvil es el alcance y la funcionalidad que deseas brindar a tu aplicación. Lamentablemente, las PWA no pueden acceder a todos los componentes y sensores de un teléfono móvil, por lo que debes evaluar adecuadamente las necesidades específicas del proyecto en cuestión.

Si se trata de funciones simples, como una tienda en línea, una plataforma de cursos o incluso un sitio de formularios y trámites, una PWA puede resolver tus requerimientos sin problemas. Sin embargo, si estás buscando una experiencia interactiva que aproveche plenamente los recursos del entorno que rodea a tu dispositivo, entonces es el momento de optar por aplicaciones móviles.

Otro detalle es que la salud de tu PWA depende enteramente de tu sitio web. Esto implica también las configuraciones de tus servidores, ancho de banda y estabilidad de los mismos.

Veamos un ejemplo de cómo podemos crear una PWA en React con Node.js. Hay que tener en cuenta que necesitas npm y Node.js instalados en tu equipo:

1) Creamos nuestro proyecto: Abre la terminal de comandos y crea elproyecto con el siguiente comando:

npx create-react-app nombredelproyecto

Recuerda que es importante estar siempre en la carpeta del proyecto en el cual trabajamos, así que vamos a éste con el siguiente comando:

cd nombredelproyecto

2) Habilita HTTPS: Para que una PWA funcione correctamente, tu sitio web debe estar habilitado para HTTPS. Si desarrollas localmente, puedes configurar un certificado SSL o utilizar herramientas como local-ssl-proxy para habilitar HTTPS en tu entorno de desarrollo.

3) Configuración del archivo ‘manifest.json’: Crea un archivo llamado manifest.json en la carpeta pública de tu proyecto React. Este archivo contiene información sobre la aplicación, como nombre, iconos, colores y más. Un ejemplo simple de manifest.json podría ser:

{

"name": "Nombre del proyecto",

"short_name": "1989",

"description": "Esto es un ejemplo, saludos comunidad hispana",

"start_url": "/",

"display": "standalone",

"background_color": "#3A4204",

"theme_color": "#33D4FF",

"orientation": "portrait",

"icons": [

{

"src": "/icons/taylor.png",

"sizes": "72x72",

"type": "image/png"

},

{

"src": "/icons/swift.png",

"sizes": "96x96",

"type": "image/png"

},

{

"src": "/icons/1989.png",

"sizes": "144x144",

"type": "image/png"

},

{

"src": "/icons/folklore.png",

"sizes": "192x192",

"type": "image/png"

},

{

"src": "/icons/lover.png",

"sizes": "512x512",

"type": "image/png"

}

],

"lang": "es"

}

En este ejemplo, podemos ver diferentes propiedades de la PWA, como:

• Description: Da una breve descripción de la PWA.
• Orientation: Orientación predeterminada de la PWA, en la cual debemos definir si es “portrait” para vertical o “landscape” para horizontal.
• Lang: El idioma que tendrá por defecto nuestra PWA.
  

4) Implementar un Service Worker: Crea un archivo de Service Worker (por ejemplo, service-worker.js) en la raíz de tu proyecto. Utiliza el Service Worker para administrar la caché de recursos y habilitar el funcionamiento fuera de línea de tu PWA. Puedes encontrar bibliotecas (como Workbox) que facilitan la implementación de Service Workers en React.

En el archivo principal de tu aplicación (por lo general, index.js o App.js), registra el Service Worker utilizando el método serviceWorker.register(). Por ejemplo:

.import * as serviceWorker from './service-worker';

serviceWorker.register();

5) Depuraciones y testeo: Realiza diferentes pruebas con distintos navegadores y dispositivos, realiza depuraciones con distintas herramientas  de desarrollo web para optimizar tu aplicación.

6) Mantenimiento: Continúa mejorando y actualizando tu PWA según las necesidades de los usuarios y las nuevas características que desees agregar.

Estos son los pasos generales para crear una PWA en React utilizando Node.js
como servidor de desarrollo. Es importante considerar que la implementación de una PWA puede necesitar conocimientos adicionales sobre tecnologías web como Service Workers y manifest.json, junto con otros conceptos relacionados.

Para obtener información más detallada y orientación específica, es necesario consultar la documentación oficial de React y las guías de desarrollo de PWAs.

En resumen, una PWA es una alternativa versátil a la gran demanda de aplicaciones móviles en el mercado, solo es cuestión de evaluar necesidades y factores para decidir cuándo es mejor implementarla.