HTTP Service-Worker-Navigation-Preload

Der HTTP-Header Service-Worker-Navigation-Preload ist ein Request-Header, der vom Browser bei aktiviertem Navigation Preload gesendet wird. Er signalisiert dem Server, dass der Request parallel zum Service Worker Boot-Prozess läuft, um Ladezeiten zu optimieren.

Typ

Request-Header

Syntax

Der Header enthält einen konfigurierbaren Wert zur Request-Identifikation.

http 
Service-Worker-Navigation-Preload: true
Service-Worker-Navigation-Preload: cached-content-ok

Direktiven

Die Direktiven identifizieren Navigation Preload Requests und deren Präferenzen.

true
Standard-Wert, signalisiert aktiviertes Navigation Preload ohne spezifische Präferenzen.
custom-value
Beliebiger String-Wert, von der PWA konfigurierbar via navigationPreload.setHeaderValue() API.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Service-Worker-Navigation-Preload-Header.

Beispiel 1 Standard Navigation Preload

http 
GET /products HTTP/1.1
Host: shop.example.com
Service-Worker-Navigation-Preload: true
Accept: text/html

Browser startet Navigation Request parallel zum SW-Boot, Server kann optimierte Response vorbereiten.

Beispiel 2 Custom Header Value

http 
GET /dashboard HTTP/1.1
Host: app.example.com
Service-Worker-Navigation-Preload: cached-content-ok
Accept: application/json

PWA signalisiert Server, dass ältere Daten akzeptabel sind für schnellere Response während SW-Aktivierung.

Beispiel 3 Server liefert optimierte Response

http 
GET /news HTTP/1.1
Host: news.example.com
Service-Worker-Navigation-Preload: true

HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=60
X-Preload-Response: true

<!DOCTYPE html>
<html>...Minimal HTML Shell...</html>

Server erkennt Preload-Request und liefert minimale HTML-Shell für schnelles Initial Rendering.

Navigation Preload Flow

Service Worker Navigation Preload Ablauf

Vorteile für die Systemarchitektur

  • Reduzierte Latenz: Netzwerk-Request startet parallel zum Service Worker Boot-Prozess
  • Flexible Server-Optimierung: Server kann leichtgewichtige Responses für Preload-Requests liefern
  • Progressive Enhancement: Ältere Clients ohne Navigation Preload funktionieren weiterhin normal

Spezifikation

W3C Service Workers Specification, Navigation Preload https://www.w3.org/TR/service-workers/#navigation-preload-manager

Weitere Spezifikationen

Service-Worker Header, Service-Worker-Allowed Header