carga previa de Workbox-navigation

"Speed up Service Worker with Navigation Preloads" es muy útil cuando explica qué es la precarga de navegación y los beneficios que ofrece para las apps web cuyos service worker no controlan solicitudes de navegación de forma explícita.

¿Qué hace este módulo?

workbox-navigation-preload controlará la verificación durante el tiempo de ejecución para ver si el navegador actual admite la precarga de navegación. Si es así, creará automáticamente un controlador de eventos activate para habilitarla.

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

¿Quién debe habilitar las precargas de navegación?

Los desarrolladores que ya controlan las navegaciones respondiendo con HTML prealmacenado en caché (posiblemente configurado con un resguardo de App Shell) no necesitan habilitar la precarga de navegación. El objetivo de esta función es reducir la latencia de navegación de los desarrolladores que no pueden almacenar previamente en caché su HTML, pero desean usar Workbox para manejar el almacenamiento en caché de otros elementos en sus sitios.

Por ejemplo, si sigues el patrón de shell de app y ya tienes una ruta de navegación configurada para usar el HTML almacenado en caché, habilitar la precarga de navegación será un desperdicio. La respuesta de red asociada con la solicitud de precarga nunca se usará, ya que el HTML previamente almacenado en caché se usará 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 asistencia del navegador?

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

Debes tener en cuenta que estos navegadores no se beneficiarán de la reducción de la latencia de navegación, y se recomienda medir con cuidado las implicaciones de rendimiento de enviar un service worker que no controla solicitudes de navegación y que no use la precarga de navegación.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()