Sigue a Papá Noel como AWP

Visita el sitio

Resumen

Rastreador de Santa se actualizó rápidamente a una app web progresiva sin conexión para la temporada de festividades de 2016, gracias en parte a nuestro diseño de escena existente.

Resultados

  • Santa es una app web progresiva (AWP) que admite la opción de agregar a la pantalla principal (ATHS) y sin conexión
  • El 10% de las sesiones aptas comenzó con el ícono de ATHS
  • El 75% de los usuarios admitió elementos personalizados de forma nativa y shadow DOM, dos componentes principales de los componentes web.
  • Puntuación de Lighthouse de 81
  • El uso sin conexión, a través de la API de Service Worker, está vinculado con la carga diferida para almacenar en caché solo las escenas visitadas y actualizarlas de forma silenciosa en versiones nuevas.

Información general

Santa Tracker es una tradición navideña aquí en Google. Todos los años, puedes celebrar la temporada con juegos y experiencias educativas durante todo diciembre. Mientras Santa se toma un merecido descanso, los duendes trabajan para lanzar Sigue a Santa como código abierto, tanto en la Web como para Android.

Sigue a Papá Noel es un sitio interactivo y extenso con muchas "escenas" únicas, escritas con Polymer, y que admite la mayoría de los navegadores modernos. La detección de funciones determina si el navegador de un usuario es "moderno": Santa requiere Set y la API de Web Performance, entre otras.

En 2016, actualizamos el motor detrás de Sigue a Papá Noel para brindar una experiencia sin conexión en la mayoría de las escenas. Esto excluye las escenas respaldadas por videos de YouTube o aquellas relacionadas con la ubicación en vivo de Papá Noel, que por supuesto solo está disponible con una conexión directa con el Polo Norte. 📶☃️

Sigue a Santa en un dispositivo Android
Sigue a Santa en un dispositivo Android

Desafíos

Papá Noel incorpora un diseño adaptable que funciona bien en teléfonos, tablets y computadoras de escritorio. El sitio deleita con contenido multimedia de gran calidad, que incluye imágenes estilizadas y audio con temática festiva. Sin embargo, una versión normal de Sigue a Papá Noel equivale a cientos de megabytes. Esto se debe a varios motivos:

  • Papá Noel admite más de 35 idiomas, por lo que muchos recursos deben duplicarse.
  • Las distintas plataformas admiten diferentes medios (por ejemplo, mp3 y ogg).
  • A veces, los archivos multimedia se proporcionan en diferentes tamaños y resoluciones.

Los duendes de Santa también trabajan arduamente durante todo diciembre y, a menudo, lanzan actualizaciones nuevas y críticas durante el mes. Esto significa que es posible que los recursos que el navegador del usuario ya haya almacenado en caché deban actualizarse en visitas repetidas.

Estos desafíos:

  • Grandes recursos multimedia para diferentes "escenas"
  • Cambios que se implementaron durante el mes

... lo que provocará que una estrategia sin conexión no sea apropiada.

Santa, construido con Polymer

Vale la pena tomar distancia y hablar sobre el diseño general de Papá Noel antes de profundizar en cómo lo actualizamos a una AWP sin conexión.

Santa es una aplicación de una sola página, escrita originalmente en Polymer 0.5 y que ahora se actualizó a Polymer 1.7. Santa está formado por un conjunto compartido de códigos: el router, recursos de navegación compartidos, etc. También tiene muchas "escenas" únicas.

Precargador

Se puede acceder a cada escena a través de una URL diferente (/village.html, /codelab.html y /boatload.html), y es su propio componente web. Cuando un usuario abre una escena, precargamos todos los elementos HTML y recursos (imágenes, audio, CSS y js), que se encuentran en /scenes/[[sceneName]] en el repositorio de Sigue a Santa. Mientras eso sucede, los usuarios ven un precargador amigable que muestra el progreso.

Este enfoque significa que no tenemos que cargar elementos innecesarios para escenas que el usuario no ve (lo cual es una gran cantidad de datos). También significa que debemos mantener un "manifiesto de caché" interno de todos los recursos necesarios para cada escena. El manifiesto de caché es un archivo JSON que almacena una asignación del nombre de archivo a un hash MD5 de su contenido.

Carga lo que usas

Este modelo ahorra ancho de banda y solo entrega los recursos necesarios para las escenas que visita un usuario, en lugar de precargar todo el sitio de una sola vez. Sigue a Papá Noel aprovecha la capacidad de Polymer para actualizar elementos personalizados durante el tiempo de ejecución y no durante la carga. Considera el siguiente fragmento:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

Sigue a Papá Noel sigue estos pasos para cargar una escena, p.ej., boatload-scene:

  1. Todos los elementos de la escena (incluido <boatload-scene>) son desconocidos inicialmente y se tratan como HTMLUnknownElement con algunos atributos adicionales.
  2. Cuando se cambia la escena seleccionada, se notifica al elemento <lazy-pages>.
  3. El elemento <lazy-pages> resuelve el elemento de la escena y el atributo path, y carga la importación scenes/boatload/boatload-scene_en.html de HTML. Contiene el elemento Polymer y sus elementos dependientes.
  4. Se muestra el precargador amigable.
  5. Una vez que se carga y ejecuta la importación de HTML, <boatload-scene> se actualiza de forma transparente a un elemento Polymer real, lleno de alegría navideña. 🎄🎉

Este enfoque presenta algunos desafíos. Por ejemplo, no queremos incluir componentes web duplicados. Si dos escenas usan un elemento común, p.ej., paper-button, lo quitamos como parte de nuestro proceso de compilación y, en su lugar, lo incluimos en el código compartido de Santa.

Diseño sin conexión

Sigue a Papá Noel ya está cuidadosamente segmentado en escenas gracias a Polymer y lazy-pages, además de que cada escena tiene su propio directorio. Diseñamos el service worker de Sigue a Papá Noel, la pieza principal que permite que el funcionamiento sin conexión, que se ejecuta en el navegador del usuario, sea consciente del código compartido frente a la distinción de "escena".

¿Cuál es la teoría detrás del Service Worker? Cuando un usuario de un navegador compatible carga tu sitio, el HTML de frontend puede solicitar que se instale el service worker. En Sigue a Santa, el service worker vive en /sw.js. Esto activa un evento install que almacenará en caché todo el código compartido de Santa, por lo que no es necesario recuperar nada durante el tiempo de ejecución.

Diagrama de flujo de SW

Una vez instalado, el Service Worker puede interceptar todas las solicitudes HTTP. En Sigue a Papá Noel, el flujo de decisión simplificado tiene el siguiente aspecto:

  1. ¿La solicitud ya está almacenada en caché?
    • Perfecto. Muestra la respuesta almacenada en caché.
  2. ¿La solicitud coincide con un directorio de escena, como "Scene/Boatload/Boatload-scene_en.html"?
    • Realiza una solicitud de red y almacena el resultado en la caché antes de mostrárselo al usuario.
  3. De lo contrario, realiza una solicitud de red normal.

Nuestro flujo y evento install permiten que Sigue a Papá Noel cargar, incluso cuando el usuario no está conectado. Sin embargo, solo estarán disponibles las escenas que un usuario cargó anteriormente. Es perfecto para volver a jugar un partido y superar tu puntuación más alta.

Los observadores expertos podrían notar que nuestra estrategia de almacenamiento en caché no permite cambios en el contenido. Una vez que un archivo se almacena en caché en el navegador de un usuario, nunca se modificará. Luego hablaremos de eso.

Lo publicaremos

Como mencionamos, los duendes de Santa trabajan arduamente durante todo diciembre y, a menudo, tienen que lanzar nuevas actualizaciones durante el mes. Cuando se crea un lanzamiento de Sigue a Santa, se le asigna una etiqueta única, p.ej., v20161204112055 es la marca de tiempo de la versión (11:20:55 del 4 de diciembre de 2016).

Para esta versión etiquetada, generamos un hash MD5 de cada archivo y lo almacenamos en nuestro “manifiesto de caché”. En un disco de estado sólido moderno, esto solo agrega unos segundos al proceso de compilación.

Cada versión se implementa en una ruta única en el servidor de almacenamiento en caché estático de Google. Es decir, las versiones anteriores nunca se quitan. Esto significa que, después de una nueva actualización, todos los elementos tendrán una URL diferente, incluso si no cambiaron, y todo lo que almacene en caché el navegador o el service worker será inútil, a menos que hagamos trabajo adicional.

También implementamos una versión nueva de lo que llamamos los recursos "prod" (HTML de índice de Santa y service worker) que se encuentran en https://santatracker.google.com/. Esto reemplazará la versión anterior.

Diagrama estático

Cada vez que se cargue Sigue a Santa, el navegador buscará un service worker actualizado y lo recuperará si está disponible. En nuestro caso, cada versión genera un código con una diferencia de bytes. El navegador ve esto como una actualización y realiza un nuevo evento install.

En este punto, los navegadores de los usuarios verán el nuevo “manifiesto de la caché”. Esto se comparará con la caché existente del usuario y, si los elementos tienen un hash MD5 diferente, los borraremos de la caché y le pediremos al navegador que vuelva a recuperarlo. Sin embargo, en la mayoría de los casos, el contenido almacenado en caché es prácticamente el mismo o solo tiene pequeñas diferencias.

Diagrama de la caché

En Sigue a Santa, la actualización del service worker hace que el navegador del usuario se vuelva a cargar de inmediato.

Experiencia de navegación sin conexión

Por supuesto, también tuvimos que hacer algunos cambios en la IU para admitir una experiencia sin conexión y facilitar la comprensión para los usuarios que quizás no esperen que un sitio web funcione sin conexión.

Un pequeño banner te indica cuando estás navegando sin conexión. Todas las escenas que no están almacenadas en caché están "congeladas" y no se puede hacer clic en ellas. De esa manera, los usuarios no podrán acceder a contenido que no está disponible.

Sin conexión

Sigue a Papá Noel realiza solicitudes periódicas a la API de Santa. Si estas solicitudes fallan o agotan el tiempo de espera, supondremos que el usuario no tiene conexión. Usamos esta API en lugar de la propiedad navigator.onLine integrada del navegador: esto solo nos indicaría si el usuario está en línea o no. (esto también se conoce como Lie-Fi).

La conexión internacional

Aunque la mayoría de nuestros usuarios están en inglés (seguido de japonés, portugués, español y francés), Santa se construye y se lanza en más de 35 idiomas diferentes.

Cuando un usuario carga Sigue a Santa, utilizamos el idioma del navegador y otras indicaciones para elegir el idioma que se mostrará. La mayoría de los usuarios nunca sobrescriben este idioma. Sin embargo, si un usuario elige un nuevo idioma mediante el selector, consideramos que hay una actualización disponible, al igual que en el caso anterior, cuando hay disponible una nueva versión de Sigue a Santa.

Lenguaje

En otras palabras, la versión actual de Sigue a Santa para el service worker es en realidad una tupla de (build,language).

Agregar a la pantalla principal

Como Santa trabaja sin conexión y proporciona un service worker, se solicita a los usuarios aptos que lo instalen en su pantalla principal. En 2016, alrededor del 10% de las cargas aptas provenían del ícono de la pantalla principal.

Conclusión

Pudimos convertir rápidamente Sigue a Papá Noel en una AWP sin conexión, lo que posibilitó una experiencia confiable y atractiva, gracias a nuestro diseño de escena existente, que fue fácil gracias al uso que hacíamos de Polymer y de componentes web. También aprovecha nuestro sistema de compilación para realizar actualizaciones eficientes, que invalidan solo los recursos modificados.

Si bien Papá Noel es en gran medida una solución personalizada, muchos de sus principios se pueden encontrar en la Caja de herramientas de la app del proyecto Polymer. Te sugerimos que la pruebes si estás compilando una AWP nueva desde cero o, si buscas un enfoque independiente del framework, que pruebes la biblioteca de Workbox.