Dr. Alfredo de Jesús Gutiérrez Gómez
Unidad 1.
Temas
# Temas
Introducción al desarrollo de Aplicaciones Web Progresivas
Unidad 1.
Temas
# Temas
Introducción al desarrollo de Aplicaciones Web Progresivas
Unidad 2.
Temas
# Temas
Desarrollo de aplicaciones web Progresivas.
Unidad 2.
Temas
# Temas
Desarrollo de aplicaciones web Progresivas.
Unidad 2.
Temas
# Temas
Desarrollo de aplicaciones web Progresivas.
Unidad 3.
Temas
# Temas
Distribución de la Aplicación Web Progresivas
Unidad 1.
Actividades a evaluar
# Temas
Introducción al desarrollo de Aplicaciones Web Progresivas.
Unidad 2.
Actividades a evaluar
# Temas
Desarrollo de aplicaciones web Progresivas.
Unidad 3.
Actividades a evaluar
# Temas
Distribución de la Aplicación Web Progresivas
Políticas de clase
# Temas
Lineamientos de clase
# Temas
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
Se enumeran las recomendaciones que se deben seguir para la realización de las actividades
# Recomendaciones
Recomendaciones
Trabajos
Párrafos
# Recomendaciones
Recomendaciones
Ortografía
Referencia bibliográfica
# Recomendaciones
Recomendaciones
Lista de referencias bibliográfica
Introducción y conclusión
# Recomendaciones
Recomendaciones
Formato del trabajo
# Recomendaciones
Recomendaciones
Tablas
# Recomendaciones
Recomendaciones
Imágenes / diagramas / gráficas
# Recomendaciones
¿Dudas, comentarios, preguntas?
Actividades de encuadre
# Temas
En una hoja escribe la respuesta a la siguiente pregunta:
# PWA
# 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
Limitaciones en Funcionalidades
Soporte Limitado en Navegadores
Interfaz de Usuario
Menor Visibilidad en Tiendas de Aplicaciones
# PWA - Desventajas
Desventajas
E-commerce
Experiencia rápida y similar a una app sin necesidad de que los usuarios descarguen una aplicación.
Ap. de Productividad
editores de texto, listas de tareas, calendarios y aplicaciones de notas que necesitan funcionar tanto en línea como fuera
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
Requerimientos de Software
# PWA - Software
Para casos académicos
<!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
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.
# 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.
# PWA - Herramientas
Herramientas | Librerías | Framework |
---|---|---|
# 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
# 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
# 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
# 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
# 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
# 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