NavigationPreloadManager

NavigationPreloadManager.enable()

Aktiviert das Vorladen von Navigationen und gibt ein Promise zurück, das sich mit undefined erfüllt.

NavigationPreloadManager.disable()

Deaktiviert das Vorladen von Navigationen und gibt ein Promise zurück, das sich mit undefined erfüllt.

NavigationPreloadManager.setHeaderValue()

Legt den Wert des Service-Worker-Navigation-Preload HTTP-Headers fest, der in Preload-Anfragen gesendet wird, und gibt ein leeres Promise zurück.

NavigationPreloadManager.getState()

Gibt ein Promise zurück, das sich zu einem Objekt auflöst, dessen Eigenschaften angeben, ob das Vorladen aktiviert ist und welcher Wert im Service-Worker-Navigation-Preload HTTP-Header in Preload-Anfragen gesendet wird.

Service Worker behandeln fetch()-Ereignisse im Namen einer Website für Seiten innerhalb eines bestimmten Bereichs. Wenn ein Benutzer zu einer Seite navigiert, die einen Service Worker verwendet, startet der Browser den Worker (falls er nicht bereits läuft) und sendet ihm ein Fetch-Ereignis, auf dessen Ergebnis er wartet. Beim Empfang eines Ereignisses gibt der Worker die Ressource aus einem Cache zurück, falls vorhanden, oder lädt die Ressource anderweitig vom Remote-Server herunter (und speichert eine Kopie für zukünftige Anfragen).

Ein Service Worker kann Ereignisse des Browsers erst verarbeiten, nachdem er gestartet wurde. Dies ist unvermeidlich, hat aber in der Regel wenig Einfluss. Service Worker sind oft bereits gestartet (sie bleiben nach der Verarbeitung anderer Anfragen für eine Weile aktiv). Selbst wenn ein Service Worker gestartet werden muss, liefert er oft aus einem Cache, was sehr schnell ist. In Fällen, in denen ein Worker gestartet werden muss, bevor er eine Remote-Ressource abrufen kann, kann die Verzögerung jedoch erheblich sein.

Der NavigationPreloadManager bietet einen Mechanismus, um das Abrufen von Ressourcen parallel zum Start eines Service Workers auszuführen, damit die Ressource möglicherweise bereits vollständig oder teilweise heruntergeladen ist, wenn der Worker in der Lage ist, die Fetch-Anfrage des Browsers zu bearbeiten. Dies macht den Fall, dass der Worker gestartet werden muss, „nicht schlechter“ als wenn der Worker bereits gestartet ist, und in manchen Fällen besser.

Der Preload-Manager sendet den Service-Worker-Navigation-Preload HTTP-Header mit Preload-Anfragen, wodurch Antworten für Preload-Anfragen anpassbar gemacht werden können. Dies kann zur Reduzierung der gesendeten Daten auf nur einen Teil der ursprünglichen Seite oder zum Anpassen der Antwort basierend auf dem Anmeldestatus des Benutzers verwendet werden.

Die Beispiele hier stammen aus Beschleunigung des Service Workers mit Navigation Preloads (developer.chrome.com).

Unten wird der Navigationspreloader im activate-Ereignishandler des Service Workers aktiviert, nachdem zunächst mit ServiceWorkerRegistration.navigationPreload überprüft wurde, ob die Funktion unterstützt wird (dies gibt entweder den NavigationPreloadManager für den Service Worker oder undefined zurück, falls die Funktion nicht unterstützt wird).

addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      if (self.registration.navigationPreload) {
        // Enable navigation preloads!
        await self.registration.navigationPreload.enable();
      }
    })(),
  );
});

Der folgende Code zeigt einen Handler für Fetch-Ereignisse eines Service Workers, der eine voraufgeladene Antwort verwendet (FetchEvent.preloadResponse).

Der fetch-Ereignishandler ruft FetchEvent.respondWith() auf, um ein Versprechen an die kontrollierte Seite zurückzugeben. Dieses Versprechen wird mit der angeforderten Ressource aufgelöst, die aus dem Cache, einer voraufgeladenen Fetch-Anfrage oder einer neuen Netzwerkanfrage stammen kann.

Wenn eine passende URL-Anfrage im Cache-Objekt vorhanden ist, gibt der Code ein aufgelöstes Versprechen für das Abrufen der Antwort aus dem Cache zurück. Wenn im Cache kein Treffer gefunden wird, gibt der Code die aufgelöste voraufgeladene Antwort zurück (FetchEvent.preloadResponse). Wenn weder ein passender Cacheeintrag noch eine voraufgeladene Antwort vorhanden sind, startet der Code eine neue Abrufoperation aus dem Netzwerk und gibt das (nicht aufgelöste) Versprechen für diese Abrufoperation zurück.

addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // Respond from the cache if we can
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // Else, use the preloaded response, if it's there
      const response = await event.preloadResponse;
      if (response) return response;

      // Else try the network.
      return fetch(event.request);
    })(),
  );
});

Der Browser sendet den HTTP-Header Service-Worker-Navigation-Preload mit Preload-Anfragen mit einem Standardrichtwert von true. Dies ermöglicht es Servern, zwischen normalen und Preload-Fetch-Anfragen zu unterscheiden und bei Bedarf unterschiedliche Antworten in jedem Fall zu senden.

Der Header-Wert kann mit NavigationPreloadManager.setHeaderValue() auf einen beliebigen anderen String-Wert geändert werden, um zusätzlichen Kontext für die Preload-Operation bereitzustellen. Beispielsweise könnte man den Wert auf die ID der zuletzt zwischengespeicherten Ressource setzen, sodass der Server keine Ressourcen zurückgibt, es sei denn, sie werden tatsächlich benötigt. Ebenso könnte man die zurückgegebenen Informationen basierend auf dem Authentifizierungsstatus anstelle der Verwendung von Cookies konfigurieren.

Der untenstehende Code zeigt, wie der Wert der Header-Anweisung auf eine Variable newValue gesetzt wird.

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

Beschleunigung des Service Workers mit Navigation Preloads > Benutzerdefinierte Antworten für Preloads bietet ein vollständigeres Beispiel für eine Website, bei der die Antwort für eine Artikelwebseite aus einem zwischengespeicherten Header und Footer aufgebaut wird, sodass nur der Artikelinhalt für ein Preload zurückgegeben wird.

Sie können NavigationPreloadManager.getState() verwenden, um zu prüfen, ob das Vorladen von Navigationen aktiviert ist und um zu bestimmen, welcher Richtwert mit dem Service-Worker-Navigation-Preload HTTP-Header für Preload-Anfragen gesendet wird.

Der untenstehende Code zeigt, wie man das Versprechen erhält, das sich zu einem state-Objekt auflöst, und das Ergebnis protokolliert.

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

• Beschleunigung des Service Workers mit Navigation Preloads (developer.chrome.com)