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
El Retorno de la web móvil con Progressive Web Apps
El retorno de la web móvil con "progressive web apps"
- 418