carga previa de Workbox-navigation

En "Acelera el service worker con cargas previas de navegación", se explica de forma clara qué es la carga previa de navegación y los beneficios que ofrece a las apps web cuyo service worker no controla de forma explícita las solicitudes de navegación.

¿Qué hace este módulo?

workbox-navigation-preload controlará la verificación en el tiempo de ejecución para ver si el navegador actual admite la carga previa de navegación y, si es así, creará automáticamente un controlador de eventos activate para habilitarlo.

El código compartido dentro de workbox-core que controla la realización de solicitudes de red en todo Workbox también se actualizó para aprovechar automáticamente una respuesta de carga previa, si está disponible. Esto significa que cualquiera de las estrategias integradas puede aprovechar automáticamente la carga previa de navegación una vez que se habilita.

¿Quién debe habilitar las cargas previas de navegación?

Los desarrolladores que ya controlan las navegaciones respondiendo con HTML almacenado previamente en caché (posiblemente configurado con un resguardo de App Shell) no necesitan habilitar la carga previa de navegación. El objetivo de esta función es reducir la latencia de navegación para los desarrolladores que no pueden almacenar en caché su HTML, pero que aún quieren usar Workbox para controlar la caché de otros recursos en sus sitios.

Por ejemplo, si sigues el patrón de App Shell y ya tienes una ruta de navegación configurada para usar el HTML almacenado en caché, habilitar la carga previa de navegación sería un desperdicio. La respuesta de red asociada con la solicitud de carga previa nunca se usará, ya que se usará el HTML almacenado en caché de forma incondicional.

Uso básico

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

¿Cuál es la historia de compatibilidad con navegadores?

Actualmente, Google Chrome es el único navegador que admite la carga previa de navegación. enable() verificará la compatibilidad del navegador durante el tiempo de ejecución y solo intentará habilitar la carga previa de navegación si el navegador actual la admite. Por lo tanto, es seguro llamar a enable() de forma incondicional en tu trabajador de servicio.

Ten en cuenta que esos navegadores no se beneficiarán de la reducción de la latencia de navegación y se recomienda que midas cuidadosamente las implicaciones de rendimiento de enviar un trabajador de servicio que no controle las solicitudes de navegación ni use la carga previa de navegación.

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()