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 der Wartezeit ausmacht, muss der Browser möglicherweise auch warten, bis der Service Worker gestartet wurde und fetch-Ereignisrückrufe ausgelöst werden.
Die Startzeit variiert je nach Gerät und seinen Funktionen, kann aber sehr lange dauern. Manchmal kann es bis zu einer halben Sekunde dauern, wenn eine CPU langsam ist oder aufgrund von Umgebungsbedingungen in einem gedrosselten Zustand arbeitet. Der Leistungsgewinn durch die Vermeidung des Netzwerks überwiegt wahrscheinlich diese Startzeit, wenn Ihre Navigationsantworten von einer Cache-Instanz bereitgestellt werden. Bei Navigationsanfragen, die an das Netzwerk gesendet werden, kann die Einführung eines Service Workers zu einer spürbaren Verzögerung führen.
Vorabladen der Navigation eingeben
Das Vorabladen der Navigation ist eine Service-Worker-Funktion, die die Verzögerung behebt, die durch die Boot-Zeit des Service Workers verursacht wird. Wenn das Vorabladen der Navigation nicht aktiviert ist, werden der Bootvorgang des Service Workers und die von ihm verarbeitete Navigationsanfrage nacheinander ausgeführt:
Dies ist nicht ideal, aber Sie können es beheben, indem Sie das Vorabladen der Navigation aktivieren. Dadurch wird sichergestellt, dass der Service Worker gleichzeitig gestartet und die Navigationsanfrage gleichzeitig ausgeführt wird:
Das Vorabladen der Navigation ist zwar eine hervorragende Leistungsoptimierung für Websites, die Service Worker verwenden, es ist jedoch keine Funktion, die Sie in allen Situationen aktivieren sollten. 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 gerade toll ist.
Die beste Zeit für das Vorabladen der Navigation ist, wenn eine Website den HTML-Code nicht vorab im Cache speichern kann. Stellen Sie sich Websites vor, auf denen Markup-Antworten dynamisch sind und sich z. B. aufgrund des Authentifizierungsstatus unterscheiden. Für diese Navigationsanfragen kann eine Netzwerk-First-Strategie (oder sogar eine reine Netzwerkstrategie) verwendet werden. Hier kann das Vorabladen der Navigation einen großen Unterschied ausmachen.
Vorabladen der Navigation in Workbox verwenden
Es ist schwierig, das Vorabladen der Navigation direkt in einem Service Worker zu verwenden, der nicht von Workbox bereitgestellt wird. Erstens werden sie nicht von allen Browsern unterstützt. Zweitens: Es kann schwierig sein, alles richtig zu machen. In dieser großartigen Erklärung von Jake Archibald erfahren Sie, wie Sie es direkt verwenden.
Workbox vereinfacht das Vorabladen der Navigation, da die enable-Methode des workbox-navigation-preload-Moduls die erforderlichen Funktionssupportprüfungen durchführt und den activate-Ereignis-Listener erstellt, um sie für dich zu aktivieren.
Hier werden die Vorteile des Vorabladens der Navigation durch die Unterstützung von Browsern realisiert, indem die Workbox Navigationsanforderungen mit einem netzwerkorientierten Strategie-Handler verwendet wird:
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, antwortet Workbox auf Navigationsanfragen, die die Strategien NetworkFirst oder NetworkOnly verwenden, mit der vorab geladenen Antwort.
Woher weiß ich, ob das Vorabladen der Navigation funktioniert?
In Entwicklungs-Builds protokolliert Workbox viel über die Funktion. Wenn Sie prüfen möchten, ob das Vorabladen der Navigation in Workbox funktioniert, öffnen Sie die Konsole während einer Navigationsanfrage in einem Browser, der dies unterstützt. Sie sehen dann eine Protokollmeldung mit folgendem Inhalt:
Dieses Logging ist in Produktions-Builds standardmäßig nicht sichtbar, sodass Sie es nicht sehen, wenn Sie Ihren Service Worker für die Produktion bereitstellen. Sie können damit aber u. a. überprüfen, ob das Vorabladen der Navigation funktioniert.
Vorab geladene Antworten anpassen
Beim Vorabladen der Navigation kann es Szenarien geben, in denen vorab geladene Antworten in einem Anwendungs-Back-End angepasst werden müssen. Ein Beispiel hierfür sind Service Worker, die Teilinhalte aus dem Netzwerk streamen.
In solchen Fällen lohnt es sich 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 Anwendungs-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. Sie müssen nur wissen, dass jede Arbeit, die Sie auf dem Server zum Lesen dieser Kopfzeile ausführen, Ihnen überlassen wird und nicht in den Zuständigkeitsbereich von Workbox fällt.
Fazit
Das Vorabladen der Navigation ist bei direkter Verwendung schwer zu erreichen, aber diese harte Arbeit lohnt sich, um sicherzustellen, dass ein Service Worker den Browser nicht daran hindert, Navigationsanfragen zu stellen. Dank Workbox ist das Vorabladen der Navigation deutlich geringer. Weitere Informationen zum Modul workbox-navigation-preload finden Sie in der Referenzdokumentation.