{Web Progresiva}

Dr. Alfredo de Jesús Gutiérrez Gómez

{Presentación}

Piense en el nombre de un animal que inicie con la primera letra de su nombre.
Este no deberá repetirse.
Al presentarse deberá completar la siguiente frase: Mi nombre es: _______ y he venido sobre un/a: _______ a la escuela desde _____
Dar respuesta a las preguntas:
1. ¿Porqué estudio está carrera?
2. ¿Qué me ha gustado de la carrera hasta ahora?

Unidad 1.

Temas

# Temas

Introducción al desarrollo de Aplicaciones Web Progresivas

Fundamentos de Aplicaciones Web Progresivas (PWA)
Identificar el concepto de PWA.
Explicar las características de las PWA.
Identificar ventajas de las PWA.
Identificar diferencias entre aplicación web, aplicación nativa y aplicación web progresiva.

Unidad 1.

Temas

# Temas

Introducción al desarrollo de Aplicaciones Web Progresivas

Identificar las herramientas, librerías, frameworks para el desarrollo de una PWA.
Reconocer conceptos básicos de programación en javascript
Estructuras de control.
Funciones
Eventos
Notificaciones.

Unidad 2.

Temas

# Temas

Desarrollo de aplicaciones web Progresivas.

Arquitectura PWA
Identificar las herramientas para la arquitectura para PWA
- Manifiesto.
- Services workers
- Web components
- App shells.
- Cache API
Reconocer los enfoques de la arquitectura para PWA
- del lado del servidor SSR
- del lado del cliente CSR

Unidad 2.

Temas

# Temas

Desarrollo de aplicaciones web Progresivas.

Service Worker
- Identificar las características y funcionalidades del service worker.
- Identificar los requisitos de implementación del service worker
- Describir el proceso de desarrollo del Service Worker
  Identificar estructura para la codificación del services worker.
- Identificar estructura para la codificación de APIs Cache, Fetch y Shell.
- Describir estrategias offline.
- Identificar estructura de codificación de patrones para trabajo offline.

Unidad 2.

Temas

# Temas

Desarrollo de aplicaciones web Progresivas.

Transacciones
- Describir el proceso para manipulación de base datos en PWA.
- Identificar estructura para codificación de transacciones en BD: lectura, escritura, borrado.

Unidad 3.

Temas

# Temas

Distribución de la Aplicación Web Progresivas

Publicación de la PWA
- Describir el proceso para publicación de la PWA.
- Identificar las diferencias entre hosting tradicional y hosting en la nube.
Herramientas para pruebas en PWA
- Identificar herramientas para pruebas en PWA.
- Describir el proceso de instalación y configuración de la herramienta de pruebas.
- Identificar el entorno de trabajo de la herramienta.
- Identificar los parámetros y métricas a evaluar

Unidad 1.

Actividades a evaluar

# Temas

Introducción al desarrollo de Aplicaciones Web Progresivas.

Trabajo
Propuesta de proyecto
Asistencia
Análisis de casos
Examen

Unidad 2.

Actividades a evaluar

# Temas

Desarrollo de aplicaciones web Progresivas.

Trabajo
Avance del proyecto
Asistencia
Análisis de casos
Examen

Unidad 3.

Actividades a evaluar

# Temas

Distribución de la Aplicación Web Progresivas

Presentación del proyecto
Documentación del proyecto
Asistencia
Ranking del proyecto
Examen

Políticas de clase

# Temas

Teléfono móvil en modo silencio.
Las llamadas urgentes /prio se contestan fuera del salón.
Turnos de una sola persona para ir al WC.
Dos faltas a la semana sin justificante perderían derecho a las cuestiones de aprendizaje.
Levantar la mano para participar.
Respetar la participación de cada alumno.
No hay retardos.

Lineamientos de clase

# Temas

Mantenerse informado acerca de las lecturas, actividades y tareas del curso asistiendo por lo menos dos veces por semana, durante la duración del curso.
Cumplir dentro del aula virtual con todas las tareas, foros y actividades detalladas por el programa académico y el profesor, en el tiempo y forma establecidos.
El incumplimiento de las tareas en tiempo y forma llevarán a una no aprobación del curso.

Lineamientos de clase

# Temas

Realizar el seguimiento personal desde el Aula Virtual.
Estar pendiente de los resultados de las evaluacion/es parcial/es y final/es.
Notificar al tutor por escrito, con copia a la coordinación académica, si, por alguna razón excepcional, se encontrara en una circunstancia especial que le impidiera continuar con el curso y recibir así indicaciones de cómo proceder a partir de ese momento.

# Temas

¿Dudas, preguntas, comentarios?

# Recomendaciones

Recomendaciones

Se enumeran las recomendaciones que se deben seguir para la realización de las actividades

# Recomendaciones

Recomendaciones

Trabajos

Portada
Presentación
Introducción
Conclusión

Párrafos

Mayores a tres líneas
Menores a ocho líneas
Coherencia entre párrafos

# Recomendaciones

Recomendaciones

Ortografía

Acentuación en mayúsculas y minúsculas.
Evitar redundancia.
Evitar pleonasmos.
Mínimo tres errores.

Referencia bibliográfica

Al menos tres citas dentro del trabajo.
En formato APA 7ma edición.

# Recomendaciones

Recomendaciones

Lista de referencias bibliográfica

Al menos tres fuentes de diversos autores.
Con sangría francesa al inicio de cuatro espacios.
Fuente Times New Roman.
12 puntos.
Sin enlaces activos.

Introducción y conclusión

Mínimo tres párrafos

# Recomendaciones

Recomendaciones

Formato del trabajo

Fuente Arial.
Tamaño de título: 14 puntos.
Tamaño de texto: 12 puntos.
Interlineado 1.5
Alineación justificada del texto.
Los títulos alineados a la izquierda.
En el encabezado del documento colocar el logotipo del instituto alineado a la derecha. Nombre de la carrera a la izquierda.

# Recomendaciones

Recomendaciones

Tablas

Colocarle al pie de la tabla un nombre a la tabla, bajo el siguiente formato: <nombre_tabla numero consecutivo>. <nombre_tabla> <fuente:> <donde_fue_tomada> .
Colocar un párrafo descriptivo

# Recomendaciones

Recomendaciones

Imágenes / diagramas / gráficas

Colocarle al pie de la tabla un nombre a la tabla, bajo el siguiente formato: <nombre_tabla numero consecutivo>. <nombre_tabla> <fuente:> <donde_fue_tomada> .
Colocar un párrafo descriptivo

# Recomendaciones

¿Dudas, comentarios, preguntas?

Actividades de encuadre

# Temas

En una hoja escribe la respuesta a la siguiente pregunta:

¿Qué esperas que se enseñe en este curso?
¿A qué te comprometes en este curso?
¿Qué deseas aprender en este curso

# PWA

Aplicación Web Progreciva

Conceptos.
Aspectos Claves
Ventajas
Desventajas
Usos
Como usar una PWA
Requisitos de harware
Requisitos de software
Ejemplo

# PWA - CONCEPTO

Una Aplicación Web Progresiva (PWA, por sus siglas en inglés) es una aplicación que se construye utilizando tecnologías web estándar como HTML, CSS y JavaScript, pero que ofrece una experiencia similar a la de una aplicación nativa en dispositivos móviles.

Las PWAs combinan lo mejor de las aplicaciones web y las aplicaciones móviles, ofreciendo funcionalidades avanzadas como la capacidad de trabajar sin conexión, notificaciones push y acceso a hardware del dispositivo, todo desde el navegador.

¿PWA?

# PWA - a. Claves

Progresiva: Funciona en cualquier navegador y es accesible para todos los usuarios, independientemente del dispositivo o sistema operativo.

Aspectos Claves

Responsive: Se adapta a diferentes tamaños de pantalla y orientaciones.

# PWA - a. Claves

Independiente de Conexión: Puede funcionar sin conexión o con conexiones de red limitadas.

Aspectos Claves

Similitud a una App: Ofrece una experiencia de usuario similar a la de una aplicación nativa, con interfaces fluidas y rápidas.

# PWA - a. Claves

Actualizaciones Automáticas: Se actualiza automáticamente sin necesidad de intervención del usuario.

Aspectos Claves

Seguridad: Utiliza HTTPS para garantizar la seguridad de los datos y evitar ataques como la interceptación de información.

# PWA - Ventajas

Compatibilidad Multiplataforma: Funciona en cualquier dispositivo con un navegador compatible, reduciendo la necesidad de desarrollar aplicaciones separadas para diferentes sistemas operativos.

Ventajas

Instalación Sencilla: Los usuarios pueden añadir la PWA a su pantalla de inicio directamente desde el navegador, sin pasar por tiendas de aplicaciones.

# PWA - Ventajas

Mejor Rendimiento: Las PWAs pueden cargar contenido de manera más rápida y eficiente, mejorando la experiencia del usuario.

Ventajas

Coste de Desarrollo Reducido: Al ser una aplicación web, el desarrollo y mantenimiento son generalmente más económicos en comparación con aplicaciones nativas.

# PWA - Ventajas

Acceso a Funciones del Dispositivo: Las PWAs pueden acceder a características como la cámara, GPS, y notificaciones, integrándose mejor con el dispositivo.

Ventajas

1

Limitaciones en Funcionalidades

2

Soporte Limitado en Navegadores

3

Interfaz de Usuario

4

Menor Visibilidad en Tiendas de Aplicaciones

# PWA - Desventajas

Desventajas

Usos

E-commerce

Experiencia rápida y similar a una app sin necesidad de que los usuarios descarguen una aplicación.

1.

2.

Ap. de Productividad

editores de texto, listas de tareas, calendarios y aplicaciones de notas que necesitan funcionar tanto en línea como fuera

3.

R.S y Blogs

Garantizar una experiencia de lectura fluida y sin interrupciones, incluso sin conexión.

# PWA - Usos

¿Cómo uso una PWA?

# PWA - ¿Cómo lo uso?

Desarrollo con Tecnologías Web

Usar HTML, CSS y JavaScript para construir la aplicación.

Implementación de un Service Worker

Es un script que el navegador ejecuta en segundo plano, que permite la funcionalidad sin conexión, entre otras características.

¿Cómo uso una PWA?

# PWA - ¿Cómo lo uso?

Manifesto Web App

Un archivo JSON que define cómo debe comportarse la PWA cuando se instala en la pantalla de inicio de un dispositivo, incluyendo iconos, tema, y pantalla de inicio.

Optimización para Rendimiento

Asegura que la aplicación cargue rápidamente y que funcione de manera eficiente en una variedad de dispositivos.

Requerimientos de hardware

# PWA - Hardware

Computadora o portatil

Procesador: Intel i5 o superior, o su equivalente en AMD.
Memoria RAM: 8 GB de RAM.
Almacenamiento: 256 GB.
Conexión a Internet: Una conexión estable para descargar dependencias, frameworks, y realizar pruebas en línea.
Dispositivos Móviles: para Pruebas (Opcional, pero recomendable)

Requerimientos de Software

# PWA - Software

Para casos académicos

Un editor.
Conocimiento de html, css y js
Un servidor web

Html básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi PWA</title>
    <link rel="manifest" href="manifest.json">
    <!-- Enlace a la hoja de estilos (opcional) 
        <link rel="stylesheet" href="styles.css">
        -->
</head>
<body>
    <h1>Hola, Mundo!</h1>
    <p>Bienvenido a mi primera PWA.</p>
    <!-- Registro del Service Worker -->
    <script type="text/javascript">
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('PWA_Basico/service-worker.js').then(function(registration) {
                    console.log('Service Worker registrado con éxito:', registration.scope);
                }, function(err) {
                    console.log('Fallo en el registro del Service Worker:', err);
                });
            });
        }
    </script>
</body>
</html>

# PWA - Ejemplo

Manifiesto básico (manifest.json)

{
  "id": "/index.html",
  "name": "Mi PWA",
  "description": "Esta es mi primera web progresiva",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon_recort.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-32.ico",
      "sizes": "32x32",
      "type": "image/png"
    }
  ]
}

# PWA - Ejemplo

Service Worker Básico (service-worker.js)

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('pwa-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/icon.png'
      ]);
    })
  );
});

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

# PWA - Ejemplo

# PWA

Librerías

Identificar las herramientas, Framework, librerías, para la creación de PWA

Herramientas para crear PWA

# PWA - Herramientas

Existen varias herramientas, librerías y frameworks que facilitan la creación de una experiencia optimizada, offline y con características similares a las aplicaciones nativas.

Herramientas para crear PWA

# PWA - Herramientas

Service Workers

Es el corazón de una PWA. Los service workers son scripts que el navegador ejecuta en segundo plano y permiten manejar el almacenamiento en caché, las notificaciones push, la sincronización en segundo plano y el funcionamiento sin conexión.

App Manifests

El archivo manifest.json es un componente esencial de las PWA, ya que contiene metadatos de la aplicación, como el nombre, íconos, temas y colores. Este archivo permite que la aplicación sea instalable en dispositivos móviles y que aparezca en la pantalla de inicio como una aplicación nativa.

Herramientas para crear PWA

# PWA - Herramientas

Lighthouse

Es una herramienta de Google que permite auditar y evaluar la calidad de una PWA. Lighthouse mide parámetros clave como el rendimiento, accesibilidad y cumplimiento con las mejores prácticas de PWA.

Librerías y Frameworks para Crear PWAs

# PWA - Herramientas

Workbox

Es una librería de Google que simplifica la implementación de service workers y permite gestionar el almacenamiento en caché, las estrategias de precarga de recursos, y la actualización del contenido.

PWABuilder

Es una herramienta de Microsoft que ayuda a generar rápidamente una PWA desde una aplicación web existente. También ofrece soporte para empaquetar la PWA y publicarla en tiendas de aplicaciones como Google Play Store y Microsoft Store.

Librerías y Frameworks para Crear PWAs

# PWA - Herramientas

Angular + Angular Service Worker

Angular, uno de los frameworks más populares de JavaScript, incluye soporte para PWA con su módulo Angular Service Worker, el cual facilita la integración de service workers y la creación de aplicaciones offline.

React + Create React App (CRA)

React, en conjunto con Create React App, ofrece plantillas para comenzar con una PWA de manera rápida. CRA incluye configuraciones básicas de service workers y manifiestos, facilitando el desarrollo de PWAs con React.

Librerías y Frameworks para Crear PWAs

# PWA - Herramientas

Vue.js + Vue CLI PWA Plugin

Vue.js ofrece un plugin para Vue CLI que permite convertir un proyecto en una PWA. El plugin facilita la configuración de service workers y el archivo manifest.json.

Ionic + Ionic PWA Toolkit

Onic es un framework orientado a crear aplicaciones móviles y web híbridas. Con su PWA Toolkit, es posible desarrollar PWAs con una experiencia similar a la de aplicaciones nativas, utilizando tecnologías web como HTML, CSS y JavaScript.

Frameworks Full-Stack para PWAs

# PWA - Herramientas

Next.js (React Framework)

Next.js es un framework basado en React que permite generar aplicaciones web y PWAs con funcionalidades avanzadas como renderizado del lado del servidor (SSR) y generación estática. Es una excelente opción para desarrollar PWAs altamente optimizadas.

Nuxt.js (Vue Framework)

Nuxt.js es el equivalente a Next.js para Vue.js, y es útil para la creación de aplicaciones universales con características de PWA. Incluye herramientas para optimización, service workers, y generación de manifiestos.

Hosting y Optimización de PWAs

# PWA - Herramientas

Firebase Hosting

Firebase es una plataforma de Google que ofrece hosting especializado para aplicaciones web, incluyendo soporte para PWAs. Firebase facilita la configuración de HTTPS, uno de los requisitos fundamentales para que una aplicación funcione como PWA.

Netlify

Netlify es una plataforma de hosting especializada en sitios web estáticos y PWA. Ofrece integración con herramientas como GitHub para desplegar aplicaciones de forma continua.

Actividad de aprendizaje

# PWA - Herramientas

Genera una investigación a profundidad, sobre las herramientas, librerías y framework para crear PWA.
Completa la siguiente tabla solo con herramientas, librerías y framework Open Sources

Herramientas	Librerías	Framework

Enviando datos en pwa

# PWA - Herramientas

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PWA - Nombre del Usuario</title>
  <link rel="manifest" href="manifest.json">
  <script defer src="app.js"></script>
</head>
<body>
  <h1>PWA: Ingresar nombre del usuario</h1>
  <label for="name">Ingresa tu nombre:</label>
  <input type="text" id="name" placeholder="Tu nombre">
  <button id="saveBtn">Guardar Nombre</button>
  <p id="greeting"></p>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
      .then(reg => console.log('Service Worker registrado', reg))
      .catch(err => console.error('Service Worker error', err));
    }
  </script>
</body>
</html>

Index.html

Enviando datos en pwa

# PWA - Herramientas

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveBtn = document.getElementById('saveBtn');
  const greeting = document.getElementById('greeting');

  // Cargar el nombre guardado, si existe
  const savedName = localStorage.getItem('userName');
  if (savedName) {
    greeting.textContent = `¡Hola, ${savedName}!`;
  }

  // Guardar el nombre en el almacenamiento local
  saveBtn.addEventListener('click', () => {
    const userName = nameInput.value;
    if (userName) {
      localStorage.setItem('userName', userName);
      greeting.textContent = `¡Hola, ${userName}!`;
    }
  });
});

app.js

Enviando datos en pwa

# PWA - Herramientas

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveBtn = document.getElementById('saveBtn');
  const greeting = document.getElementById('greeting');

  // Cargar el nombre guardado, si existe
  const savedName = localStorage.getItem('userName');
  if (savedName) {
    greeting.textContent = `¡Hola, ${savedName}!`;
  }

  // Guardar el nombre en el almacenamiento local
  saveBtn.addEventListener('click', () => {
    const userName = nameInput.value;
    if (userName) {
      localStorage.setItem('userName', userName);
      greeting.textContent = `¡Hola, ${userName}!`;
    }
  });
});

app.js

Enviando datos en pwa

# PWA - Herramientas

{
  "name": "PWA - Nombre del Usuario",
  "short_name": "PWA Nombre",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

manifest.json

Enviando datos en pwa

# PWA - Herramientas

const cacheName = 'pwa-cache-v1';
const filesToCache = [
  '/',
  '/index.html',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

// Instalación del Service Worker
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName).then(cache => {
      return cache.addAll(filesToCache);
    })
  );
});

// Activación del Service Worker
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keyList => {
      return Promise.all(keyList.map(key => {
        if (key !== cacheName) {
          return caches.delete(key);
        }
      }));
    })
  );
});

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

service-worker.js

Enviando datos en pwa

# PWA - Herramientas

// Activación del Service Worker
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keyList => {
      return Promise.all(keyList.map(key => {
        if (key !== cacheName) {
          return caches.delete(key);
        }
      }));
    })
  );
});

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

service-worker.js

Notifiaciones push

# PWA - Herramientas

Son mensajes que una Aplicación puede enviar a los usuarios incluso cuando no están usando activamente la app o el navegador.
Estas notificaciones permiten a los desarrolladores mantener a los usuarios informados sobre actualizaciones, ofertas, eventos o recordatorios, sin que el usuario necesite abrir la aplicación.

Notifiaciones push

# PWA - Herramientas

Interactividad en tiempo real

Aspectos Claves

Permiten interactuar con el usuario en tiempo real, lo que puede ayudar a mantener su interés en la aplicación o en los productos/servicios ofrecidos.

Permisos del usuario

Para que una aplicación o sitio web envíe notificaciones push, primero debe solicitar permiso al usuario. Solo después de que el usuario haya aceptado, la PWA podrá enviarle notificaciones.

Notifiaciones push

# PWA - Herramientas

Envío sin necesidad de interacción

Aspectos Claves

Las notificaciones pueden ser enviadas sin que el usuario esté navegando activamente por el sitio web o la PWA. Esto las hace especialmente útiles para mantener a los usuarios comprometidos con ofertas y actualizaciones.

Soporte para interacción offline

Las notificaciones pueden activarse por eventos en el servidor, incluso cuando el usuario no está conectado a internet. Una vez que el usuario se conecta de nuevo, las notificaciones son recibidas.

Notifiaciones push

# PWA - Herramientas

Envío sin necesidad de interacción

Aspectos Claves

Las notificaciones push pueden personalizarse con íconos, sonidos, y acciones personalizadas, permitiendo a los usuarios interactuar directamente con la notificación sin abrir la aplicación.

Notifiaciones push

# PWA - Herramientas

Suscripción al Push Service

Funcionamiento básico

La aplicación debe suscribir al usuario a un servicio de notificaciones push a través de la API PushManager. Esto requiere que el usuario otorgue permiso para recibir notificaciones.

Envío de notificaciones desde el servidor

Una vez suscrito, el servidor puede enviar notificaciones a los usuarios mediante un servicio push como Firebase Cloud Messaging (FCM) o OneSignal. El servidor se comunica con el Service Worker en el navegador del usuario.

Notifiaciones push

# PWA - Herramientas

Recepción y visualización de notificaciones

Funcionamiento básico

El Service Worker recibe el evento de notificación y lo muestra al usuario en su dispositivo mediante la API Notification. Las notificaciones pueden incluir títulos, mensajes, íconos y acciones.

Notifiaciones push

# PWA - Herramientas

Registrar un Service Worker

Ejemplo básico

Primero, se debe registrar el Service Worker en el PWA, que será el encargado de gestionar las notificaciones.

// Registro del Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(registration => {
    console.log('Service Worker registrado con éxito:', registration);
  })
  .catch(error => {
    console.log('Error al registrar el Service Worker:', error);
  });
}

Notifiaciones push

# PWA - Herramientas

Solicitar permiso para enviar notificaciones

Ejemplo básico

Se debe pedir al usuario permiso para enviar notificaciones. Esto se realiza con la API Notification.

// Solicitar permiso de notificaciones al usuario
if ('Notification' in window && 'serviceWorker' in navigator) {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      console.log('Permiso de notificaciones otorgado');
    } else {
      console.log('Permiso de notificaciones denegado');
    }
  });
}

Notifiaciones push

# PWA - Herramientas

Suscribirse al servicio de notificaciones push

Ejemplo básico

El siguiente paso es suscribir al usuario al servicio push, generalmente utilizando PushManager.

navigator.serviceWorker.ready.then(registration => {
  return registration.pushManager.subscribe({
    userVisibleOnly: true, // El usuario siempre verá la notificación
    applicationServerKey: urlB64ToUint8Array('PUBLIC_VAPID_KEY') // Se requiere una clave pública VAPID
  });
}).then(subscription => {
  console.log('Suscripción exitosa:', subscription);
  // Aquí puedes enviar la suscripción al servidor
}).catch(error => {
  console.error('Error al suscribirse:', error);
});

El método urlB64ToUint8Array convierte la clave pública VAPID de tu servidor en un formato adecuado. Las claves VAPID se utilizan para autenticar tus solicitudes de notificación push desde el servidor.

Notifiaciones push

# PWA - Herramientas

Manejar el evento push en el Service Worker

Ejemplo básico

Cuando se recibe una notificación, el Service Worker maneja el evento push y muestra la notificación en el dispositivo del usuario.

// service-worker.js
self.addEventListener('push', event => {
  const data = event.data.json(); // Obtener los datos de la notificación
  const options = {
    body: data.body,
    icon: 'icon.png',
    vibrate: [100, 50, 100], // Vibración
    data: { url: data.url }, // URL para abrir al hacer clic
    actions: [
      { action: 'explore', title: 'Ver más' },
      { action: 'close', title: 'Cerrar' }
    ]
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// Manejar el evento de clic en la notificación
self.addEventListener('notificationclick', event => {
  const notification = event.notification;
  const action = event.action;

  if (action === 'explore') {
    clients.openWindow(notification.data.url); // Abrir la URL cuando se hace clic
  }

  notification.close(); // Cerrar la notificación
});

Notifiaciones push

# PWA - Herramientas

Manejar el evento push en el Service Worker

Ejemplo básico

Cuando se recibe una notificación, el Service Worker maneja el evento push y muestra la notificación en el dispositivo del usuario.

// service-worker.js
// continuación del código
// 
// Manejar el evento de clic en la notificación
self.addEventListener('notificationclick', event => {
  const notification = event.notification;
  const action = event.action;

  if (action === 'explore') {
    clients.openWindow(notification.data.url); // Abrir la URL cuando se hace clic
  }

  notification.close(); // Cerrar la notificación
});

Notifiaciones push

# PWA - Herramientas

Enviar notificaciones desde el servidor

Ejemplo básico

Cuando se recibe una notificación, el Service Worker maneja el evento push y muestra la notificación en el dispositivo del usuario.

// service-worker.js
// continuación del código
// 
// Manejar el evento de clic en la notificación
self.addEventListener('notificationclick', event => {
  const notification = event.notification;
  const action = event.action;

  if (action === 'explore') {
    clients.openWindow(notification.data.url); // Abrir la URL cuando se hace clic
  }

  notification.close(); // Cerrar la notificación
});

Node.js

# PWA - Herramientas

Googlea Frexus
Haz clic en la opción: Generando valor agregado.
Pulsa sobre el menú: Academia.
Busca el nombre de la materia.
Lee el recurso: ¿node.js?
Responde lo siguiente:
- ¿Cuál es la principal ventaja de Node.js respecto al manejo de conexiones simultáneas?
- ¿Qué es NPM y por qué es importante para los desarrolladores que usan Node.js?
- ¿Cómo influye la arquitectura de Node.js en la creación de aplicaciones ligeras?

Node.js

# PWA - Herramientas

Googlea Frexus
Haz clic en la opción: Generando valor agregado.
Pulsa sobre el menú: Academia.
Busca el nombre de la materia.
Lee el recurso: ¿node.js?
Responde lo siguiente:
- ¿Cuáles son las principales empresas que utilizan Node.js en sus sistemas?
- ¿Qué desafíos presenta el uso de callbacks en Node.js?
- ¿Por qué Node.js es ideal para aplicaciones en tiempo real?

Node.js

# PWA - Herramientas

Googlea Frexus
Haz clic en la opción: Generando valor agregado.
Pulsa sobre el menú: Academia.
Busca el nombre de la materia.
Lee los recurso:
- Tipos de datos
- Operadores
- Variables
- Constantes
- Solicitar datos
Resuelve los ejercicios propuestos

Node.js

# PWA - Herramientas

Crea una carpeta con el nombre "web_node"
Ejecuta en la terminal el comando "npm init -y"
Instala el componente express usando el comando: "npm install express"
Crea el servidor (ver siguiente slide)
Ejecuta con el comando: "node index.js"
En la barra de tu navegador escribe: localhost:3000

Node.js

# PWA - Herramientas

// app.js o indexi.js
const express = require('express');
const app = express();
const PORT = 3000;

// Ruta para la página principal
app.get('/', (req, res) => {
  res.send('¡Bienvenido a mi página web en Node.js!');
});

// Inicia el servidor
app.listen(PORT, () => {
  console.log(`Servidor funcionando en http://localhost:${PORT}`);
});

Node.js

# PWA - Herramientas

Agregando html y css

Crea un directorio dentro de "web_node" que lleve el nombre de "public"
Dentro de public crea un fichero html y css
Edita el index.js agregando la siguiente linea:
- app.use(express.static('public'));
Ejecuta la aplicación (node index.js)

Node.js

# PWA - Herramientas

ejemplo index.js

// app.js o indexi.js
const express = require('express');
const app = express();
const PORT = 3000;

// Configura la carpeta public como el directorio de archivos estáticos
app.use(express.static('public'));

// Ruta para la página principal
app.get('/', (req, res) => {
  res.send('¡Bienvenido a mi página web en Node.js!');
});

// Inicia el servidor
app.listen(PORT, () => {
  console.log(`Servidor funcionando en http://localhost:${PORT}`);
});

Node.js

# PWA - Herramientas

Ejemplo index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página Web en Node.js</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>¡Bienvenido a Mi Página Web en Node.js!</h1>
  </header>
  <main>
    <p>Este es un ejemplo básico de cómo mostrar HTML y CSS en un servidor Node.js con Express.</p>
  </main>
</body>
</html>

Node.js

# PWA - Herramientas

Ejemplo styles.css

/* styles.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

header {
  text-align: center;
}

h1 {
  color: #333;
}

p {
  color: #555;
}

Node.js

# PWA - Herramientas

Ejemplo index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página Ejemplo con Bootstrap</title>
  <!-- Enlace a Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css"> <!-- Archivo CSS opcional -->
</head>
<body>
  <div class="container">
    <header class="my-4">
      <h1 class="text-center">¡Bienvenido a Mi Página Ejemplo!</h1>
    </header>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Inicio</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Página Principal <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Acerca de</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contacto</a>
          </li>
        </ul>
      </div>
    </nav>

    <main class="mt-4">
      <div class="row">
        <div class="col-md-8">
          <h2>Sección Principal</h2>
          <p>Esta es una página de ejemplo utilizando Bootstrap para el diseño y estilo.</p>
        </div>
        <div class="col-md-4">
          <h2>Sidebar</h2>
          <p>Contenido adicional o enlaces pueden ir aquí.</p>
        </div>
      </div>
    </main>

    <footer class="text-center mt-4">
      <p>&copy; 2024 Mi Página Ejemplo</p>
    </footer>
  </div>

  <!-- Enlace a Bootstrap JS y dependencias -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Node.js

# PWA - Herramientas

Actividad de aprendizaje

Googlea Frexus
Pulsa sobre la opción de generación de valor agregado.
Has clic en academia. luego en el nombre de la materia
Lee el recurso: solución creativa.
Responde las preguntas de reflexión.
Genera las páginas que requiere el proyecto.

Node.js

# PWA - Herramientas

Web Progresiva

Crea una carpeta con el nombre pwa_node
Dentro de la carpeta crea un direcctorio que se llame public.
Dentro de public crea una que se llame css, js, images

Node.js

# PWA - Herramientas

Web Progresiva

Inicia el proyecto en node ejcutando el comando npm init -y
Instala el modulo express, usando el comando npm install express.
Crea el archivo app.js que iniciará el server (ver slide siguiente)
Inicia el servidor ejecutando el comando node app.js

Node.js

# PWA - Herramientas

Web Progresiva

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

// Servir archivos estáticos
app.use(express.static(path.join(__dirname, 'public')));

// Ruta principal
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Servidor corriendo en el puerto ${PORT}`));

Ejemplo de app.js

Node.js

# PWA - Herramientas

Web Progresiva

Ejemplo index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo PWA</title>
  <link rel="stylesheet" href="/css/style.css">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Bienvenido a la PWA Ejemplo</h1>
  <p>Esta es una aplicación web progresiva utilizando Node.js.</p>
  <script src="/js/main.js"></script>
</body>
</html>

Node.js

# PWA - Herramientas

Web Progresiva

Ejemplo manifest.json

{
  "name": "Ejemplo PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Node.js

# PWA - Herramientas

Web Progresiva

Ejemplo de service workers (sw.js)

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/css/style.css',
        '/js/main.js',
        '/index.html',
        '/manifest.json'
      ]);
    })
  );
});

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

Node.js

# PWA - Herramientas

Web Progresiva

Ejemplo de main.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').then(registration => {
      console.log('Service Worker registrado:', registration);
    }).catch(error => {
      console.error('Registro de Service Worker fallido:', error);
    });
  });
}

Node.js

# PWA - Herramientas

Web Progresiva

Ejemplo de style.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

Node.js

# PWA - Herramientas

Web Progresiva

Ejemplo de style.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

Web Progresiva

By Alfredo de Jesús Gutiérrez Gómez

Web Progresiva

Se aborda los conceptos, ventajas, desventajas y un pequeño ejemplo

Alfredo de Jesús Gutiérrez Gómez

frexus.dev

{Web Progresiva}

{Presentación}

{Presentación}

Recomendaciones

Aplicación Web Progreciva

1

2

3

4

Usos

1.

2.

3.

Html básico

Librerías

Hosting y Optimización de PWAs

Actividad de aprendizaje

Enviando datos en pwa

Enviando datos en pwa

Enviando datos en pwa

Enviando datos en pwa

Enviando datos en pwa

Enviando datos en pwa

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Notifiaciones push

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Node.js

Web Progresiva

More from Alfredo de Jesús Gutiérrez Gómez