apuntes y ejemplos de PWA

08-mobile/01-pwa/README.md

@@ -0,0 +1,52 @@
+# Curso de Aplicaciones Web Progresivas
+
+## Contenido del curso
+
+Contenido del curso
+
+[Módulo 1: Introducción](./doc/introduccion.md)
+- ¿Qué son las AWP?
+- Apps vs. Sites
+- Características de las AWP
+
+[Módulo 2: Aplicaciones web instalables](./doc/manifest.md)
+- El archivo manifest
+- Cómo incluir un manifest en nuestra web
+- Propiedades del archivo manifest
+- Banner de instalación
+- Eventos
+- Desinstalación de la aplicación
+- Compatibilidad en navegadores
+
+[Módulo 3: Service Workers](./doc/service_workers.md)
+- Qué son los SW
+- Cómo funcionan los SW
+- Cómo registrar un SW
+- Eventos
+
+[Módulo 4: Funcionamiento Offline](./doc/offline.md)
+- El interfaz NavigatorOnLine
+- La API Fetch
+- La API Cache
+- [Patrones de cacheo](./doc/patrones_cacheo.md)
+
+[Módulo 5: Notificaciones](./doc/notificaciones.md)
+- Notificaciones No persistentes
+- Notificaciones Persistentes
+- [Notificaciones Push](./doc/notificaciones_push.md)
+
+Módulo 6: Librerías y Herramientas
+- [Librería Workbox](https://developers.google.com/web/tools/workbox/)
+- [Herramienta de auditoría Lighthouse de Google](./doc/auditoria.md)
+
+## Enlaces de Interés
+
+- [Curso completo](https://github.com/carherco/curso-awp)
+- [Can I Use](https://caniuse.com/)
+- [Web App Manifest](https://www.w3.org/TR/appmanifest/)
+- [Service Workers](https://developer.mozilla.org/es/docs/Web/API/Service_Worker_API)
+- [Promises/A+](https://github.com/carherco/curso-promesas)
+- [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- [Cache](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
+- [Notifications](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)
+- [Battery Status](https://w3c.github.io/battery/)

08-mobile/01-pwa/doc/api_cache.md

@@ -0,0 +1,34 @@
+# API Cache
+
+Esta API no forma parte de los Service Workers
+
+- Es un “Living Standard”
+- Tiene soporte parecido a los Service Workers
+- Cachea respuestas de peticiones
+- No respeta las fechas de expiración de los headers
+
+https://developer.mozilla.org/en-US/docs/Web/API/Cache
+
+## Elementos de la API Cache
+
+### CacheStorage
+
+Lo tenemos disponible en la variable global *caches*.
+
+- **open('cacheName')**: Devuelve una Promise que se resuelve con el objeto Cache que coincida con el cacheName pasado. Si no existe, se crea un objeto Cache nuevo con dicho identificador.
+- **has('cacheName')**: Devuelve una Promise que se resuelve con *true* si existe un objeto con dicho nombre.
+- **delete('cacheName')**: Devuelve una Promise que se resuelve con *true* si existe el objeto Cache indicado. Dicho objeto se elimina. La promesa resuelve con *false* si no existe el objeto.
+- **keys()**: Devuelve una Promise que se resuelve con un array de strings correspondientes a todos los objetos Cache.
+- **match(request)**: Comprueba si la Request es una clave en alguno de los objetos Cache de este CacheStorage y devuelve una Promise que resuelve con la respuesta asociada al objeto encontrado en la cache.
+
+### Cache
+
+El método caches.open() nos da acceso a un objeto *cache*, con los sigientes métodos:
+
+- **match(request, options)**: Devuelve una Promise que resuelve con la respuesta asociada al primer match que encuentre en la cache.
+- **matchAll(request, options)**: Devuelve una Promise que resuelve con un array con todas las respuestas que hagan match.
+- **keys(request, options)**: Devuelve una Promise que resuelve con un array de *Cache keys*.
+- **add(request)**: Equivale a fecth() + put()
+- **addAll(requests)**: fetch() + put() para todas las peticiones del array.
+- **put(request, response)**: Añade una entrada en la cache.
+- **delete(request, options)**: Devuelve una Promise que resuelve a *true* si se encuentra el elemento y se elimina. Si el elemento no se encuentra, la promesa resuelve a *false*.

08-mobile/01-pwa/doc/api_fetch.md

@@ -0,0 +1,147 @@
+# API Fetch
+
+- Living Standard
+- Basada en Promesas
+- Disponible en window y en worker
+
+Página oficial: https://fetch.spec.whatwg.org/
+
+Soporte en Navegadores: https://developer.mozilla.org/es/docs/Web/API/Fetch_API
+
+## Conceptos
+
+- Request
+- Response
+- Headers
+- Body
+- Método fecth()
+
+### Request
+
+- url
+- method
+- headers
+- body
+- destination
+- referrer
+- referrerPolicy
+- mode
+- credentials
+- redirect
+- integrity
+- cache
+- clone()
+
+### Response
+
+- url
+- headers
+- Body
+- status
+- statusText
+- ok
+- type
+- redirected
+- useFinalUrl
+- clone()
+
+### Headers
+
+- append(name, value)
+- set(name, value)
+- delete(name)
+- get(name)
+- getAll()
+- has(name)
+- entries()
+- keys()
+- values()
+
+### Body
+
+- arrayBuffer()
+- blob()
+- formData()
+- json()
+- text()
+- bodyUsed
+
+
+## Ejemplos
+
+Petición con cabeceras y request:
+
+```javascript
+var misCabeceras = new Headers();
+
+var miRequest = { method: 'GET',
+               headers: misCabeceras,
+               mode: 'cors',
+               cache: 'default' };
+
+fetch('flores.jpg',miInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(miBlob) {
+  var objectURL = URL.createObjectURL(miBlob);
+  miImagen.src = objectURL;
+});
+```
+
+Comprobar que la respuesta es HTTP 200 OK:
+
+```javascript
+fetch('flores.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(miBlob) {
+      var objectURL = URL.createObjectURL(miBlob);
+      miImagen.src = objectURL;
+    });
+  } else {
+    console.log('Respuesta de red: ' + response.status);
+  }
+})
+.catch(function(error) {
+  console.log('Hubo un problema con la petición Fetch:' + error.message);
+});
+```
+
+Enviar datos JSON
+
+```javascript
+var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST',
+  body: JSON.stringify(data),
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res => res.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+```
+
+Enviar un archivo
+
+```javascript
+var formData = new FormData();
+var fileField = document.querySelector("input[type='file']");
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+```
+
+
+## PRECAUCIÓN: El cuerpo de las solicitudes y respuestas es de un solo uso
+

08-mobile/01-pwa/doc/auditoria.md

@@ -0,0 +1,19 @@
+# Auditoría PWA
+
+## Herramientas
+
+La herramienta más extendida y utilizada hoy en día es la extensión **Lighthouse** de Chrome.
+
+## Errores comunes
+
+- "Documento no tiene una meta descripción"
+
+```html
+<meta name="description" content="Una descripción breve de la aplicación">
+```
+
+- "No establece un color de tema de la barra de direcciones"
+
+```html
+<meta name="theme-color" content="#2F3BA2" />
+```

08-mobile/01-pwa/doc/index.md

@@ -0,0 +1,52 @@
+# Curso de Aplicaciones Web Progresivas
+
+## Contenido del curso
+
+Contenido del curso
+
+[Módulo 1: Introducción](introduccion.md)
+- ¿Qué son las AWP?
+- Apps vs. Sites
+- Características de las AWP
+
+[Módulo 2: Aplicaciones web instalables](manifest.md)
+- El archivo manifest
+- Cómo incluir un manifest en nuestra web
+- Propiedades del archivo manifest
+- Banner de instalación
+- Eventos
+- Desinstalación de la aplicación
+- Compatibilidad en navegadores
+
+[Módulo 3: Service Workers](service_workers.md)
+- Qué son los SW
+- Cómo funcionan los SW
+- Cómo registrar un SW
+- Eventos
+
+[Módulo 4: Funcionamiento Offline](offline.md)
+- El interfaz NavigatorOnLine
+- La API Fetch
+- La API Cache
+- [Patrones de cacheo](patrones_cacheo.md)
+
+[Módulo 5: Notificaciones](notificaciones.md)
+- Notificaciones No persistentes
+- Notificaciones Persistentes
+- [Notificaciones Push](notificaciones_push.md)
+
+Módulo 6: Librerías y Herramientas
+- [Librerías de javascript que implementan AWP](workbox.md)
+- [Herramienta de auditoría Lighthouse de Google](auditoria.md)
+
+## Enlaces de Interés
+
+- [Curso completo](https://github.com/carherco/curso-awp)
+- [Can I Use](https://caniuse.com/)
+- [Web App Manifest](https://www.w3.org/TR/appmanifest/)
+- [Service Workers](https://developer.mozilla.org/es/docs/Web/API/Service_Worker_API)
+- [Promises/A+](https://github.com/carherco/curso-promesas)
+- [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- [Cache](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
+- [Notifications](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)
+- [Battery Status](https://w3c.github.io/battery/)

08-mobile/01-pwa/doc/introduccion.md

@@ -0,0 +1,46 @@
+# Qué son las Aplicaciones Web Progresivas
+
+La definición de AWP es muy ambigua:
+
+Google: https://developers.google.com/web/progressive-web-apps/
+
+Wikipedia: https://en.wikipedia.org/wiki/Progressive_Web_Apps
+
+
+## Apps vs. Sites
+
+Sites:
+
+- Funcionan en cualquier dispositivo 
+- Consiguen nuevos usuarios de forma más efectiva que las apps.
+
+Apps: 
+
+- Más facilidad para fidelizar a los usuarios
+- Están instaladas en el dispositivo
+- Envían notificaciones
+- Algunas funcionan sin necesidad de conexión
+
+
+## Características de las AWP
+
+Las Aplicaciones Web Progresivas unifican las ventajas de las Webs y de las Apps:
+
+- Son Webs
+- Son instalables
+- Envían notificaciones
+- Pueden funcionar sin conexión
+
+Los estándares alrededor de las AWP son muy recientes, en su mayoría todavía *living standards* y hay que prestar atención al soporte que tiene cada navegador sobre las características que veremos durante el curso.
+
+
+## APPs Híbridas
+
+No hay que confundir las AWP con APPs híbridas.
+
+Las aplicaciones híbridas:
+
+- Están programadas con tecnología web (HTML y javascript).
+- Se compilan para las distintas plataformas.
+- Hay que subirlas a las tiendas.
+- No están alojadas en ningún servidor web.