La interfazNavigationPreloadManager de laAPI deService Worker proporciona métodos para administrar la precarga de recursos en paralelo con el arranque delservice worker.

Si es compatible,ServiceWorkerRegistration.navigationPreload devuelve un objeto de este tipo.Se espera el resultado de una solicitud de recuperación de precarga usando la promesa devuelta porFetchEvent.preloadResponse.

Métodos

NavigationPreloadManager.enable()

Habilita la precarga de navegación, devolviendo unaPromise que se resuelve conundefined.

NavigationPreloadManager.disable()

Deshabilita la precarga de navegación, devolviendo unaPromise que se resuelve conundefined.

NavigationPreloadManager.setHeaderValue()

Establece el valor del encabezado HTTPService-Worker-Navigation-Preload que se envía en las solicitudes de precarga y devuelve unaPromise vacía.

NavigationPreloadManager.getState()

Devuelve unaPromise que se resuelve en un objeto con propiedades que indican si la precarga está habilitada y qué valor se enviará en la Cabecera HTTPService-Worker-Navigation-Preload en solicitudes de precarga.

Descripción

Losservice workers manejan eventosfetch() en nombre de un sitio, para páginas dentro de un determinado ámbito.Cuando un usuario navega a una página que utiliza unservice worker, el navegador inicia el trabajador (si aún no se está ejecutando), luego le envía un evento de recuperación y espera el resultado.Al recibir un evento, el trabajador devuelve el recurso desde una caché si está presente o, de lo contrario, obtiene el recurso del servidor remoto (y almacena una copia para devolverla en futuras solicitudes).

Unservice worker no puede procesar eventos desde el navegador hasta que se haya iniciado.Esto es inevitable, pero por lo general no tiene mucho impacto.Losservice workers a menudo ya están iniciados (permanecen activos durante algún tiempo después de procesar otras solicitudes).Incluso si unservice worker tiene que arrancar, la mayor parte del tiempo puede estar devolviendo valores de una caché, lo cual es muy rápido.Sin embargo, en aquellos casos en los que un trabajador tiene que arrancar antes de que pueda comenzar a obtener un recurso remoto, la demora puede ser significativa.

ElNavigationPreloadManager proporciona un mecanismo para permitir que la recuperación de los recursos se ejecute en paralelo con el inicio delservice worker, de modo que cuando el trabajador pueda manejar la solicitud de recuperación desde el navegador, el recurso posiblemente ya se ha descargado total o parcialmente.Esto hace que el caso en el que el trabajador tenga que empezar "no sea peor" que cuando el trabajador ya se ha iniciado y, en algunos casos, mejor.

El administrador de precarga envía el encabezado HTTPService-Worker-Navigation-Preload con las solicitudes de precarga, lo que permite personalizar las respuestas para las solicitudes de precarga.Esto se podría usar, por ejemplo, para reducir los datos enviados a solo una parte de la página original o para personalizar la respuesta según el estado de inicio de sesión del usuario.

Ejemplos

Los ejemplos aquí son deAcelera elService Worker con precargas de navegación (developer.chrome.com).

Detectar características y habilitar precarga de navegación

A continuación, habilitamos la precarga de navegación en el controlador de eventosactivate delservice worker, después de usar primeroServiceWorkerRegistration.navigationPreload para determinar si la función es compatible (esto devuelve elNavigationPreloadManager para elservice worker oundefined si la característica no es compatible).

addEventListener("activate", (event) => {  event.waitUntil(    (async () => {      if (self.registration.navigationPreload) {        // ¡Habilitar precargas de navegación!        await self.registration.navigationPreload.enable();      }    })(),  );});

Usar una respuesta precargada

El siguiente código muestra un controlador de eventos de recuperación delservice worker que usa una respuesta (FetchEvent.preloadResponse) precargada.

El controlador de eventosfetch llama aFetchEvent.respondWith() para devolver una promesa a la página controlada.Esta promesa se resolverá con el recurso solicitado, que puede ser desde la caché, una solicitud de recuperación precargada o una nueva solicitud de red.

Si hay una solicitud de URL coincidente en el objetoCache, el código devuelve una promesa resuelta para obtener la respuesta de la caché.Si no se encuentra ninguna coincidencia en la caché, el código devuelve la respuesta precargada resuelta (FetchEvent.preloadResponse).Si no hay una entrada de caché coincidente o una respuesta precargada, el código inicia una nueva operación de recuperación desde la red y devuelve la promesa (no resuelta) para esa operación de recuperación.

addEventListener("fetch", (event) => {  event.respondWith(    (async () => {      // Responder desde la caché si podemos      const cachedResponse = await caches.match(event.request);      if (cachedResponse) return cachedResponse;      // De lo contrario, usa la respuesta precargada, si está allí      const response = await event.preloadResponse;      if (response) return response;      // Si no, intenta en la red.      return fetch(event.request);    })(),  );});

Respuestas personalizadas

El navegador envía el encabezado HTTPService-Worker-Navigation-Preload con solicitudes de precarga, con un valor de directiva predeterminado entrue.Esto permite a los servidores diferenciar entre solicitudes de recuperación normales y precargadas, y enviar diferentes respuestas en cada caso si es necesario.

El valor del encabezado se puede cambiar a cualquier otro valor de cadena usandoNavigationPreloadManager.setHeaderValue() para proporcionar contexto adicional para la operación de precarga.Por ejemplo, puedes establecer el valor en el ID de tu recurso almacenado en caché más reciente, de modo que el servidor no devuelva ningún recurso a menos que realmente se necesite.De manera similar, puedes configurar la información devuelta según el estado de autenticación en lugar de usarcookies.

El siguiente código muestra cómo establecer el valor de la directivaheader en alguna variablenewValue.

navigator.serviceWorker.ready  .then((registration) =>    registration.navigationPreload.setHeaderValue(newValue),  )  .then(() => {    console.log("¡Listo!");  });

Acelera elService Worker con precargas de navegación > Respuestas personalizadas para precargas proporciona un ejemplo más completo de un sitio donde se construye la respuesta para una página web de artículo desde un encabezado y pie de página en caché, de modo que solo devuelva el contenido del artículo para una precarga.

Obtener el estado

Puedes usarNavigationPreloadManager.getState() para verificar si la precarga de navegación está habilitada y determinar qué valor de directiva se envía con el encabezado HTTPService-Worker-Navigation-Preload para solicitudes de precarga.

El siguiente código muestra cómo obtener la promesa que se resuelve en un objetostate y registrar el resultado.

navigator.serviceWorker.ready  .then((registration) => registration.navigationPreload.getState())  .then((state) => {    console.log(state.enabled); // boolean    console.log(state.headerValue); // string  });

Especificaciones

Compatibilidad con navegadores

Véase también

• Acelera elService Worker con precargas de navegación (developer.chrome.com)