Notificaciones push web VS Correo electrónico. ¿Qué canal es mejor para mi negocio?
30 julio, 2019
¿Qué limitaciones tiene la Progresive Web App en iOS y por qué?
10 septiembre, 2019
En anteriores entradas hemos hablado de las características que presentan las Progressive Web Apps:
- Son progresivas, es decir, funcionan para cualquier usuario en cualquier navegador
- Son responsive, adaptándose a cualquier pantalla (móvil, Tablet o PC)
- Pueden funcionar sin conexión
- Son instalables en ordenador o móvil
- Permite el envío de notificaciones Push, etc.
Sin embargo, ¿te has preguntado cómo es posible que una PWA haga lo que hace?
Es así gracias a la intervención de una serie de elementos que la integran.
En este post vamos a ver cuáles son dichos elementos y qué papel desempeñan en una Progressive Web App.
Service Worker
El Service Worker es el motor principal de la PWA.
Son scripts que el navegador ejecuta en segundo plano y se sitúan entre la aplicación web, el navegador y la red.
Digamos que un service worker para la caché es como una especie de proxy de JavaScript.
Actúa en todo el sitio web y se registra y activa cuando entramos en una página web con PWA, quedando activo incluso cuando cerramos la página web.
Se utiliza para controlar las peticiones que hace el usuario o que se realizan desde el servidor.
Dichas peticiones pueden ser principalmente de tres tipos:
1. Fetch
Son las peticiones del usuario para descargar elementos del servidor.
Por ejemplo, cuando entramos en una web, lo que hacemos es cargar el archivo index.html, y los elementos que se muestran son el resultado de hacer un llamamiento al servidor.
El Service Worker lo que hace es interceptar esta llamada y consulta si el contenido solicitado está cacheado en el ordenador del cliente y si es así lo devuelve de aquí, ahorrando pasar por el servidor. Si no está cacheado, lo descarga del servidor y lo almacena en caché para la próxima vez.
El hecho de poder entregar la versión cacheada de una página web, es lo que permite que una PWA pueda funcionar sin conexión a Internet, mejorando así los tiempos de respuesta.
2. Push
Son las peticiones del servidor para enviar notificaciones al usuario.
Dicho de otro modo, el Service Worker hace que pueda funcionar el envío de notificaciones Push.
3. Sync
Hace referencia a la sincronización de datos entre el usuario y el servidor.
Como puedes ver, el papel del Service Worker es fundamental en una PWA puesto que, según las peticiones que se reciba, va activando una u otra función: cacheo, sincronización en segundo plano, notificaciones Push, etc.
Protocolo HTTPS
Los Service Workers solo funcionan si la página web tiene instalado el certificado de seguridad SSL y es servida a través de HTTPS.
Es así por razones de seguridad, para que la comunicación esté cifrada y nadie pueda interceptar las peticiones, ya que los Service Workers capturan información muy comprometida.
Es por eso que una Progressive Web App no funcionará si el sitio web no cuenta con el protocolo HTTPS activado.
Application Manifest
El Application Manifest es un archivo en formato .json que sirve para proporcionar información sobre una aplicación, por ejemplo:
- Nombre de la PWA y el autor
- Descripción
- El icono que se mostrará cuando se instale la PWA
- La pantalla de inicio cuando pinchemos sobre el icono
- Color
- Formato de visualización (vertical u horizontal), etc.
Dicha información la recoge en un documento simplificado que se aloja en la raíz del dominio, si queremos que toda la página web sea una PWA, o en un directorio dentro de los archivos del sitio web, si queremos que solo una parte de la página web sea PWA.
Se puede dar al manifiesto el nombre que queramos pero normalmente se suele nombrar como manifest.json.
A continuación puedes ver un ejemplo de un manifiesto:
Una vez el manifiesto de la App esté creado y alojado en los archivos de la web, se agrega una etiqueta link a todas las páginas que compongan tu App Web, para informar al navegador acerca del mismo.
Ya conoces todos los elementos que integra una PWA.
El plugin Progressive Web App que ofrecemos a los usuarios cuentan con el Service Worker y el manifiesto web y se ponen en funcionamiento cuando lo instalas en tu web, por lo que tan solo deberás asegurarte de tener activo el protocolo de seguridad HTTPS para que la PWA funcione correctamente.
