Vorabladen der Arbeitsbox-Navigation

Service Worker mit Navigationsvorabladen beschleunigen macht ein erklärt gut erklärt, was Navigationsvorabladen ist und welche Vorteile sie für Web-Apps bietet, verarbeitet der Service Worker nicht explizit Navigationsanfragen.

Wozu dient dieses Modul?

workbox-navigation-preload prüft während der Laufzeit, ob der aktuelle Browser dies unterstützt vorab geladen. Falls ja, wird automatisch ein activate-Event-Handler erstellt, aktivieren.

Der gemeinsame Code in workbox-core, der Netzwerkanfragen in ganz Workbox verarbeitet, wurde ebenfalls aktualisiert, um automatisch eine Preloading-Antwort zu nutzen, falls verfügbar. Das bedeutet, dass jede der integrierten Strategien automatisch die Navigationsvorab-Ladefunktion nutzen kann, sobald sie aktiviert ist.

Wer sollte die Navigationsvorab-Ladefunktion aktivieren?

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

Wenn Sie beispielsweise das App-Shell-Muster verwenden und bereits einen Navigationspfad eingerichtet haben, der die vorab im Cache gespeicherte HTML-Datei verwendet, ist das Aktivieren der Navigationsvorab-Ladefunktion verschwendete Ressourcen. Die Netzwerkantwort, die mit der Preloading-Anfrage verknüpft ist, wird nie verwendet, da die vorab im Cache gespeicherte HTML-Datei bedingungslos 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 ist der Browser-Support?

Derzeit ist Google Chrome der einzige Browser, der das Vorladen von Navigationselementen unterstützt. enable() prüft bei der Laufzeit die Browserunterstützung und versucht nur, die Navigationsvorab-Ladefunktion zu aktivieren, wenn der aktuelle Browser dies unterstützt. Daher ist es enable() in Ihrem Service Worker bedingungslos aufrufen.

Sie sollten sich bewusst sein, dass diese Browser nicht von der Reduzierung der Navigationslatenz profitieren und sollten Sie die Auswirkungen des Versands auf die Leistung genau messen, Worker, der keine Navigationsanfragen verarbeitet und kein Navigationsvorabladen verwendet.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()