Creación de aplicaciones web progresivas (PWA)

En esta publicación, exploraremos las aplicaciones web progresivas (PWA), un enfoque moderno para crear aplicaciones web que ofrecen una experiencia nativa similar a la de una aplicación. Cubriré los conceptos básicos de las PWA, sus ventajas y los pasos para crear una PWA desde cero.

1. Introducción a las aplicaciones web progresivas (PWA)

¿Qué es una aplicación web progresiva (PWA)?

Una aplicación web progresiva es un tipo de software de aplicación entregado a través de la web, creado utilizando tecnologías web comunes, incluidas HTML, CSS y JavaScript. Las PWA están diseñadas para funcionar en cualquier plataforma que utilice un navegador compatible con los estándares.

Características clave de las PWA:

• Responsivo: Funciona en cualquier dispositivo y tamaño de pantalla.
• Capacidad sin conexión: Funciona sin conexión o con malas condiciones de red utilizando trabajadores de servicio.
• Experiencia similar a una aplicación: proporciona una experiencia de usuario similar a una aplicación con funciones como la instalación en la pantalla de inicio.
• Seguro: Servido a través de HTTPS para evitar el espionaje y garantizar la integridad del contenido.
• Re-engageable: habilita notificaciones automáticas para mantener a los usuarios interesados.

2. Ventajas de las PWA

¿Por qué crear una PWA?

• Rendimiento mejorado: tiempos de carga más rápidos e interacciones más fluidas.
• Compromiso del usuario mejorado: notificaciones push y acceso a la pantalla de inicio.
• Costos de desarrollo más bajos: base de código única para experiencias web y móviles.
• Beneficios de SEO: Los motores de búsqueda pueden descubrir las PWA.

3. Configurar una PWA

Requisitos previos:

• Conocimientos básicos de HTML, CSS y JavaScript.
• Node.js y npm/yarn instalados.

Creación de una PWA simple:

1. Configuración del proyecto:
   

   mkdir my-pwa
   cd my-pwa
   npm init -y
   npm install express
   

2. Estructura del proyecto:
   

   my-pwa/
   ├── public/
   │   ├── index.html
   │   ├── styles.css
   │   └── app.js
   ├── server.js
   ├── package.json
   └── manifest.json
   

4. Creando el archivo de manifiesto

manifest.json:

El archivo de manifiesto proporciona metadatos sobre la PWA y es necesario para instalar la aplicación en la pantalla de inicio.

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

5. Creación de archivos HTML, CSS y JavaScript

index.html:

  
Welcome to My Progressive Web App!
  

estilos.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}

app.js:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

6. Configurar el trabajador de servicio

Un trabajador de servicio es un script que el navegador ejecuta en segundo plano, separado de la página web. Intercepta solicitudes de red y puede almacenar en caché recursos para mejorar el rendimiento y las capacidades fuera de línea.

servicio-trabajador.js:

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

7. Configurando el servidor

servidor.js:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Ejecutando el servidor:

node server.js

8. Probando tu PWA

1. Abre la aplicación:

   • Navega a http://localhost:3000 en tu navegador.

2. Registro de trabajador de servicio:

   • Abra las Herramientas de desarrollo (F12 o haga clic derecho y seleccione "Inspeccionar").
   • Vaya a la pestaña "Aplicación".
   • En "Trabajadores de servicios", deberías ver a tu trabajador de servicios registrado.

3. Agregar a la pantalla de inicio:

   • En un dispositivo móvil, abre tu PWA en el navegador.
   • Deberías ver un mensaje para "Agregar a la pantalla de inicio".

9. Mejores prácticas para PWA

Mejores prácticas:

• Usa HTTPS: Las PWA requieren contextos seguros.
• Optimizar imágenes: utilice imágenes responsivas y carga diferida.
• Minimiza las solicitudes de red: almacena en caché los recursos de manera efectiva.
• Asegurar la funcionalidad sin conexión: Proporcionar experiencias sin conexión significativas.

10. Conclusión

Resuma los puntos clave cubiertos:

• Introducción a las PWA y sus beneficios.
• Configurar una PWA simple con manifiesto, trabajador de servicio y almacenamiento en caché.
• Mejores prácticas para crear PWA sólidas.

11. Recursos adicionales

• Documentación de PWA
• Tutoriales y guías sobre temas avanzados de PWA.
• Foros comunitarios y soporte.