Apple Podcast (iTunes) | iVoox | Suscríbete al podcast

Ya he empezado a hablar con vosotros en vivo, en citas uno a uno por Hangout

Estoy muy muy contento :)

Ese es el regalo del que puedes disfrutar si te suscribes a La Selecta

Es toda una experiencia ya simplemente cuadrar la agenda, pero me interesa conocerte y aportar algo de lo que sé. Y escuchar lo que te interesa y cuáles son tus dificultades.

Instala tu web como su fuera una app si es PWA

El primer vídeo de una serie que prometo continuar donde describo los primeros pasos con una Progressive Web Application. A través del manifest.json podrás conseguir que tu web se pueda instalar como una aplicación más de la Play Store. Míralo con detalle en el vídeo: 

Suscríbete a mi canal de YouTube

Convierte tu web en Progressive Web Application

Progresivo es realmente porque se puede ir haciendo poco a poco. Esta no es una tecnología en bloque, sino un conjunto de herramientas para ir mejorando.

Aquí estamos delante de pequeñas piezas que nos van a ayudar a mejorar la web para que el usuario final tenga una experiencia mucho más próxima a la de una aplicación móvil. Esa es la base de las PWA.

Si tu web es 100% PWA cumplirá todas estas características

Será de confianza. 

Vas a tener un certificado SSL y se va a ver que tiene un trabajo específico de adaptación para que la experiencia de usuario sea mejor. También porque será responsive. 

Será rápida.

Porque tendrás la opción de cargar elementos offline aunque no haya conexión a red. E incluso sincronizar los datos en background, esto es, que la web sea capaz de recuperar o enviar datos almacenados en memoria cuando tenga conexión.

Será comprometida, tendrá “enganche”

Lo que en inglés se llama “engagment”. El usuario puede tener la sensación de utilizar una app porque la puede instalar en el escritorio de su dispositivo móvil. También porque podremos enviar push notifications para que aparecieran en la pantalla del móvil.

WR 27: Convierte tu web en PWA (Progressive Web App)

¿Qué es un Service Worker?

Estamos hablando de muchas cosas  como disponibilidad offline, sincronización en segundo plano, notificaciones, que ocurren cuando la web no está abierta o no tiene conexión a internet. 

¿Cómo? ¿Qué podemos interactuar con el usuario aunque la web no esté abierta? 

Efectivamente, una web funcionando como si no estuviera cargada, ¿que os parece? Todo esto es gracias  a los service worker.

Si la respuesta fuera fácil te la daría ya. Venga, que si que lo es, pero vamos a enlazarlo desde lo que si sabemos y conocemos.

Todos tenemos claro que cuando en un navegador cargas una web se descargar un HTML que está enlazado con otros ficheros. Imágenes, hojas de estilo y ficheros JavaScript. Estos ficheros JS el navegador es capaz de interpretarlos, es el cliente que sabe que hacer con ellos e interactúan con tu web en vivo.

Bien, un service worker es un fichero JavaScript. Para que el navegador se entere de que está ahí tenemos que registrarlo desde el javascript que cargamos con el HTML de la página. Hacemos un “include” por así decirlo y como ves en este código.

Ejemplo de como se registra un Service Worker desde un fichero JavaScript "de los de toda la vida".

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Hasta aquí todo normal, pero si te fijas en cómo se instala un service worker te darás cuenta que hace uno de una característica del navegador, no del DOM.

Así que una vez instalado el navegador es capaz de ejecutar este service worker en segundo plano

Y aquí es donde está la madre del cordero.

Cuando cierras la pestaña del navegador, esa instancia de web desaparece, ya no tienes acceso a ella en tu dispositivo. El service worker cubre esa falta y se queda trabajando en segundo plano, aunque no tengas abierta esa web o el navegador.

Todo esto te lo cuento en el podcast, pulsa play en el widget del inicio de la página para escucharlo.

¿Ganas de más?
Contacta ya conmigo en el formulario de contacto

Enlaces del programa

Cuánto me gustaría una reseña 5 estrellas en Apple Podcast (el antiguo iTunes).  ¡Gracias por anticipado! 

Encuéntranos por supuesto en twitter como @webreactiva y en nuestro flamante canal de telegram, t.me/webreactiva.

El próximo martes, ¡más!

Escrito por Dani

Soy programador web freelance. Especialista en frameworks basados en PHP como Drupal, aunque también me gusta trabajar con microframeworks en varios lenguajes y, por supuesto, tengo a Javascript de gran aliado. aquí.
comments powered by Disqus