Wenn ein Service Worker fetch-Ereignisse verarbeitet, wartet der Browser auf eine Antwort des Service Workers. Während die Latenz der Netzwerkanfrage einen großen Teil des Wartens ausmacht, muss der Browser möglicherweise auch warten, bis der Service Worker hochgefahren ist und fetch-Ereignisrückrufe ausgelöst werden.
Die Startzeit hängt vom Gerät und seinen Funktionen ab, die damit verbundene Zeit kann jedoch sehr hoch sein – manchmal bis zu einer halben Sekunde, wenn eine CPU langsam ist oder aufgrund von Umgebungsbedingungen gedrosselt arbeitet. Die Leistungssteigerung durch die Vermeidung des Netzwerks wird diese Startzeit wahrscheinlich überwiegen, wenn Ihre Navigationsantworten von einer Cache-Instanz bereitgestellt werden. Bei Navigationsanfragen an das Netzwerk kann die Einführung eines Service Workers zu einer wahrnehmbaren Verzögerung führen.
Navigationsvorabladen starten
Das Vorabladen der Navigation ist eine Service Worker-Funktion, die die Verzögerung löst, die durch die Startzeit des Service Workers verursacht wird. Wenn das Vorabladen der Navigation nicht aktiviert ist, erfolgen der Start des Service Workers und die von ihm verarbeitete Navigationsanfrage nacheinander:
Dies ist nicht ideal, aber Sie können das Problem beheben, indem Sie das Vorabladen der Navigation aktivieren. Dadurch wird sichergestellt, dass der Bootvorgang von Service Worker und die Navigationsanfrage gleichzeitig erfolgen:
Das Vorabladen der Navigation stellt zwar eine hervorragende Leistungsoptimierung für Websites dar, die Service Worker verwenden, sollte jedoch nicht in allen Situationen aktiviert werden. Insbesondere bei Websites, die eine vorab im Cache gespeicherte App-Shell verwenden, muss die Navigation nicht vorab geladen werden, da der Cache die Navigationsanfrage für das App-Shell-Markup ohne Navigationslatenz verarbeitet. In diesen Fällen wird die vorab geladene Antwort verschwendet, was nicht so toll ist.
Der beste Zeitpunkt für das Vorabladen der Navigation ist, wenn eine Website HTML nicht vorab im Cache speichern kann. Stellen Sie sich Websites vor, bei denen die Markup-Antworten dynamisch sind und beispielsweise vom Authentifizierungsstatus abhängen. Navigationsanfragen dafür können eine netzwerkorientierte Strategie (oder sogar eine nur netzwerkbasierte) Strategie verwenden. Hier kann das Vorabladen der Navigation einen großen Unterschied machen.
Navigationsvorabladen in Workbox verwenden
Das Verwenden eines Navigationsvorabladens direkt in einem Service Worker, der nicht von Workbox unterstützt wird, ist nicht ganz einfach. Die Funktion wird nicht in allen Browsern unterstützt. Zweitens kann es schwierig sein, alles richtig zu machen. Wie du sie direkt nutzen kannst, erfährst du in diesem Erklärvideo von Jake Archibald.
Workbox vereinfacht das Vorabladen der Navigation, da die enable-Methode des workbox-navigation-preload-Moduls die erforderlichen Funktionsprüfungen durchführt und den activate-Event-Listener erstellt, um ihn für Sie zu aktivieren.
Ab hier werden die Vorteile des Navigationsvorabladens in unterstützenden Browsern umgesetzt, indem Workbox verwendet wird, um Navigationsanfragen mit einem netzwerkorientierten Strategie-Handler zu verarbeiten:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
Wenn das Vorabladen der Navigation aktiviert ist, reagiert Workbox auf Navigationsanfragen, die die Strategie NetworkFirst oder NetworkOnly verwenden, mit der vorab geladenen Antwort.
Woran erkenne ich, ob das Vorabladen der Navigation funktioniert?
In Entwicklungs-Builds protokolliert Workbox viele Informationen zu den Funktionen. Wenn Sie überprüfen möchten, ob das Vorabladen der Navigation in Workbox funktioniert, öffnen Sie die Konsole während einer Navigationsanfrage in einem unterstützenden Browser. Sie sehen dann eine Protokollmeldung mit folgendem Text:
Diese Protokollierung ist standardmäßig in Produktions-Builds nicht sichtbar, daher wird sie auch nicht angezeigt, wenn Sie Ihren Service Worker für die Produktion bereitstellen. Es ist jedoch eine gute Möglichkeit, um unter anderem zu überprüfen, ob das Vorabladen der Navigation funktioniert.
Vorab geladene Antworten anpassen
Bei Verwendung des Navigationsvorabladens kann es Szenarien geben, in denen es erforderlich ist, vorab geladene Antworten in einem Anwendungs-Back-End anzupassen. Für Service Worker, die Teilinhalte aus dem Netzwerk streamen, kann dies von Vorteil sein.
In solchen Fällen ist es hilfreich zu wissen, dass Vorabladeanfragen mit einem Service-Worker-Navigation-Preload-Header mit dem Standardwert true gesendet werden:
Service-Worker-Navigation-Preload: true
Anschließend können Sie im Back-End Ihrer Wahl nach diesem Header suchen und die Antwort an Ihre Anforderungen anpassen. Wenn der Standardwert des Headers aus irgendeinem Grund problematisch ist, können Sie ihn im Fensterkontext ändern. Beachten Sie jedoch, dass jede Arbeit, die Sie zum Lesen dieses Headers auf dem Server ausführen, Ihnen überlassen wird und außerhalb des Aufgabenbereichs von Workbox liegt.
Fazit
Das Vorabladen der Navigation ist schwierig, wenn sie direkt verwendet wird, aber diese harte Arbeit lohnt sich, um sicherzustellen, dass ein Service Worker den Browser nicht daran hindert, Navigationsanfragen zu stellen. Dank Workbox können Sie mit deutlich weniger Aufwand vom Vorabladen der Navigation profitieren. Weitere Informationen zum Modul workbox-navigation-preload finden Sie in der Referenzdokumentation.