Complementar las técnicas tradicionales de captura previa con trabajadores de servicios.
Actualizado
Confiabilidad de la red
La realización de una tarea en un sitio suele implicar varios pasos. Por ejemplo, comprar un producto en un sitio web de comercio electrónico puede implicar buscar un producto, seleccionar un artículo de la lista de resultados, agregar el artículo al carrito y completar la operación mediante el pago.
En términos técnicos, moverse a través de diferentes páginas significa hacer un solicitud de navegación. Como regla general, no quiero usar de larga duración Cache-Control encabezados para almacenar en caché la respuesta HTML para una solicitud de navegación. Normalmente deberían satisfacerse a través de la red, con Cache-Control: no-cache, para garantizar que el HTML, junto con la cadena de solicitudes de red posteriores, sea (razonablemente) actualizado. Tener que ir en contra de la red cada vez que el usuario navega a una nueva página significa, desafortunadamente, que cada navegación puede ser lenta; al menos, significa que no será seguramente rápido.
Para acelerar estas solicitudes, si puede anticipar la acción del usuario, puede solicitar estas páginas y activos de antemano y mantenerlos en la caché durante un corto período de tiempo hasta que el usuario haga clic en estos enlaces. Esta técnica se denomina captación previa y se implementa comúnmente agregando <link rel="prefetch"> etiquetas a las páginas, lo que indica el recurso a buscar previamente.
En esta guía exploraremos diferentes formas en las que trabajadores de servicio se puede utilizar como complemento de las técnicas tradicionales de obtención previa.
Casos de producción
MercadoLibre es el sitio de comercio electrónico más grande de América Latina. Para acelerar la navegación, inyectan dinámicamente <link rel=”prefetch”> etiquetas en algunas partes del flujo. Por ejemplo, en las páginas de listas, obtienen la siguiente página de resultados tan pronto como el usuario se desplaza hasta la parte inferior de la lista:
Los archivos precargados se solicitan con la prioridad «más baja» y se almacenan en la caché HTTP o en el Memoria caché (dependiendo de si el recurso se puede almacenar en caché o no), durante un período de tiempo que varía según los navegadores. Por ejemplo, a partir de Chrome 85, este valor es de 5 minutos. Los recursos se mantienen durante cinco minutos, después de los cuales el Cache-Control se aplican las reglas para el recurso.
El uso del almacenamiento en caché del trabajador de servicio puede ayudarlo a extender la vida útil de los recursos de captación previa más allá de la ventana de cinco minutos.
Por ejemplo, portal de deportes italiano Virgilio Sport utiliza los trabajadores del servicio para obtener previamente las publicaciones más populares en su página de inicio. También usan el API de información de red para evitar la captura previa para los usuarios que están en una conexión 2G.
Como resultado de esto, más de 3 semanas de observación Virgilio Sport fue testigo de la mejora de los tiempos de carga para la navegación a los artículos. 78%y aumenta el número de impresiones de artículos 45%.
Implementar el almacenamiento en caché con Workbox
En la siguiente sección usaremos Workbox para mostrar cómo implementar diferentes técnicas de almacenamiento en caché en el trabajador del servicio que se pueden usar como complemento de <link rel="prefetch">, o incluso un reemplazo, delegando esta tarea completamente al trabajador del servicio.
Precaución: Debe tomar medidas para asegurarse de que agregar un trabajador de servicio a su sitio no termine realmente ralentizando su navegación. Iniciar el service worker sin usarlo para responder a una solicitud de navegación introducirá una pequeña cantidad de latencia (como se explica en Creación de aplicaciones más rápidas y resistentes con trabajadores de servicios). Puede mitigar esta sobrecarga habilitando una función llamada precarga de navegación, y luego usando el respuesta de la red que se ha precargado dentro de su controlador de eventos de recuperación.
1. Precachear páginas estáticas y subrecursos de páginas
El almacenamiento en caché previo es la capacidad del trabajador del servicio de guardar archivos en el caché mientras se está instalando.
Precaching suena similar a precargar, pero es una técnica diferente. En el primero, el trabajador del servicio busca y almacena recursos (generalmente archivos estáticos) mientras se instala y los mantiene en la caché hasta que haya una nueva versión del archivo disponible. En el segundo, se solicitan recursos con antelación para tenerlo en la caché por breves periodos de tiempo con el fin de agilizar las navegaciones posteriores.
En los siguientes casos, la captura previa se utiliza para lograr un objetivo similar al de la captura previa: hacer que la navegación sea más rápida.
Precaching de páginas estáticas
Para las páginas que se generan en el momento de la compilación (p. Ej. about.html, contact.html), o en sitios completamente estáticos, uno puede simplemente agregar los documentos del sitio a la lista de precaché, por lo que ya están disponibles en la caché cada vez que el usuario accede a ellos:
workbox.precaching.precacheAndRoute([
{url: '/about.html', revision: 'abcd1234'},
]);Precaching subrecursos de la página
El almacenamiento en caché de los activos estáticos que las diferentes secciones del sitio podrían utilizar (por ejemplo, JavaScript, CSS, etc.) es una práctica recomendada general y puede dar un impulso adicional en los escenarios de búsqueda previa.
Para acelerar la navegación en un sitio de comercio electrónico, puede utilizar <link rel="prefetch"> etiquetas en las páginas de listado para obtener previamente las páginas de detalles del producto para los primeros productos de una página de listado. Si ya ha guardado en caché los recursos secundarios de la página del producto, esto puede hacer que la navegación sea aún más rápida.
Para implementar esto:
- Agrega un
<link rel="prefetch">etiqueta a la página:
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">- Agregue los recursos secundarios de la página a la lista de precacheo en el trabajador del servicio:
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
]);2. Amplíe la vida útil de los recursos de captación previa
Como se mencionó anteriormente, <link rel="prefetch"> obtiene y mantiene los recursos en la caché HTTP durante un período de tiempo limitado, después de lo cual el Cache-Control se aplican las reglas para un recurso. A partir de Chrome 85, este valor es de 5 minutos.
Los trabajadores del servicio le permiten extender la vida útil de las páginas de captación previa, al tiempo que brindan el beneficio adicional de hacer que esos recursos estén disponibles para uso sin conexión.
En el ejemplo anterior, se podría complementar el <link rel="prefetch"> se utiliza para obtener una página de producto con una estrategia de almacenamiento en caché en tiempo de ejecución de Workbox.
Para implementar eso:
- Agrega un
<link rel="prefetch">etiqueta a la página:
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">- Implemente una estrategia de almacenamiento en caché en tiempo de ejecución en el trabajador del servicio para estos tipos de solicitudes:
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'document-cache',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 30 * 24 * 60 * 60,
}),
],
});En este caso, hemos optado por utilizar un estrategia obsoleta mientras se revalida. En esta estrategia, las páginas se pueden solicitar tanto de la caché como de la red, en paralelo. La respuesta proviene de la caché si está disponible, de lo contrario, de la red. El caché siempre se mantiene actualizado con la respuesta de la red con cada solicitud exitosa.
3. Delegar la captación previa al trabajador del servicio
En la mayoría de los casos, el mejor enfoque es utilizar <link rel="prefetch">. La etiqueta es una sugerencia de recursos diseñado para que la captación previa sea lo más eficiente posible.
En algunos casos, sin embargo, puede ser mejor delegar esta tarea por completo al trabajador del servicio. Por ejemplo: para precargar los primeros productos en una página de lista de productos renderizada del lado del cliente, es posible que deba inyectar varios <link rel="prefetch"> etiquetas dinámicamente en la página, según una respuesta de la API. Esto puede consumir momentáneamente tiempo en el hilo principal de la página y dificultar la implementación.
En casos como este, utilice una «estrategia de comunicación de la página al trabajador del servicio», para delegar la tarea de precarga por completo al trabajador del servicio. Este tipo de comunicación se puede lograr utilizando trabajador.postMessage ():
los Paquete de ventana Workbox simplifica este tipo de comunicación, abstrayendo muchos detalles de la llamada subyacente que se está realizando.
La captación previa con la ventana Workbox se puede implementar de la siguiente manera:
- En la página: llame al trabajador del servicio y le pase el tipo de mensaje y la lista de URL para buscar previamente:
const wb = new Workbox('/sw.js');
wb.register();const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
- En el trabajador de servicio: implemente un controlador de mensajes para emitir un
fetch()solicitud de cada URL para buscar previamente:
addEventListener('message', (event) => {
if (event.data.type === 'PREFETCH_URLS') {
}
});
