Progressive Web Apps (español - spanish)

Embed Size (px)

Text of 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- Definicin 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 tecnologas web progresivamente

  • Caractersticas

    1- Carga Instantnea 2- Responsivo 3- Instalable

    4- Seguro 5- Re-engageable 6- Rpido

  • progressive enhancement

    progressive enhancement

  • no es nuevo

  • Progressive Web Apps

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

  • De la Web1- Linkeable 2- Descubrimiento 3- Fcil de distribuir 4- Fcil de actualizar 5- Usa Estndares

    6- Acceso Offline 7- Icono instalado 8- Push Notifications 9- Experiencia Inmersiva 10- UI Rpida

    De Nativo

  • Compatibilidad Full

    futurefutureandroid / chromeos

  • PWAs in Action

    1- Experiencias y Estadsticas 2- Galera

  • Basta de hablar y veamos una!

  • Experiencias

  • PWA.rocks

  • PWAs in Action

    DEMOs

  • 3x ms tiempo en la Web

  • +40% re-engagement rate

  • +70% tasa de conversin para quienes usaron el cono

  • +104% usuarios

  • 2x pginas visitadas

  • +74% tiempo en la sesin

  • Mismo tiempo ocupado que en nativo

  • 10x ms 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- Distribucin

  • 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- Integracin del SO 5- Intent y App Link 6- Google Play Distribution?

  • Arquitectura

  • Pasos

    1- Se desarrolla un sitio rpido 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

    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

  • Deteccin de Red

  • Deteccin 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

  • Pginas AMP

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

    amp-install-serviceworker

  • Pginas AMP

  • Web Push Notifications

  • Image by www.pushcrew.com

    http://www.pushcrew.com

  • Casos de Uso Mantener al usuario actualizado Notificar mensajes importantes Incrementar conversin

  • Push Hoy

    flagmac only

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

  • Cerrando

  • De la Web1- Linkeable 2- Descubrimiento 3- Fcil de distribuir 4- Fcil de actualizar 5- Usa Estndares

    6- Acceso Offline 7- Icono instalado 8- Push Notifications 9- Experiencia Inmersiva 10- UI Rpida

    De Nativo

  • La Web Contraataca

  • Foto de freefoto.com

    firtman@gmail.com@firt

    firt.mobi/hpmw