Vorabladen der Arbeitsbox-Navigation

In „Speedup Service Worker with Navigation Preloads“ wird hervorragend erläutert, was Navigationsvorabladevorgänge sind und welche Vorteile sie für Webanwendungen bietet, deren Service Worker Navigationsanfragen nicht explizit verarbeitet.

Inhalt dieses Moduls

workbox-navigation-preload prüft während der Laufzeit, ob der aktuelle Browser das Vorabladen der Navigation unterstützt. Ist dies der Fall, erstellt er automatisch einen activate-Event-Handler, um ihn zu aktivieren.

Der freigegebene Code in workbox-core, der für das Senden von Netzwerkanfragen in der gesamten Workbox verwendet wird, wurde ebenfalls aktualisiert, um automatisch die Vorteile einer Antwort zum Vorabladen zu nutzen, falls diese verfügbar ist. Das bedeutet, dass alle integrierten Strategien das Vorabladen der Navigation automatisch nutzen können, sobald sie aktiviert ist.

Wer sollte Vorabladevorgänge für die Navigation aktivieren?

Entwickler, die die Navigation bereits mit vorab im Cache gespeichertem HTML-Code verwenden (möglicherweise mit einem App Shell-Fallback konfiguriert), müssen das Vorabladen der Navigation nicht aktivieren. Diese Funktion soll die Navigationslatenz für Entwickler reduzieren, die ihren HTML-Code nicht vorab im Cache speichern können, aber Workbox verwenden möchten, um das Caching anderer Assets auf ihren Websites zu verwalten.

Wenn Sie sich beispielsweise dem App Shell-Muster folgen und bereits eine Navigationsroute für die Verwendung des vorab im Cache gespeicherten HTML-Codes eingerichtet haben, ist das Aktivieren des Vorabladens der Navigation unnötig. Die mit der Vorabladeanfrage verknüpfte Netzwerkantwort wird nie verwendet, da das vorab im Cache gespeicherte HTML ohne Bedingungen verwendet wird.

Grundlegende Nutzung

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);

Was hat es mit der Browserunterstützung auf sich?

Derzeit ist Google Chrome der einzige Browser, der das Vorabladen der Navigation unterstützt. enable() prüft zur Laufzeit, ob der Browser unterstützt wird, und versucht nur, das Vorabladen der Navigation zu aktivieren, wenn der aktuelle Browser dies unterstützt. Sie können enable() in Ihrem Service Worker daher bedingungslos aufrufen.

Sie sollten beachten, dass diese Browser nicht von der Reduzierung der Navigationslatenz profitieren. Es wird empfohlen, die Auswirkungen auf die Leistung des Versands eines Service Workers, der keine Navigationsanfragen nicht bearbeitet und kein Vorabladen der Navigation verwendet, sorgfältig zu messen.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()