Progressive Web Apps (español - spanish)

Maximiliano Firtman @firt

ProgressiveWeb Apps

La web contraataca

mobile+web desarrollador & profesor

cursos dictados

Libros que escribí

Traducciones

preguntas

si! por favor!

al final

Empecemos!

preguntas

por supuesto

al final

Nativo vs. Web

by Luke Jones (flickr)

Si hacemos apps nativas

1- Costo Mayor 2- Hay que publicar en tiendas 3- No son multiplataforma

Si hacemos webs

1- Lentas 2- La gente no vuelve al sitio 3- Funcionan solo con internet

Progressive Web Apps

Progressive Web Apps

1- Definición Abierta 2- Comenzó con Google 3- Lo siguió Firefox, Opera, Samsung y ahora Microsoft

Una Progressive Web App es un modelo para crear experiencias tipo app usando las últimas tecnologías web progresivamente

Características

1- Carga Instantánea 2- Responsivo 3- Instalable

4- Seguro 5- Re-engageable 6- Rápido

progressive enhancement

progressive enhancement

no es nuevo

Progressive Web Apps

1- Definición abierta 2- Performance, App-like 3- Progressive Enhancement 4- Lo Mejor de la Web y Nativo

De la Web1- Linkeable 2- Descubrimiento 3- Fácil de distribuir 4- Fácil de actualizar 5- Usa Estándares

6- Acceso Offline 7- Icono instalado 8- Push Notifications 9- Experiencia Inmersiva 10- UI Rápida

De Nativo

Compatibilidad “Full”

futurefutureandroid / chromeos

PWAs in Action

1- Experiencias y Estadísticas 2- Galería

¡Basta de hablar y veamos una!

Experiencias

PWA.rocks

PWAs in Action

DEMOs

3x más tiempo en la Web

+40% re-engagement rate

+70% tasa de conversión para quienes usaron el ícono

+104% usuarios

2x páginas visitadas

+74% tiempo en la sesión

Mismo tiempo ocupado que en nativo

10x más barato adquirir usuario

Habilidades

Habilidades1- Cualquier estado de red 2- Sensores y hardware 3- Multimedia 4- Push Notifications 5- Home Screen (Android)

Limitaciones Hoy1- Multiplatforma 2- Responsive Design 3- First Class Citizen 4- Navegaciones en Redes Sociales 5- Distribución

Limitaciones

Se está trabajando en mejorar esto

Web APK1- Llegó a Chromium en mid-2016 2- Creará un APK al instalar 3- Home Screen y App Launcher 4- Integración del SO 5- Intent y App Link 6- Google Play Distribution?

Arquitectura

Pasos

1- Se desarrolla un sitio rápido Normal Server-side rendering AMP

Pasos

2- Agrear Service Worker

Pasos

3- Ofrecer Web Notifications

Pasos

4- Ofrecer experiencias del estilo App para el dispositivo

Architecture

Architecture

Architecture

Architecture

Architecture

Architecture

Architecture

Architecture

Architecture

Web App Manifest

Web App ManifestW3C Living Spec Archivo JSON Meta datos para PWA

Web App Manifest Hoy

futurefutureandroid / chromeos

Service Workers

Service Workers

• Es un thread • Tiene un ámbito definido • Poderes sobre el ámbito • Trabaja separado de un tab

¿Qué puede ser un ámbito?

• Una ruta de URL • Como https://mydomain.com/myapp

Poderes de un SW

Ver todos los recursos y pedidos de red que se hacen al ámbito

Se puede responder a nombre del servidor, sin ir al servidor

Poderes de un SW

Service Workers Hoy

flag

Detección de Red

Detección de Red

1- online / offline navigator events 2- Network Information API 3- fetch and timeouts

IndexedDB Cache Storage Web Storage

APIs de almacenamiento

AMP y PWAs

AMP-HTML

Páginas AMP

• carga inicial super rcpida • servida desde a) server o b) cdn • puede instalar un SW

amp-install-serviceworker

Páginas AMP

<amp-install-serviceworker src="/sw.js" data-iframe-src="https://domain.com/sw.html" layout="nodisplay"> </amp-install-serviceworker>

Web Push Notifications

Image by www.pushcrew.com

Casos de Uso • Mantener al usuario actualizado • Notificar mensajes importantes • Incrementar conversión

Push Hoy

flagmac only

Etapas • 1- Web Push Subscription • 2- Web Push Delivery

Cerrando

De la Web1- Linkeable 2- Descubrimiento 3- Fácil de distribuir 4- Fácil de actualizar 5- Usa Estándares

6- Acceso Offline 7- Icono instalado 8- Push Notifications 9- Experiencia Inmersiva 10- UI Rápida

De Nativo

La Web Contraataca

Foto de freefoto.com

[email protected]@firt

firt.mobi/hpmw