Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bloques de construcción de una Aplicación Web Progresiva (PWA)

Bloques de construcción de una Aplicación Web Progresiva (PWA)

Las aplicaciones web progresivas (PWA) son sitios web creados con tecnologías web pero que actúan y se sienten como una aplicación mobile. Aprovechan de las últimas tecnologías para combinar lo mejor de las aplicaciones web y móviles, como por ejemplo permitirle a los usuarios instalar aplicaciones web en su pantalla de inicio, recibir notificaciones push e incluso trabajar sin conexión a Internet.

En esta presentación vamos a explorar qué son las PWAs, por qué son tan importantes, y vamos a explicar cómo construir uno con WordPress.

Leonardo Losoviz

June 16, 2017
Tweet

More Decks by Leonardo Losoviz

Other Decks in Programming

Transcript

  1. Aplicaciones Web Progresivas (“Progressive Web Apps” => PWAs) Una PWA

    aprovecha las últimas tecnologías para combinar lo mejor de aplicaciones web y móviles. Es un sitio web construido utilizando tecnologías web, pero que actúa y se siente como una aplicación móvil. Los navegadores permiten instalar PWAs en su pantalla de inicio, recibir notificaciones push y trabajar sin conexión.
  2. ¿Porqué usar PWAs? En promedio, una aplicación pierde el 20%

    de sus usuarios en cada paso entre el primer contacto del usuario con la app y cuando empieza a utilizarla. El usuario debe encontrar primero la app en una tienda de aplicaciones, descargarla, instalarla y, finalmente, abrirla. Con una PWA, los usuarios pueden comenzar a usarla inmediatamente. Cuando el usuario vuelve a la app, la misma pide de actualizar a una experiencia de pantalla completa.
  3. ¿Porqué usar PWAs? Si no estás en el 0,1% superior

    de las aplicaciones en el App Store, no tendrás un beneficio significativo de estar allí.
  4. Características de una PWA 1. Progresiva 2. Descubrible 3. Vinculable

    4. Responsive 5. Como una App 6. Independiente de conectividad 7. Enganchable 8. Instalable 9. Fresca 10. Segura
  5. 1. Progresiva Una aplicación web progresiva debe funcionar en cualquier

    dispositivo y mejorar progresivamente, aprovechando las funciones disponibles en el dispositivo del usuario y en el navegador. Características de una PWA
  6. 2. Descubrible Debido a que una aplicación web progresiva es

    un sitio web, debe ser detectable en los motores de búsqueda. Esta es una gran ventaja sobre las aplicaciones nativas, que todavía no se adecúan apropiadamente a la búsqueda. Características de una PWA
  7. 3. Vinculable Como otra característica heredada de sitios web, un

    sitio web bien diseñado debe utilizar el URI para indicar el estado actual de la aplicación. Esto permitirá a la aplicación web conservar o recargar su estado cuando el usuario la almacene en un bookmark o comparta la URL de la aplicación. Características de una PWA
  8. 4. Responsive La interfaz de usuario de una aplicación web

    progresiva debe ajustarse al factor de forma y al tamaño de la pantalla del dispositivo. Características de una PWA
  9. 5. Se comporta como una App Una aplicación web progresiva

    debe parecerse a una aplicación nativa y debe estar basada en el modelo de shell de aplicación, con un mínimo de actualizaciones de página. Características de una PWA
  10. 6. Independiente de conectividad Debe funcionar en áreas de baja

    conectividad o fuera de línea. Características de una PWA
  11. 7. Enganchable Los usuarios de aplicaciones móviles tienen más probabilidades

    de reutilizar sus aplicaciones y las aplicaciones web progresivas tienen la intención de lograr los mismos objetivos a través de funciones como notificaciones push. Características de una PWA
  12. 8. Instalable Una aplicación web progresiva se puede instalar en

    la pantalla de inicio del dispositivo, lo que lo hace fácilmente disponible. Características de una PWA
  13. 9. Fresca Cuando se publica contenido nuevo y el usuario

    está conectado a Internet, dicho contenido debe estar disponible en la aplicación. Características de una PWA
  14. 10. Segura Debido a que una aplicación web progresiva tiene

    una experiencia de usuario más íntima y porque todas las solicitudes de red pueden ser interceptadas a través de los service workers, es imprescindible que la aplicación sea alojada a través de HTTPS para evitar ataques del tipo man-in-the-middle. Características de una PWA
  15. Web App Manifest Un web app manifest es un archivo

    JSON simple, que permite: ejecutar la aplicación web en modo de pantalla completa como una aplicación independiente mostrar un ícono que se mostrará cuando se instale la aplicación en el dispositivo asignar un color de tema y de fondo a la aplicación
  16. Web App Manifest { "short_name": "Arrivals", "name": "Arrivals at Sky

    High", "description": "Progressive web application demonstration", "icons": [ { "src": "launcher-icon.png", "sizes": "48x48", "type": "image/png" }, { "src": "launcher-icon-96.png", "sizes": "96x96", "type": "image/png" }, { "src": "launcher-icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "launcher-icon-256.png", "sizes": "256x256", "type": "image/png" } ], "start_url": "./?utm_source=web_app_manifest", "display": "standalone", "orientation": "portrait", "theme_color": "#29BDBB", "background_color": "#29BDBB" } Es referenciado en <head> <link rel="manifest" href="./manifest.json">
  17. Web App Manifest Chrome en Android proactivamente sugerirá a través

    de un banner que el usuario instale la PWA, después de que el usuario haya visitado dos veces, con al menos 5 minutos entre cada visita.
  18. Service Workers Un service worker (SW) es un script que

    se encuentra entre un sitio web y la red, otorgando, entre otras cosas, la capacidad de interceptar las solicitudes de red y responder a ellas de diferentes maneras. Los service workers permiten que la aplicación funcione sin conexión a Internet
  19. Service Workers Los SW son scripts ejecutados por eventos, escritos

    en JavaScript Tienen acceso a eventos de todo el dominio, incluyendo peticiones de red Con ellos, podemos almacenar en caché todos los recursos estáticos
  20. Service Workers Los SW se ejecutan en un hilo separado

    y no están vinculados a ninguna pestaña específica se los puede iniciar en el background para manejar notificaciones push o sincronizaciones de datos
  21. Service Workers Se les asigna un ámbito de URL cuando

    se crean, y pueden interceptar y reescribir cualquier solicitud en este ámbito http://example.com/my-site/sw.js puede interceptar peticiones hechas a / my-site/ o debajo, pero no a http://example.com/
  22. Service Workers La API de los Service Workers hace uso

    intensivo de Promises Un Promise representa el resultado final de una operación asincrónica, incluso si el valor real no se conocerá hasta que la operación termine algún tiempo en el futuro. getAnAnswerToADifficultQuestionSomewhereFarAway() .then(answer => { console.log('I got the ${answer}!'); }) .catch(reason => { console.log('I tried to figure it out but couldn't because ${reason}'); }); event.respondWith( fetch(request) .then(response => addToCache(cacheKey, request, response)) .catch(() => fetchFromCache(event)) .catch(() => offlineResponse(opts)) );
  23. Service Workers // Register the service worker if available. if

    ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js').then(function(reg) { console.log('Successfully registered service worker', reg); }).catch(function(err) { console.warn('Error whilst registering service worker', err); }); } var cacheName = 'v1:static'; // During the installation phase, you'll usually want to cache static assets. self.addEventListener('install', function(e) { // Once the service worker is installed, go ahead and fetch the resources to make this work offline. e.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll([ './', './css/style.css', './js/build/script.min.js', './js/build/vendor.min.js', './css/fonts/roboto.woff', './offline.html' ]).then(function() { self.skipWaiting(); }); }) ); }); // when the browser fetches a URL… self.addEventListener('fetch', function(event) { // … either respond with the cached object or go ahead and fetch the actual URL event.respondWith( caches.match(event.request).then(function(response) { if (response) { // retrieve from cache return response; } // fetch as normal return fetch(event.request); }) ); });
  24. Estrategias de SW Cache only Network only Cache, falling back

    to network Cache & network race Network falling back to cache Cache then network Generic fallback ServiceWorker-side templating https://jakearchibald.com/2014/offline-cookbook/