Apps web progresivas: Service Worker Includes

1. Te damos la bienvenida

En este lab, tomarás una aplicación web existente y agregarás una respuesta de ruta de transmisión para mejorar el rendimiento. Este es el séptimo de una serie de codelabs complementarios para el taller de apps web progresivas. El codelab anterior fue Potencia tu PWA. Hay un codelab más en esta serie.

Qué aprenderás

• Cómo agregar una respuesta de transmisión a un service worker

Lo que debe saber

• JavaScript

Lo que necesitarás

• Un navegador que admita Service Workers y Streams

2. Prepárate

Para comenzar, clona o descarga el código de partida necesario para completar este codelab:

Clona el repo

Descargar ZIP

Si clonas el repositorio, asegúrate de estar en la rama pwa06--service-worker-includes. El archivo ZIP también contiene el código de esa rama.

Este código base requiere Node.js 14 o una versión posterior. Una vez que tengas el código disponible, ejecuta npm ci desde la línea de comandos en la carpeta del código para instalar todas las dependencias que necesitarás. Luego, ejecuta npm start para iniciar el servidor de desarrollo del codelab.

El archivo README.md del código fuente proporciona una explicación de todos los archivos distribuidos. Además, los siguientes son los archivos existentes clave con los que trabajarás a lo largo de este codelab:

Archivos de claves

• js/preview.js: Vista previa del archivo JavaScript de la página
• service-worker.js: Archivo del service worker de la PWA

3. Vista previa de transmisión

La página de vista previa se puede dividir en tres partes claras: el encabezado, el cuerpo compilado y el pie de página. Actualmente, el cuerpo compilado se renderiza del lado del cliente, pero no hay ningún motivo para que sea así. Trasladémoslo al Service Worker.

Para compilar el cuerpo, se realiza una búsqueda de contenido asíncrona. Dado que el trabajo asíncrono en una respuesta de navegación es costoso, es una excelente oportunidad para transmitir primero el contenido conocido al navegador.

Para ello, primero borra el contenido de js/preview.js para asegurarte de que ya no se esté compilando. Luego, en service-worker.js, haz lo siguiente:

• Importa la exportación con nombre strategy de workbox-streams como streamsStrategy
• Importa la exportación con nombre openDB de idb y la exportación con nombre marked de marked.
• Antes del registro de ruta para las navegaciones, agrega un nuevo registro de ruta
  • Debe verificar que el pathname de la URL sea /preview.
  • Debe usar una estrategia de transmisión que
    1. Responder con el contenido de preview/index.html a través del área de contenido de la etiqueta main
    2. Responde con una función que abra el IndexedDB settings-store, obtenga el contenido del almacén de objetos settings y muestre la versión renderizada en Markdown de ese contenido.
    3. Responde con las etiquetas de cierre main, body y html.

Asegúrate de colocar el registro de la ruta de transmisión antes del registro de navegación normal. Los registros de rutas se ejecutan en el orden en que se incluyen en el trabajador de servicio, por lo que, si lo haces al revés, el de transmisión nunca se ejecutará porque la solicitud ya se habrá controlado.

Con la respuesta de transmisión en su lugar, vuelve y abre la vista previa del sitio en tu navegador. Deberías ver que el contenido de la página ahora se renderiza directamente desde el trabajador de servicio, sin necesidad de código del cliente.

Si no ves los cambios, asegúrate de que tu página esté usando el nuevo service worker. Para ello, verifica el service worker activo en la pestaña Service Workers del panel Applications en las Herramientas para desarrolladores de Chrome.

4. ¡Felicitaciones!

Aprendiste a desconectar tu app web con service workers y la API de Cache Storage.

El siguiente codelab de la serie es Trabaja con Workers.