Soy desarrollador fullstack y fundador de xiberty en donde construimos aplicaciones web, móviles (android e ios) y chatbots.
Abrir la tienda de apps
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
Abrir un enlace a la app
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
Abrir el URL de la APP
1000
100% de llegada
25 apps/mes
100+ sitios/mes
Uso de apps y visitas de sitios web por mes
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
Son solo sitios web con esteroides
1.
2.
3.
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.
https://www.w3.org/TR/appmanifest/
{
"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
Son scripts que son ejecutados por el navegador en un hilo independiente y pueden tener la capacidad de:
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);
});
}
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);
})
);
});
Internet
Cache
ServiceWorker
Página
1
2
3
2.1
2.2
Peticiones y el cache con
Una App Shell es la cantidad mínima de HTML, CSS y JS que tu web app necesitaría para cargar la primera pantalla.
El esqueleto the la app se cachea desde el inicio
El contenido dínamico se agrega asyncronicamente
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!
airhorner.com
¿Se acuerdan de nuestra app?