Progressive web apps:
UNIENDO DOS MUNDOS

Joel A. Villarreal Bertoldi

Joel A. Villarreal Bertoldi

¿Qué?
¿Cómo?
¿Dónde?

Web Mobile → PWA ← Native Apps

Compañeros inseparables. Casi como la pizza y la cerveza.

Basado en

progressive

enhancement

"It is now possible to provide a progressive, gradually enhanced experience across a wide array of browsers, using one markup document and a variety of different stylesheets"

"Inclusive Web Design for the Future" - Steve Champeon, SXSW 2003

Es decir: si se puede dar una mejor experiencia, ¡démosla!

Entonces, ¿Qué es una

progressive

Web APP?

A Progressive Web App uses

       modern web capabilities to deliver
       an app-like user experience. They
       evolve from pages in browser tabs
       to immersive, top-level apps,
       maintaining the web's low friction
       at every moment.

— Addy Osmani

Páginas que escapan de la pestaña del navegador para ofrecer una experiencia inmersiva de primera clase.

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Funciona para todos los usuarios, sin importar el navegador que estén usando. Las PWAs se construyen en torno al paradigma de progressive enhancement.

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Se ajustan a cualquier form factor (desktop, mobile, tablets, lo que el futuro traiga).

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Utilizando Service Workers las PWAs pueden operar en modo offline o en redes con una conexión de baja calidad.

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Las PWAs emplean el modelo App Shell para ofrecer navegación e interacciones al estilo de una app nativa. 

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

A través de procesos de actualización servidos vía Service Workers, la PWA siempre está actualizada.

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Las PWAs son servidas a través de HTTPS para asegurar la integridad del contenido ofrecido.

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Las PWAs pueden ser encontradas por buscadores gracias a los W3C Manifests y al scope de registración de los Service Workers.

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Las PWAs buscan la generación de hábitos de uso a través de características como Push Notifications.

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Los usuarios pueden conservar un shortcut a la PWA en su home screen sin las complicaciones de una app store.

UNA PWA ES...

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

Las PWAs se pueden compartir directamente a través de URLs con un proceso de instalación muy simple.

UNA PWA ES...

Chrome, Opera,

Firefox y PWAs:

un sólo corazón

Safari:

Te seguimos
esperando.

(No hay soporte
para service
workers)

Buenísimo, pero... ¿MANIFEST? ¿SERVICE WORKER? ¿Y ESO?
 

¿Cómo se hace?

lo primero es un

Web app

manifest

https://www.w3.org/TR/appmanifest/

{
  "lang": "es",
  "dir": "ltr",
  "name": "MercadoLibre",
  "description": "Compra y vende...",
  "short_name": "MercadoLibre",
  "icons": [{
    "src": "icon/lowres.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }],
  "scope": "/meli/",
  "start_url": "/meli/start.html",
  "display": "fullscreen",
  "orientation": "portrait",
  "theme_color": "yellow",
  "background_color": "whgite"
}

Es un archivo JSON que controla cómo la app se presenta al usuario en convivencia con otras apps, qué puede ejecutarse y de qué manera.

manifest.json

resultado

INSTALACIÓN
ACCESO @ HOME
SPLASH SCREEN

luego aplicamos

add to home
banners

  • A través del Web App Manifest.
  • Requiere HTTPS.
  • Debe incluir Service Worker.
  • El banner se activa luego
    de dos visitas con al menos
    5 minutos de tiempo
    transcurrido entre ambas.

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android

Resultado

IMAGINEMOS QUE ESTAMOS EN ESTA ISLA.

IMAGINEMOS QUE ESTAMOS EN ESTA ISLA.

sin internet.

pero queremos ver la fecha en que volvíamos a la civilización (viajamos
EN GLOBO AEROSTÁTICO).

(en el hipotético caso de que eso importara... yo me quedo ahí.)

Eso estaba en nuestra PWA, "GloboVuelos".

ACá podemos usar

service workers

Son scripts que corren en segundo plano, sensibles a eventos e incluso a tráfico de red, activándose sólo en respuesta a alguno de estos casos.

Permiten el acceso a la Cache API.

Cache API = pwa + mis datos

Cache API = pwa + mis datos

Nuestra app está cacheada,
carga mucho más rápido,
sin necesidad de conexión.

Los datos del usuario están cacheados. ¡Puedo ver la fecha de salida de mi globo aerostático!

Resultado

Herramientas:
sw-toolbox, sw-precache

Volvamos...

la cereza del postre:

pusH·PUSH!

(las notificaciones)

Permiten generar el hábito de usar la app, incluso fuera del navegador.

Requiere Web App Manifest + Service Worker.

Da acceso a la Push API.

¡OJO! Opera no tiene cerezas  notificaciones todavía.

Y eso no es todo...

PWA es un paradigma que fomenta el acoplado de múltiples herramientas que resultan en una notoria mejora de la experiencia de usuario.

background syncronisation

one-off

PERIODIC*

Un outbox para comunicarse con APIs en la nube, sensible a fallas de conectividad: intenta enviar datos a la API, y si falla, intenta más adelante, en segundo plano.

Permiten que el user-agent sincronice en el mejor momento de la manera menos disruptiva posible.

 

*en desarrollo

https://github.com/WICG/BackgroundSync/blob/master/explainer.md

web bluetooth

https://webbluetoothcg.github.io/web-bluetooth/

El objetivo es lograr la especificación de una API que permita a una Web App comunicarse con otros dispositivos vía Bluetooth.

Algunos casos de uso: Web Apps que controlen dispositivos a la Fitbit, unificar en un dashboard distintas métricas de diversos dispositivos Bluetooth, publicidad a partir de datos, control de audio...

PWA, además, se ve enriquecido por otros paradigmas provenientes de la esfera de UX.

https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail

RAIL
performance model 

Response
Animation
Idle
Load
  • Foco en el usuario (usuario feliz > respuesta rápida en todo device).
  • Respuesta inmediata (feedback < 100ms).
  • Render de frames en 16ms o menos.
  • Consistencia.
  • Contenido interactivo en 1000ms o menos.

flip-based
animations

First, Last, Invert, Play

https://aerotwist.com/blog/flip-your-animations/

  • Consiste en precalcular la animación de forma dinámica para minimizar el impacto de procesamiento.
  • En base a los estados inicial y final (First, Last), se aplican transformaciones inversas (Invert) y se ejecutan las animaciones desde un faux First al removerlas.

Veamos algunas plantillas que nos facilitan la implementación del paradigma PWA.

App shell

  • Fomenta el caching de la estructura de la app (para que opere offline) y la carga de contenido vía JavaScript.
  • Permite la aparición inmediata de meaningful pixels sin necesidad de estar conectado (incluso si el contenido es online).
  • Se recomienda combinar server-side rendering con client-side progressive rendering.
  • Boilerplate: Node + Express.js. Implementación casi 100% del paradigma PWA.

https://github.com/addyosmani/app-shell

Web starter kit

  • Incluye Web App Manifest, Chrome for Android Splash Screen, Service Worker Pre-Caching (sw-precache).
  • Punto de partida para aplicaciones que prefieren vanilla JS/ES2015.
  • Ideal para desarmar y rearmar acorde a las necesidades del proyecto.

https://github.com/google/web-starter-kit

Recapitulemos.

El puente que une los mundos de web mobile y native apps se hace con...

web app manifest
add to home banners
service workers
push notifications

(y otras cosillas...)

y acá
se acabó.

Pueden leer más en:

https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

https://developers.google.com/web/progressive-web-apps

https://www.w3.org/TR/appmanifest/

ALGUNAS HERRAMIENTAS:

App Shell: https://github.com/addyosmani/app-shell

Web Starter Kit: https://github.com/google/web-starter-kit

sw-precache: https://github.com/GoogleChrome/sw-precache/

también pueden consultarme ;)

¡Éxitos

y muchas

gracias!

Progressive Web Apps: Uniendo dos mundos

By Joel Alejandro Villarreal Bertoldi

Progressive Web Apps: Uniendo dos mundos

Una breve introducción al paradigma PWA (Progressive Web Apps), creando una experiencia de usuario que hereda lo mejor de dos mundos: Web Mobile y Native Apps.

  • 1,122

More from Joel Alejandro Villarreal Bertoldi