React - Progressive Web App (PWA)

React - Progressive Web App (PWA)#

Actividades previas#

Ambiente de desarrollo#

  1. Acceda a su proyecto dashboard en Codespaces o en su máquina local.

  2. Cree y utilice la(s) rama(s) de desarrollo.

  3. Instale los paquetes y levante el servidor, con:

    npm install
npm run dev

Actividades en clases#

Producción en local#

  1. Asegúrese de que su proyecto esté funcionando correctamente en el entorno de desarrollo.

  2. Compile para producción y levante el servidor local, con:

    npm run build && npm run preview

  3. Verifique que la compilación se haya realizado correctamente, revisando la carpeta dist que se genera en el directorio raíz del proyecto.

  4. Abra su navegador y acceda a la URL de su aplicación

PWA Vite Plugin#

  1. Instale el plugin de PWA Vite Plugin, con:

    npm install -D vite-plugin-pwa

  2. Configure el plugin en el archivo vite.config.ts, con:

    1. Asegúrese que la base de la URL sea base: "/dashboard/".

    2. Importe y configure el plugin.

    ...
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
   base: "/dashboard/",
   plugins: [
      react(),
      VitePWA({
         registerType: 'autoUpdate',
         devOptions: {
            enabled: true
         }
      })
   ]
}

  3. Compile para producción y levante el servidor local, con:

    npm run build && npm run preview

  4. Verifique que la carpeta dist contenga los archivos necesarios para la PWA, como manifest.webmanifest y sw.js.

  5. Abra su navegador y acceda a la URL de su aplicación para verificar que el service worker se ha registrado correctamente y que el manifest está disponible.

  6. Utilice su cliente de IAG para explicar el concepto de PWA, el uso de los archivos manifest.webmanifest y sw.js; además, el beneficio en utilizar el PWA Vite Plugin.

Manifesto de la PWA#

  1. Utilice el servicio Favicon InBrowser.App para generar los íconos de la PWA.

  2. Descargue y descomprima los archivos generados; excepto el archivo site.webmanifest. Guárdelos en la carpeta public de su proyecto.

  3. Reemplace el contenido de la etiqueta <head> en el archivo index.html de su proyecto, con:

    <!DOCTYPE html>
<html lang="es">

<head>
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Dashboard del Clima</title>
   <meta name="description" content="Dashboard del Clima con PWA">
   <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
   <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <meta name="theme-color" content="#D3D1D1">
</head>

<body>
   ...
</body>

</html>

  4. Modifique la definición del manifest de la PWA en el archivo vite.config.ts, con:

    ...

VitePWA({
   registerType: ...,
   devOptions: { ... },
   includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
   manifest: {
      id: '/dashboard/',
      name: 'Dashboard del Clima - Proyecto 04',
      short_name: 'Dashboard del Clima',
      description: 'Proyecto 04 - dashboard del clima desarrollado con React y MUI',
      theme_color: '#D3D1D1',
      icons: [
         {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
         },
         {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
         },
         {
            src: "pwa-maskable-192x192.png",
            sizes: "192x192",
            type: "image/png",
            purpose: "maskable"
         },
         {
            src: "pwa-maskable-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "maskable"
         },
      ]
   }
})

  1. Compile para producción y levante el servidor local, con:

    npm run build && npm run preview

  2. Con Chrome,

    1. Inspeccione el sitio web para verificar que se ha registrado el service worker y que el manifest está correctamente configurado.

    2. Instale la PWA en su dispositivo móvil o en su navegador, y verifique que se muestre el ícono de la aplicación y que funcione correctamente.

    Nota

    Si no se muestra la opción de instalar la PWA, elimine el directorio dist y vuelva a compilar el proyecto.

  3. Con su cliente de IAG, explique el propósito del manifest de la PWA, la importancia de los íconos y cómo estos contribuyen a la experiencia del usuario al instalar la aplicación.

Service workers y Almacenamiento en caché#

  1. Con Chrome, inspeccione el sitio web en la opción «Red» (Network) para deshabilitar la conexión a internet Sin conexión.

  2. Modifique la definición del manifest de la PWA en el archivo vite.config.ts, con:

    ...

VitePWA({
   registerType: ... ,
   devOptions: { ... },
   includeAssets: [ ... ],
   manifest: { ... },
   workbox: {
      runtimeCaching: [
         {
            // Intercepta todas las peticiones a esta API (ajusta según necesidad)
            urlPattern: /^https:\/\/api\.open-meteo\.com\/.*$/,
            handler: 'NetworkFirst',
            options: {
               cacheName: 'open-meteo-cache',
               expiration: {
                  maxEntries: 10,
                  maxAgeSeconds: 60 * 60 * 24, // 1 día
               },
               cacheableResponse: {
                  statuses: [0, 200],
               }
            }
         }
      ]
   }
})

  3. Compile para producción y levante el servidor local, con:

    npm run build && npm run preview

  4. Con Chrome:

    1. Habilite la conexión a internet y recargue la página.

    2. Realice las peticiones para todas las ciudades que desee almacenar en caché.

    3. En la pestaña Almacenamiento, en las opciones IndexedDB y Almacenamiento en caché, verifique que las peticiones a la API de Open Meteo se almacenan en caché.

    4. Deshabilite la conexión a internet y recargue la página.

    5. Verifique que la aplicación funciona correctamente y que los datos se cargan desde el caché manejado por el ServiceWorker.

  5. Con su cliente de IAG, explique el concepto de service worker, el uso del Workbox para manejar el almacenamiento en caché y cómo esto mejora la experiencia del usuario al permitir que la aplicación funcione sin conexión a internet.

Versionamiento#

  1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio dashboard.

  2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

Despliegue#

  1. Desde la línea de comandos, ejecute el comando de transpilación y despliegue del sitio web, con:

    npm run deploy

    1. De ser necesario, elimine, corrija o comente las secciones de código identificadas por el transpilador.

    2. Vuelva a ejecutar el comando de transpilación y despliegue del sitio web.

  2. Compruebe el resultado en el navegador, con la URL: https://<username>.github.io/dashboard

  3. Verifique que la aplicación sea instalable como una PWA y que funcione correctamente sin conexión a internet.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Contenido