Progressive web apps

El retorno de la web móvil con:

Victor Aguilar

@vicobits

victor@xiberty.com

Victor Aguilar C

victor@xiberty.com

Soy desarrollador fullstack y fundador de xiberty en donde construimos aplicaciones web, móviles (android e ios) y chatbots.

 

Experiencia: Google I/O

Los amigos

Experiencia: GDG Global Summit

Las comunidades

Experiencia: Google I/O

El evento

Experiencia: Google I/O

Las personalidades

Los dispositivos móviles

Muchos estamos así todo el tiempo

El éxito de la web y las apps

  • 43% de la población en el mundo tiene acceso a internet. (ITU)

 

  • Para finales del 2015 se reportaron mas de 1859 millones de dispositivos móviles conectados a internet (statista.com)

Aprox. el 58% de la gente que se conecta

a internet lo hace desde su móvil

Número de usuarios de smartphone en el mundo

Elecciones sub-nacionales 2015 en Bolivia.

¿Cuantas veces nos conectamos a internet al día?

Las apps también han tenido éxito

Apps en las App Stores (Julio 2015)

El problema real de las apps

es ...

La adopción

Existen muchas apps para cada cosa

Aplicaciones zombi

Supongamos que queremos desarrollar una app

Airhorner: Una app corneta mas en el playstore

Airhorner

  • Será un app que toque un corneta cuando le damos click en el botón
  • Servirá para molestar a los amigos
  • También para ir al stadium

Airhorner

un 20% de usuarios

Cada paso antes de poder usar una app hace que perdamos

Airhorner

Abrir la tienda de apps

Airhorner

Lo que el usuario tiene que hacer

Buscar la app en la tienda

Click en instalar

Aceptar los permisos (sumisos)

Esperar la desCarga

Usar y esperar que guste

1000

800

640

512

410

328

67% de llegada(dinero) perdidas

Airhorner

Abrir un enlace a la app

Airhorner

Optimizando los pasos

Click en instalar

Aceptar los permisos (sumisos)

Esperar la descarga

Usar y esperar que guste

1000

800

640

512

410

59% de llegada (dinero) perdidas

airhorner.com

airhorner.com

¿Que pasaría si nuestra app fuese web?

Abrir el URL de la APP

1000

100% de llegada

Apps

Sitios web

25 apps/mes

100+ sitios/mes

Uso de apps y visitas de sitios web por mes

Ventajas de una web app

  • Baja fricción
  • Alto indice de llegada
  • El desarrollo es estandar

LA WEB MODERNA TIENE MUCHAS COSAS COOL

PUSH NOTIFICATIONS

SERVICE WORKERS

SOPORTE MULTIMEDIA

LOCAL STORAGE

WEB SOCKETS

WEB WORKERS

WEBAPP MANIFEST

RESPONSIVE DESIGN

INDEXED DB

MUCHISI.....MAS LIBRERIAS JS

Posibles desventajas de una web app

  • Se necesita conexión a internet

  • Baja performance con alto contenido

  • Abrir el navegador y escribir la URL es un paso mas mas que darle click al lanzador de una app

  • No todas las capacidades de las apps nativas  están disponibles en la web

OFFLINE con Service Workers

Cache

Manifiesto web

Notificaciones push

y mas

AL USO DE TODAS ESAS COSAS COOL EN CONJUNTO

LE LLAMAMOS

PROGRESSIVE WEB APPS

Son solo sitios web con esteroides

Características de una "Progressive web app"

RESPONSIVE DESIGN

OFFLINE

SENTIRSE Y LUCIR COMO UNA APP

ACTUALIZADA

1. Aplica

2. Puede funcionar de forma

3. Debe

4. Siempre esta

Características de una "Progressive web app"

SEGURA

IDENTIFICABLE

ACOPLABLE

INSTALABLE

5. Debe usar HTTPS para ser

6. Debe ser

7.

8.

para agregar nuevas funcionalidades

como las apps nativas

LINKEABLE

9.

para que sea facil de encontrar en la red

SI, SE PUEDE HACER TODO ESO EN LA WEB

PROGRESSIVE

WEB APPS

  • Responsive Design
  • HTTPS
  • Buena performance en animaciones
  • Buena performance en renderizado
  • LocalStorage, IndexedDB
  • HTML5 AppCache
  • Soporte offline
  • Arranque Rapido
  • Notificaciones Push
  • Splash screen
  • Agregar una app a la pantalla principal
  • Sincronización en 2do. plano

INGREDIENTES CLAVE

Recursos clave de las "Progressive web apps"

WEB MANIFEST

SERVICE WORKERS

APP SHELL ARCHITECTURE

1.

2.

3.

 WEB MANIFEST

Es un archivo JSON y es una especificación que aún esta en borrador en la W3C, sirve para declarar recursos de una página.

ICONOS

LANZADOR

ORIENTACIÓN DE LA PANTALLA

SPLASH SCREEN

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

DESCRIPCIÓN

COLORES

ETC

{
    "lang": "es",
    "dir": "ltr",
    "name": "Super web app",
    "description": "IO Extended La Paz",
    "short_name": "IO LP",
    "icons": [
        {
            "src": "icon/low.png",
            "sizes": "64x64"
        }, {
            "src": "icon/high.jpg",
            "sizes": "128x128"
        }
    ],
    "scope": "/io/",
    "start_url": "/io/index.html",
    "display": "fullscreen",
    "orientation": "landscape",
    "theme_color": "aliceblue",
    "background_color": "red"
}
<link rel="manifest" href="/webmanifest.json">

IDIOMA

LANZADOR

CONTEXTO

COMO SE MOSTRARÁ

ORIENTACIÓN

Service Workers

Son scripts que son ejecutados por el navegador  en un hilo independiente y pueden tener la capacidad de:

  • Interceptar las peticiones a servidores.
  • Controlar el cache
  • Enviar notificaciones push
  • Sincronizar datos
  • Cualquier tarea en segundo plano
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js', {
        scope: '/app/'
    }).then(function(reg) {
        console.log('SW Cargado', reg);
    }).catch(function(err) {
        console.log('Error: ', err);
    });
}

Registrando un Service Worker  sw.js 

self.addEventListener('install', function(event) {
  // Cache para la primera carga
    event.waitUntil(
        caches.open('static-v1').then(function(cache) {
            return cache.addAll([
                '/',
                '/styles/all.css',
                '/styles/imgs/bg.png',
                '/scripts/all.js'
            ]);
        })
    )
});
// Interceptando todas las peticiones
self.addEventListener('fetch', function(event) {
     event.respondWith(
         caches.match(event.request).then(function(response) {
             return response || fetch(event.request);
         })
     );
});

Service Worker  sw.js

Internet

Cache

ServiceWorker

Página

1

2

3

2.1

2.2

Service Workers

Peticiones y el cache con

App Shell Architecture

Una App Shell es la cantidad mínima de HTML, CSS y JS que tu web app necesitaría para cargar la primera pantalla.

App Shell Architecture

El esqueleto the la app se cachea desde el inicio

El contenido dínamico se agrega  asyncronicamente

Recap.

Progressive web apps

Son aplicaciones web que utilizan las capacidades de la web moderna  para verse y sentirse como una aplicación nativa, funcionan de forma offline, reciben push notification se sincronizan en segundo plano y lo mejor es que no necesitas instalarlas, tan solo abre la URL y ya!

Enlaces de interes  

Esta presentación: slides.com/jvacx/pwa  

Airhorner

airhorner.com

¿Se acuerdan de nuestra app?

victor@xiberty.com

El Retorno de la web móvil con Progressive Web Apps

By Victor Aguilar

Made with Slides.com

El Retorno de la web móvil con Progressive Web Apps

El retorno de la web móvil con "progressive web apps"

  • 594

More from Victor Aguilar