PWA y tecnología | GoodBarber

Service worker

Los service workers son un elemento clave de las PWAs. Un service worker es un script ejecutado por el navegador en el segundo plano. Se situa entre la PWA y el servidor. Dependiendo de la disponibilidad de la red, el service worker, actuando como un proxy, servirá los elementos de su caché o les recuperará desde la red en el servidor. Los service workers hace posible utilizar la PWA sin conexión. Entre otras tareas, los service workers también son reponsables de la recepción de las notificaciones push en tu PWA.

Notificaciones push para la web:
Firebase y APNs

Tu PWA puede recibir notificaciones push. Esta funcionalidad está asumida por la mayoría de los navegadores Web recientes. Para Chrome, Firefox y Opera, las notificaciones push están proporcionadas por Firebase, la plataforma de Google. En cuanto a Safari, las notificaciones están proporcionadas por APNs, la plataforma de Apple.

Asistencia por los navegadores

Tu PWA se adapta. Ofrecerá siempre la mejor experiencia posible en vista de las capacidades del navegador en la cual se ejecuta. Cuanto más moderno sea el navegador, mejor será la experiencia.

* Esta funcionalidad estará próximamente disponible en GoodBarber

** Disponible con Chrome 68

** Estatuto funcional del Webkit para el manifiesto Web App https://webkit.org/status/#specification-web-app-manifest

* Esta funcionalidad estará próximamente disponible en GoodBarber

Esta tabla está mantenida al día por GoodBarber bajo una licencia Creative Commons

Framework

Angular

Tu PWA está construida con la última versión estable de Angular. Angular es un framework desarrollado por Google. Es particularmente adaptado para crear PWAs. Permite crear experiencias de usuario similares a las aplicaciones nativas, pero en el navegador Web: alto rendimiento, funcionamiento sin conexión, sin barrera a la instalación. Tu PWA está concebida para ejecutar un código fuertemente optimizado para las máquinas virtuales JavaScript actuales. Combinando la generación de página del lado del servidor (SSR) para fines de SEO y la generación de página del lado del cliente (CSR) para una visualización rápida, sin conexión y con fluidez, GoodBarber te proporciona una PWA isomorfa muy completa.

Angular Material

Tu PWA funciona con la la nueva versión de Angular Material UI Framework. Cada interacción que construyes sigue un estilo moderno unificado. El interfaz es claro, consistente, y construido para trabajar sin dificultad a la vez para móvil, tablet y desktop. Material Design es un languaje visual inventado por Google.

HTTP/2

Tu PWA está servida por HTTP/2. Lal última y potente versión del protocolo http. HTTP/2 soporta la compresión de la cabecera, un paquete inteligente de gestión del streaming, la multiplexación y prioridad de las consultas. Acelera la carga de la página y reduce el tiempo de espera.

El futuro de las apps

App Shell

La app shell es el esqueleto de tu PWA. Contiene el UI y los componentes básicos para construir tu app en el navegador. La app shell guarda el UI de tu PWA localmente, mientras el contenido está recuperado de manera dinámica a traves de un API. Gracias al app shell, sobre todo para las visitas repetidas, tu PWA carga rapidamente, utiliza la menor cantidad posible de datos, utiliza los elementos estáticos del caché local y separa el contenido de la navegación.

PWA isomorfo

Tu PWA ejecuta codigo JavaScript a la vez del lado del servidor y del lado del cliente. La primera consulta del navegador está ejecutada del lado del servidor, a lo que se domina Server Side Rendering (SSR). No obstante, la PWA también efectúa cálculos en el navegador, a lo que se domina Client Side Rendering (CSR). El SSR es excelente para la optimización en buscadores porque permite a los robots de los motores de búsqueda indexar una página totalmente construida. El CSR permite a la app de funcionar sin conexión ya que todo el JavaScript de la PWA está descargado en el segundo plano y almacenado en caché.

Gestión del caché local por Header API

Tu PWA descarga los recursos desde la red únicamente cuando es necesario. Hemos desarrollado una API dedicada para gestionar las respuestas de encabezamiento. Un encabezamiento personalizado recupera la última fecha de modificación de los ficheros. Se obtiene esta información con un ping de 45 octetos (el tamaño ha sido dividido por 1000) antes de solicitar nuevos ficheros. No es necesario retransmitir los recursos pedidos, una respuesta HTTP 304 está enviada por el servidor y la PWA utiliza su caché local.

Modelo PRPL

Tu PWA está construida según el módelo PRPL. Este modelo está utilizado para ofrecer una experiencia Web móvil más rápida. Permite resolver los problemas relativos a una cobertura de red incierta, o a teléfonos móviles poco potentes, utilizando las tecnologías web más modernas para siempre ofrecer una buena experiencia del usuario. PRPL significa: Empujar los recursos críticos para la visualización inicial / Realizar la visualización inicial / Pre-esconder las pantallas secundarias / “Carga retardada” y crear las visualizaciones quedando a la demanda. Gracias a este modelo, el coste de la primera interacción con tu PWA es mínima. A medida que el usuario continúa navegar, los recursos están inteligentemente puestos en caché, lo que confiere a tu PWA una experiencia de usuario de primera clase.

Velocidad

Compresor de imagen optimizado

Para minimizar el consumo del ancho de banda y reducir el tiempo de carga, nuestros ingenieros han desarrollado un algoritmo dedicado para gestionar la compresión de las imágenes. Cada vez que descargues una imagen, varias copias de diferentes tamaños son creados. Cada copia está comprimida con nuestro algoritmo que ha sido codificado para minimizar la pérdida de calidad. Luego, las copias están utilizadas para proporcionar una imagen que nunca es más grande que la versión mostrada en la pantalla del usuario. Este modo operatorio permite mejorar la calidad de tu PWA y quedar conforme a las recomendaciones de Google Lightouse, cambiando las imágenes rápidamente y consumiendo menos datas celulares.

ORIGINAL

COMPRIMIDO

CDN

Cada recurso estático de tu PWA (código JavaScript y imágenes) está distribuido por una red de difusión de contenido (CDN) utilizando el protocolo HTTP/2. En todo el mundo, tu PWA carga rápidamente. Los recursos están situados a proximidad de todos tus usuarios finales. Nos apoyamos en la red mundial de Stack Path. Los recursos están almacenados en Datacenter de alta gama que disponen de conexiones 10Go, repartidos en 18 sitios en todo el mundo.

Gestión asíncrona de las tipografías

En tu PWA, las tipografías están cargadas de manera asíncrona para aumentar la rapidez de carga de las páginas. Dado que las tipografías son ficheros que bloquean la visualización durante la creación de una página Web si son ausente, utilizamos las tipografías por defecto del dispositivo durante la primera interacción del usuario con la aplicación. En el segundo plano, la PWA carga las tipografías faltantes y les utiliza cuando están descargadas completamente. Durante este tiempo, el usuario puede acceder al contenido en un santiamén.

Optimización para buscadores

URL Slugs

El enlace hypertext es el elemento fundamental para la distribución de tu PWA. El Slug es el URL exacto de una página Web. Puedes personalizar cada Slug de tu PWA, para que la URL de las páginas importantes sean SEO friendly. Dado que cada página de tu PWA tiene un Slug dedicado, un enlace profundo hacia una página interna de tu PWA es fácil de hacer.

HTTPS

Los service workers pueden realizar operaciones muy potentes en el navegador del usuario. Para asegurar un buen uso de esta potencia, es posible registrarse a un sevice worker en una página servida por https. Todas las paginas de tu PWA estan servidas por https por defecto. Garantiza que el service worker instalado en el navegador no haya sido alterado. También es un factor positivo para la referencia de tus paginas en los buscadores.

Manifest.json

Tu PWA está descrita en un fichero JSON llamado el manifiesto (Web App Manifest). Contiene las meta-informaciones necesarias a la indexación de tu app en un Store como el Windows Store, o a la instalación de tu app en la pantalla de inicio de tu usuario. El Web App Manifest es una especificación establecida por el W3C.