Gracias por seguir Google I/O. Mira contenido a pedido.

Se usó la API de Cloud Translation para traducir esta página.

Sigue a Papá Noel como AWP

Resumen

Sigue a Papá Noel se actualizó rápidamente a una aplicación web progresiva sin conexión para la temporada de festividades de 2016. gracias en parte al diseño actual de la escena.

Resultados

Santa es una app web progresiva (AWP) que permite agregar a la pantalla principal (ATHS) y sin conexión
El 10% de las sesiones aptas comenzaron con el ícono de ATHS.
El 75% de los usuarios admitían de forma nativa los elementos personalizados y shadow DOM, dos partes centrales de los componentes web.
Puntuación de Lighthouse de 81
Sin conexión, a través de la API de Service Worker, se vincula con la carga diferida para almacenar en caché solo las escenas visitadas y actualizarlas silenciosamente en los nuevos lanzamientos.

Información general

Sigue a Santa es una tradición festiva aquí en Google. Cada año, se puede celebrar la temporada con juegos y experiencias educativas durante todo diciembre. Mientras Santa se toma un merecido descanso, los elfos trabajan para liberar a Sigue a Santa como que son de código abierto, tanto en la Web como para Android

En la Web, Sigue a Papá Noel es un gran sitio interactivo con muchas "escenas" únicas escritas usando Polymer, que es compatible con la mayoría de los navegadores modernos. La evaluación de si el navegador de un usuario es "moderno" se determina a través de la detección de funciones: Santa solicita Set y API de Web Performance, entre otras personas.

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

Desafíos

Santa incorpora un diseño responsivo que funciona bien en teléfonos, tablets y computadoras de escritorio. El sitio deleita con un excelente contenido multimedia, como imágenes estilizadas y audio con temática festiva. Sin embargo, una compilación normal de Sigue a Papá Noel tiene varios cientos de megabytes. Esto se debe a algunos motivos:

Santa está disponible en más de 35 idiomas, por lo que muchos elementos deben estar duplicados.
Las diferentes plataformas tienen diferentes tipos de compatibilidad de contenido multimedia (p.ej., 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 diciembre y, a menudo, lanzan actualizaciones nuevas y críticas. a lo largo del mes. Esto significa que es posible que los elementos ya almacenados en caché por el navegador de un usuario deban actualizarse con visitas repetidas.

Estos desafíos:

Recursos multimedia grandes para diferentes "escenas"
Cambios publicados durante el mes

... generan falta de idoneidad una estrategia simple sin conexión.

Santa, construido con Polymer

Vale la pena volver atrás y hablar sobre el diseño general de Santa antes de sumergirnos en lo actualicé a una AWP sin conexión.

Santa es una aplicación de una sola página, originalmente escrita en Polymer 0.5, y ahora actualizada 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.

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 y HTML necesarios (imágenes, audio, CSS y js). que se encuentran en /scenes/[[sceneName]], en el repositorio de Sigue a Santa. Mientras esto ocurre, 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 que es una gran cantidad de datos). También significa que debemos mantener un “manifiesto de caché” interno de todos los recursos necesarios para en 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.

Cómo cargar lo que usas

Este modelo ahorra ancho de banda, ya que solo entrega los recursos necesarios para las escenas que visita un usuario, en lugar que precargar todo el sitio de una vez. Sigue a Papá Noel aprovecha la capacidad de Polymer para actualizar elementos personalizados durante el tiempo de ejecución, en lugar de el tiempo de carga de los datos. 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:

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

Este enfoque tiene sus 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 nuestra compilación proceso y, en su lugar, incluirlo en el código compartido de Santa.

Diseño sin conexión

Sigue a Papá Noel ya está segmentada en escenas de forma prolija gracias a Polymer y lazy-pages. más cada una escena tiene su propio directorio. Diseñamos el service worker de Sigue a Papá Noel, la pieza central que habilita el uso sin conexión y que se ejecuta en un del navegador del usuario, para conocer el código compartido en comparación con la "escena" en la nube.

¿Cuál es la teoría detrás de los service workers? Cuando un usuario que usa 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 y se recuperan en el entorno de ejecución.

Una vez instalado, el Service Worker puede interceptar todas las solicitudes HTTP. En Sigue a Santa, el flujo de decisión simplificado se ve así:

¿La solicitud ya está almacenada en caché?
- ¡Genial! Muestra la respuesta almacenada en caché.
¿La solicitud coincide con un directorio de escenas, como "Scenes/Boatload/Boatload-scene_en.html"?
- Realizar una solicitud de red y almacenar el resultado en la caché antes de mostrárselo al usuario
De lo contrario, realiza una solicitud de red normal.

Nuestro flujo y el evento install permiten que Sigue a Santa se cargue, incluso cuando el usuario no tenga conexión. 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 entusiastas pueden 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á. Hablaremos sobre ese tema más adelante.

Lo haremos en vivo

Como mencionamos, los duendes de Santa trabajan duro durante todo diciembre y, a menudo, tienen que liberar nuevas actualizaciones a lo largo del mes. Cuando se crea una versión de Sigue a Santa, se le asigna una etiqueta única, por ejemplo, v20161204112055, el marca de tiempo del lanzamiento (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 caché ". En los discos modernos de estado sólido, esto solo agrega unos segundos al proceso de compilación.

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

También implementamos una nueva versión recursos: el código HTML y el servicio de Santa trabajador, que se encuentra en https://santatracker.google.com/. Esto reemplazará la versión anterior.

Cada vez que Sigue a Papá Noel se carga, el navegador buscará un service worker actualizado y lo recuperará, si disponibles. En este caso, cada versión genera un código en un byte diferente. El navegador ve esto como una actualización y realiza un nuevo evento install.

En este punto, el navegador del usuario observará el nuevo "manifiesto de caché". Se comparará con la caché existente del usuario. Si los recursos tienen un hash MD5 diferente, borrarlos de la caché y pedirle al navegador que los vuelva a recuperar. Sin embargo, en la mayoría de los casos, el contenido almacenado en caché es mayormente el mismo o tiene solo pequeñas diferencias.

En Sigue a Santa, actualizar el service worker hace que el navegador del usuario se vuelva a cargar de inmediato.

Experiencia de navegación sin conexión

También tuvimos que hacer algunos cambios en la IU para brindar una experiencia sin conexión para los usuarios que no esperan que un sitio web funcione sin conexión.

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

Sigue a Santa realiza solicitudes regulares a la API de Santa. Si estas solicitudes fallan o se agota el tiempo de espera, supondremos que el usuario no tiene conexión. Usamos esta API en lugar del navigator.onLine integrado del navegador propiedad: esto solo para informarnos si el usuario tal vez está en línea. (también se conoce como Lie-Fi).

La conexión internacional

Si bien la mayoría de nuestros usuarios están en inglés (seguidos de japonés, portugués, español y francés), está diseñado y lanzado en más de 35 idiomas.

Cuando un usuario carga Sigue a Santa, usamos idioma del navegador y otros indicios para elegir el idioma que se publicará. La mayoría de los usuarios nunca sobrescriben este idioma. Sin embargo, si un usuario elige un idioma nuevo a través de nuestro selector, se trata como si se tratara de una actualización. disponible, al igual que en el caso anterior, cuando hay una nueva versión de Sigue a Santa disponible.

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 instalen a su pantalla de inicio. En 2016, alrededor del 10% de las cargas aptas provenían del ícono de la pantalla principal.

Conclusión

Logramos convertir rápidamente Sigue a Papá Noel en una AWP sin conexión, lo que brinda una experiencia confiable gracias a nuestro diseño de escena existente, simplificado a través de nuestro uso actual de Polymer y componentes web. También aprovecha nuestro sistema de compilación para realizar actualizaciones eficaces, invalidando únicamente los activos modificados.

Aunque Papá Noel es mayormente una solución personalizada, muchos de sus principios se pueden encontrar en la biblioteca Polymer App Toolbox del proyecto Te sugerimos que la revises si estás creando una AWP nueva desde cero o si buscas una independiente del framework, prueba el Biblioteca de Workbox