Netzwerkzeitüberschreitung erzwingen

Manchmal besteht zwar eine Netzwerkverbindung, die aber entweder zu langsam ist oder dass Sie nicht richtig sind, dass Sie online sind. In Situationen, in denen ein Service Worker vorhanden ist, kann eine netzwerkorientierte Caching-Strategie zu lange dauern, um eine Antwort vom Netzwerk zu erhalten, oder die Anfrage hängt sich auf und Ladekreise drehen sich endlos, bis Sie eine Fehlerseite erhalten.

In jedem Fall gibt es Fälle, in denen es vorteilhaft ist, nach einem bestimmten Zeitraum auf die letzte im Cache gespeicherte Antwort für ein Asset oder eine Seite zurückzugreifen. Es gibt jedoch ein weiteres Problem, bei dem Workbox helfen kann.

networkTimeoutSeconds verwenden

Eine Zeitüberschreitung für Netzwerkanfragen kann mit der Strategie NetworkFirst oder NetworkOnly erzwungen werden. Diese Strategien bieten eine networkTimeoutSeconds-Option, die angibt, wie viele Sekunden der Service Worker auf das Eintreffen der Netzwerkantwort warten soll, bevor diese ausscheidet und die letzte im Cache gespeicherte Version zurückgibt:

// sw.js
import { NetworkFirst } from 'workbox-strategies';
import { registerRoute, NavigationRoute } from 'workbox-routing';

// Only wait for three seconds before returning the last
// cached version of the requested page.
const navigationRoute = new NavigationRoute(new NetworkFirst({
  networkTimeoutSeconds: 3,
  cacheName: 'navigations'
}));

registerRoute(navigationRoute);

Mit dem Code oben wird Ihr Service Worker angewiesen, eine netzwerkorientierte Navigationsanfrage zu umgehen und die letzte im Cache gespeicherte Version nach drei Sekunden zu verwenden. Bei Verwendung mit Navigationsanfragen wird dadurch der Zugriff auf die letzte im Cache gespeicherte Antwort einer zuvor besuchten Seite sichergestellt.

Was passiert jedoch, wenn sich für die aufgerufene Seite keine ältere Antwort im Cache befindet? In solchen Fällen können Sie eine Fallback-Antwort auf eine allgemeine Offline-HTML-Seite einrichten:

import {registerRoute, NavigationRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

// Hardcode the fallback cache name and the offline
// HTML fallback's URL for failed responses
const FALLBACK_CACHE_NAME = 'offline-fallback';
const FALLBACK_HTML = '/offline.html';

// Cache the fallback HTML during installation.
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(FALLBACK_CACHE_NAME).then((cache) => cache.add(FALLBACK_HTML)),
  );
});

// Apply a network-only strategy to navigation requests.
// If offline, or if more than five seconds pass before there's a
// network response, fall back to the cached offline HTML.
const networkWithFallbackStrategy = new NetworkOnly({
  networkTimeoutSeconds: 5,
  plugins: [
    {
      handlerDidError: async () => {
        return await caches.match(FALLBACK_HTML, {
          cacheName: FALLBACK_CACHE_NAME,
        });
      },
    },
  ],
});

// Register the route to handle all navigations.
registerRoute(new NavigationRoute(networkWithFallbackStrategy));

Das funktioniert, da der Handler bei der Verwendung von networkTimeoutSeconds in einer NetworkFirst-Strategie eine Fehlerantwort zurückgibt, wenn das Zeitlimit erreicht wird und keine Cache-Übereinstimmung für die URL vorhanden ist. In diesem Fall kann das handlerDidError Workbox-Plug-in als Fallback eine allgemeine Antwort liefern.

Wie lange ist zu warten?

Beim Erzwingen einer Zeitüberschreitung für Anforderungen – insbesondere für Navigationsanfragen – möchten Sie das richtige Gleichgewicht finden: Der Nutzer sollte nicht zu lange warten und es wird kein zu schnelles Zeitlimit erreicht. Wenn Sie zu lange warten, besteht die Gefahr, dass Nutzer bei langsamen Verbindungen abspringen, bevor das Zeitlimit erreicht wird. Wenn Sie zu schnell das Zeitlimit überschritten haben, können Sie möglicherweise unnötigen veralteten Inhalt aus dem Cache bereitstellen.

Die richtige Antwort lautet: „Kommt darauf an.“ Wenn Sie eine Website wie einen Blog betreiben und Ihre Inhalte nicht zu oft aktualisieren, ist die richtige Antwort wahrscheinlich, nicht zu lange zu warten, da der Inhalt des Cache wahrscheinlich „frisch“ genug ist. Bei interaktiveren Websites und Webanwendungen empfiehlt es sich jedoch, etwas länger zu warten und nicht zu früh im Service-Worker-Cache zu warten, ob veraltete Daten bereitgestellt werden.

Wenn Sie Messwerte im Außendienst aufzeichnen, sehen Sie sich das 75. Perzentil der Werte für Time to First Byte (TTFB) und First Contentful Paint (FCP) an, um herauszufinden, wo Ihre Nutzerinnen und Nutzer längere Wartezeiten für Navigationsanfragen haben. Das kann Ihnen Aufschluss darüber geben, wo Sie die Grenze ziehen können.