The Digital Mike

Hola a todos, hoy vamos a presentar un tutorial simple donde vamos a conocer como crear una aplicación web progresiva (PWA) usando react app. El propósito es que, aprendas como comenzar a crear o permitir que tus trabajos y aplicaciones web estén disponibles en la PC como si de una aplicación normal se tratara. Pero primero vamos a ver una pequeña introducción acerca de las aplicaciones web progresivas (PWA).

• Que es una Aplicación Web Progresiva
• Que tan buena debe ser una Aplicacion Web Progresiva
• Cuales son los componentes de las PWA
• Como crear una Aplicacion Web Progresiva usando React App

Que es una Aplicación Web Progresiva (PWA en ingles)

Una Aplicación Web Progresiva (AWP) es una aplicación que combina características de una aplicación web y una aplicación móvil nativa. Está diseñada para funcionar en cualquier plataforma web y en cualquier navegador compatible, brindando a los usuarios una experiencia similar a la de una aplicación nativa. También se pueden instalar en el dispositivo del usuario, lo que les brinda un acceso más rápido y conveniente.

Las Aplicaciones Web Progresivas utilizan tecnologías web estándar, como HTML, CSS y JavaScript, pero también hacen uso de características más avanzadas y modernas, como Service Workers y Manifestos Web, para proporcionar una funcionalidad adicional y mejorar la experiencia del usuario.

La característica más destacada de una Aplicación Web Progresiva es su capacidad para funcionar de manera confiable, incluso en condiciones de conectividad limitada o nula. Esto se logra mediante el almacenamiento en caché de recursos necesarios en el dispositivo del usuario, lo que permite que la aplicación se cargue rápidamente y funcione sin problemas, incluso cuando no hay una conexión a Internet estable. Además, las AWPs pueden enviar notificaciones push a los usuarios, lo que les permite mantenerse actualizados con información relevante oportuna.

Que tan buena debe ser una Aplicación Web Progresiva

Las Aplicaciones Web Progresivas ofrecen una serie de ventajas y beneficios que las hacen adecuadas para diversas situaciones. A continuación, se enumeran algunas de las razones por las que podemos considerarlas buenas:

1. Accesibilidad multi-plataforma: Una Aplicación Web Progresiva se puede ejecutar en cualquier dispositivo con un navegador web compatible, ya sea una computadora de escritorio, un teléfono móvil, una tableta u otros dispositivos. No se requiere desarrollar y mantener aplicaciones separadas para cada plataforma, lo que ahorra tiempo y recursos.
2. Instalación en el dispositivo: Las AWPs se pueden instalar en el dispositivo del usuario, lo que les permite acceder rápidamente a la aplicación sin tener que abrir un navegador y buscar el sitio web. Esto mejora la visibilidad y la accesibilidad de la aplicación, brindando una experiencia similar a la de una aplicación nativa.
3. Funcionamiento sin conexión: Las Aplicaciones Web Progresivas pueden funcionar incluso en condiciones de conectividad limitada o nula. Utilizando la tecnología de almacenamiento en caché, los recursos necesarios se almacenan localmente en el dispositivo del usuario, lo que permite que la aplicación se cargue rápidamente y funcione sin problemas, incluso cuando no hay una conexión a Internet estable.
4. Actualizaciones automáticas: Las AWPs se actualizan automáticamente, lo que significa que los usuarios siempre tienen acceso a la última versión de la aplicación sin tener que preocuparse por descargar e instalar actualizaciones manualmente. Esto asegura que todos los usuarios tengan las últimas mejoras y correcciones de errores.
5. Interacción nativa y notificaciones push: Las Aplicaciones Web Progresivas pueden aprovechar las capacidades del dispositivo, como las notificaciones push, la integración con el sistema operativo y el acceso a características específicas del dispositivo. Esto permite una experiencia de usuario más rica y similar a la de una aplicación nativa.
6. Bajo costo de desarrollo: En comparación con el desarrollo de aplicaciones nativas para diferentes plataformas, el desarrollo de una Aplicación Web Progresiva puede ser más económico y eficiente. Al utilizar tecnologías web estándar, se pueden aprovechar las habilidades y el conocimiento existente de desarrollo web.

Cuales son los componentes de las PWA

Las Aplicaciones Web Progresivas (AWP) están compuestas por varios componentes que trabajan juntos para brindar una experiencia de aplicación nativa. Estos componentes incluyen:

Manifesto web (Web App Manifest):

Es un archivo JSON que describe la aplicación, proporcionando metadatos como el nombre de la aplicación, los iconos, el color de fondo, la orientación de pantalla, entre otros. El manifest define cómo se debe mostrar la aplicación en el dispositivo del usuario y cómo se integra con el sistema operativo.

Service Workers:

Son scripts en segundo plano que se ejecutan de forma independiente al hilo principal del navegador. Los Service Workers permiten realizar tareas como el almacenamiento en caché de recursos, interceptar solicitudes de red, habilitar notificaciones push y trabajar sin conexión. Permiten que la AWP funcione incluso cuando no hay una conexión a Internet estable.

Almacenamiento en caché (Caching):

Las AWPs utilizan el almacenamiento en caché para almacenar en el dispositivo del usuario los recursos necesarios para que la aplicación funcione sin conexión. Esto permite que la aplicación se cargue rápidamente y continúe funcionando, brindando una experiencia fluida incluso en condiciones de conectividad limitada.

Notificaciones Push:

Las AWPs pueden enviar notificaciones push a los usuarios, incluso cuando la aplicación no está abierta. Esto permite a la aplicación mantener a los usuarios actualizados con información relevante y oportuna, como mensajes, actualizaciones de contenido, recordatorios, entre otros.

Acceso a características del dispositivo:

Las AWPs pueden acceder a características y funcionalidades específicas del dispositivo, como la cámara, el micrófono, la geolocalización, los sensores, entre otros. Esto les permite brindar una experiencia de usuario más rica e interactiva.

Como crear una aplicación web progresiva (PWA) con react app

1. Configurar una aplicacion simple con react

Para configurar una aplicación simple con React para una Aplicación Web Progresiva (AWP), puedes seguir los siguientes pasos:

Paso 1: Configuración inicial del proyecto

1. Asegúrate de tener Node.js instalado en tu sistema.
2. Abre una terminal y crea un nuevo directorio para tu proyecto. Navega hasta ese directorio.
3. Ejecuta el siguiente comando para crear un nuevo proyecto de React:

npx create-react-app awp-app

Esto creará una nueva carpeta llamada «awp-app» con una estructura de proyecto básica de React. Si deseas utilizar una plantilla con este mismo proposito, puedes usar la opcion --template de la siguiente forma:

npx create-react-app awp-app --template cra-template-pwa

4. Navega al directorio del proyecto:

cd awp-app

Paso 2: Configuración de la aplicación para ser una AWP

1. Instala el paquete react-app-rewired y react-app-rewire-workbox:

npm install react-app-rewired react-app-rewire-workbox --save-dev

2. Crea un archivo llamado config-overrides.js en la raíz del directorio del proyecto.
3. Abre config-overrides.js y agrega el siguiente contenido:

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = function override(config, env) {

  config.plugins.push(
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    })
  );

  return config;
};

Este archivo de configuración se utilizará para agregar el plugin de Workbox al proyecto de React.

Paso 3: Compilación y ejecución de la aplicación

1. Abre una terminal en el directorio del proyecto.
2. Ejecuta el siguiente comando para compilar la aplicación:

npm run build

Esto generará una carpeta «build» que contiene los archivos compilados de la aplicación.

3. Para servir la aplicación localmente, puedes usar un servidor web simple como serve. Instálalo globalmente si aún no lo tienes:

npm install -g serve

4. Ejecuta el siguiente comando para iniciar el servidor y servir la aplicación:

serve -s build

Esto iniciará el servidor y mostrará la dirección URL en la que puedes acceder a tu aplicación.

Ahora la aplicación generada contendrá un service worker que permitirá que funcione sin conexión y se pueda instalar en el dispositivo del usuario.