Este documento habla sobre las Progressive Web Apps (PWAs), que ofrecen una experiencia similar a las aplicaciones nativas a través de un navegador web. Explica que las PWAs son accesibles desde cualquier dispositivo con un navegador, funcionan sin conexión gracias al Service Worker, y pueden instalarse como aplicaciones de escritorio. Resalta que las PWAs aprovechan las ventajas de la web como su escalabilidad global y acceso abierto, mientras ofrecen una experiencia de usuario comparable a las aplicaciones móviles.
10. Abrir el navegador
Algo me motivó a acceder a la
aplicación y debo entrar a su sitio web
usando el navegador de mi teléfono
Total de interacciones: 1
17. Acceso desde
cualquier tamaño
Desde un teléfono, hasta lo que traiga
el futuro.
La aplicación debe ser funcional en
todos los casos.
Animación: Karol Podleśny
https://dribbble.com/shots/1277779-Morphing-devices-GIF
25. Nos ganamos un espacio en el <3 y el
escritorio de nuestros usuarios
Web App install
banner
26.
27. manifest.json
Lo referenciamos desde el archivo
index.html de nuestra aplicación:
<link rel="manifest"
href="manifest.json">
Pro tip: Agregar la propiedad “scope”
https://developers.google.com/web/fundamentals/web-app-manifest
32. Service Worker
¡Un proceso que siempre está activo y
que tiene muchos superpoderes!
● Offline
● App install
● Notificaciones push
* Sólo funciona si el sitio está siendo
cargado desde HTTPS
33. Service Worker
Registro
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Registration successful');
})
.catch(function(error) {
console.log('Service worker registration failed:', error);
});
}
34. Service Worker
Fetch
Caching Files with Service Worker
https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
// El "handler" más básico para fetch
slef.addEventlistener('fetcn', event => {
event.respondWith(fetch(event.request));
});
// ...
// Devolviendo lo que se encuentre en cache
// Y si no hay, ahí sí mando la solicitud a Internet
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
// ...