PDF de programación - Desarrolla Progressive Web Apps

Tabla de contenido

Acerca de este manual
Bloque 1. Introducción

Capítulo 1 - Una nueva forma de ofrecer experiencias de usuario en la Web
Capítulo 2 - El manifiesto de nuestra aplicación
Capítulo 3 - Los patrones App Shell y PRPL

Bloque 2. Los Service Workers

Capítulo 4 - Conceptos básicos

Bloque 3. La API Caché
Bloque 4. Mejorando el rendimiento de tu WebApp
Bloque 5. Integrando otras APIs

Notificando cosas - Web Push Notifications API
Gestionando credenciales - Credential Managment API
Accediendo a tu dispositivo - Device APIs

Bloque 6. Detalles muy importantes a tener en cuenta

RWD & Mobile First
La accesibilidad
La seguridad

1.1
1.2
1.2.1
1.2.2
1.2.3
1.3
1.3.1
1.4
1.5
1.6
1.6.1
1.6.2
1.6.3
1.7
1.7.1
1.7.2
1.7.3

1

Acerca de este manual

Acerca de este manual

Este manual es una recopilación de posts extraídos del blog El Abismo de Null sobre el
desarrollo de aplicaciones

Antes de empezar

Estructura

Aviso importante

Comparte

La guía no se ha creado con ningún fin lucrativo. No se esperan aportaciones económicas,
ni se cuenta con ningún derecho de autor explícito.

Simplemente ha sido creada por un afán por compartir y evangelizar sobre esta gran
herramienta de trabajo.

Si te gusta lo que has leído y crees que puede aportar valor a otras personas, comparte.
Cambia, elimina o añade todo aquello que tú creas que aporta y hazla tuya.

Puedes compartir por cualquier red social, blog o podcasts que creas conveniente.

Tuitea

Descarga

El manual se encuentra disponible en la plataforma GitBook de manera pública. Están
habilitados los formatos en MARKDOWN, HTML, PDF, EPUB y MOBI para que puedas
disfrutar de ella desde cualquier tipo de dispositivo.

Aunque las 5 formas han sido probadas, puede ser que se me hayan pasado aquellos
detalles de maquetación o de visualización más específicos, por lo que de ser así, te
agradecería que me lo comentaras o que me enviaras una Pull Request con los cambios.

2

Acerca de este manual

Feedback

Estoy disponible en todo momento para que puedas decirme qué te ha parecido el manual y
estoy abierto a cualquier comentario sobre cómo mejorarlo.

Puedes hablar conmigo por twitter o escribirme algún comentario en mi blog, o escribirme
directamente un correo electrónico.

Te intentaré contestar en la mayor brevedad posible. Lo prometo.

Agradecimientos

3

Capítulo 1 - Una nueva forma de ofrecer experiencias de usuario en la Web

Capítulo 1 - Una nueva forma de ofrecer
experiencias de usuario en la Web

Hola de nuevo. Tengo esto un poco abandonado, pero estoy de vuelta :). Empieza una
nueva serie en El Abismo. Dejamos por unos meses VueJS para adentrarnos en lo que se
conoce como Progressive Web Apps.

Como siempre, mejor que no nos pongamos un número determinado de posts a esta serie y
nos centremos en dedicar el tiempo necesario a cada concepto que encontremos en esta
nueva filosofía de desarrollar aplicaciones Web.

Desde el principio de esta serie, podrás encontrar el posts en su manual de Gitbook
correspondiente: 'Desarrolla Progressive Web Apps', por si te es más cómodo leer la serie
de esta forma. Sin más preámbulo, empecemos.

¿Qué es?

Progressive Web App es un concepto creado por la gente de Google.

Para que una aplicación Web pueda ser considerada como Progressive Web App, tiene que
cumplir tres requisitos indispensables. Tiene que ser:

Rápida: todas las acciones que se lleven a cabo por el usuario se tienen que realizar
en unos tiempos considerables y que la experiencia fluya para conseguir no aburrir al
usuario con esperas.

Confiable: Que las operaciones que nuestro usuario haga sean seguras y que tenga
sensación de que lo son. Cada vez compramos y vendemos más por Internet, es
necesario que tanto usuario como negocio sientan que las transacciones que llevamos
acabo se hacen de una manera segura.

Atractiva: Que el sistema ayude a que el usuario se encuentre cómodo y en todo
momento sepa donde está, que el uso de una aplicación a otra no suponga una curva
de aprendizaje tan grande que haga que podamos perderle por el camino. Parece que
estos tres requisitos no son nada nuevo. Muchos de los requisitos que la gente de
negocio pone a sus productos ya intentan cumplir con estas tres máximas.

Entonces ¿Qué diferencia una aplicación Web normal de una Progressive Web App?

4

Capítulo 1 - Una nueva forma de ofrecer experiencias de usuario en la Web

La diferencia está en cómo llegamos a conseguir estos objetivos. Google ha creado un
término muy 'marketiniano' que al final no es más que una lista de requisitos que tenemos
que cumplir para crear mejores experiencias y conseguir que nuestros usuarios usen más
nuestra aplicación.

La diferencia se encuentra también en que hasta ahora, cumplir con estos requisitos en
dispositivos móviles por medio de tecnología Web, se hacia algo complicado. ¿Por qué?
Por estas razones:

Las aplicaciones Web móviles tienen fama de ser lentas. No es fama en realidad, es un
hecho. Todos los 'benchmark' que comparan aplicaciones móviles web con
aplicaciones nativas, acaban dejando en muy mala posición a los estándares, la API
del DOM y el propio JavaScript interpretado hacen bastante daño a este rendimiento.

Las aplicaciones Web cada vez son más fiables, pero es cierto que el que yo pueda
acceder a ella desde cualquier lugar de Internet hace que pierda esa seguridad que si
puedo encontrar en un Store de Android o Apple, por tanto, la manera en que usamos
la red nos ha dado problemas de seguridad que Google intenta solventar con estas
nuevas técnicas.

Además, las aplicaciones Web móviles tienen mala fama de ser poco atractivas. La
Web no nació para ser consumida desde dispositivos móviles y aunque ya existen
muchas técnicas para que las interfaces se comporten mejor en dispositivos móviles,
todavía existe mucha distancia en cuanto a usabilidad respecto a las nativas:
Notificaciones, accesos directos, acciones gestuales, son cosas que la Web estaba por
resolver y que Google está haciendo un empujón por mejorar.

Entonces... si nos encontramos con este panorama ¿Cómo Google nos ayuda?

Google nos ayuda a conseguir estos objetivos de muchas maneras diferentes:

Por ejemplo, se han encargado de desarrollar librerías específicas para que
implementar ciertas funcionalidades sea más sencillo. Google cuenta con frameworks
CSS Responsive que dan un 'look & feel' parecido al que tienen las aplicaciones
nativas de Android.

Se han encargado de crear guías de estilo o documentación que nos permita llegar a
conseguir todas las funcionalidades de su checklist. Uno de estos checklist lo podemos
encontrar aquí.

Están implementando en su navegador aquellas funcionalidades del estándar que
hasta ahora estaban suponiendo un deterioro de rendimiento y calidad. Dos ejemplos
muy claros son la posibilidad de usar Web Workers o Notificaciones desde un
navegador Web como Chrome.

5

Capítulo 1 - Una nueva forma de ofrecer experiencias de usuario en la Web

Han mejorado sus herramientas de desarrollo para que nos den pistas y métricas sobre
cómo estamos haciéndolo y cómo podremos mejorarlo. En un apartado posterior
explicaremos un poco más de esto.

Así que, como vemos, Google está muy interesado en que estas funcionalidades estén
implementadas en nuestros sistemas para que la experiencia de Android sea todavía mejor.
El cómo lo hagamos, dependerá de nosotros, pero contamos con herramientas para
lograrlo.

¿Cómo hago mi aplicación web progresiva?

Lo primero que tenemos que tener en cuenta es qué funcionalidades tenemos que incluir en
nuestra aplicación para conseguirlo. Si nos guiamos por el checklist de Google, para que
una aplicación sea considerada PWA, tiene que cumplir como mínimo con esto:

Sitio accesible por HTTPS.
Las pantallas son responsive en tablet y móvil.
Todas las URLS que tienen nuestra aplicación pueden ser cargadas de manera offline.
Se puede añadir al menú de inicio.
La primera carga es rápida hasta con 3G.
La aplicación funciona en todos los navegadores.
La transición entre pantallas no es bloqueante y fluye.
Cada pantalla tiene una URL.

No creo que haga falta explicar ahora cada uno de los requisitos porque parecen bastante
explicativos, pero...

¿Cómo conseguiremos añadir nuestra Web al menú de inicio? ¿Cómo toda la aplicación
podrá ser accesible de manera offline? ¿Cómo haremos para que nuestra aplicación sea
rápida incluso con 3G?

Estas son las preguntas que espero resolver en esta serie. Este primer post nos muestra el
qué y el por qué. El restos nos enseñarán el cómo.

¿Cuento con alguna herramienta en la que
apoyarme?

Hay muchas herramientas en las que nos apoyaremos para saber si estamos consiguiendo
que nuestra aplicación sea considerada como una PWA.

Lighthouse

6

Capítulo 1 - Una nueva forma de ofrecer experiencias de usuario en la Web

La mejor herramienta que han creado para mejorar nuestra aplicación es sin duda
Lighthouse. Esta herramienta nos permite analizar nuestra código y nos enumera aquellos
puntos en los que nuestra aplicación no está cumpliendo con los conceptos de PWA.

Lo que hace es analizar uno a uno los puntos clave de la ckecklist y darnos una serie de
consejos para que podamos mejorar.

Me gusta porque te muestra una serie de diagramas del estado en el que se encuentra. En
muchos casos no querremos que nuestra aplicación cumpla con el 100% de los requisitos,
pero si que cumpla con lo que nosotros entendemos como critico para nuestro negocio.

La herramienta puede ser usada como un plugin de Chrome o con comandos de la CLI de
NPM. El primer método es muy útil para analizar aplicaciones que ya están en producción o
de las que no tenemos acceso al código y la segunda puede venir muy bien para incluirla en
procesos de integración continua o testing automático (si la app no llega a unas métricas
mínimas, no se desplegará o se integrará, por ejemplo).

Chrome Developer Tools

Esta es la herramienta de toda la vida. Tan usable y útil como siempre, pero vitaminada.
Además de contar con emuladores para