Ergänzen Sie traditionelle Pre-Capture-Techniken mit Servicemitarbeitern.
Aktualisiert
Netzwerkzuverlässigkeit
La realización de una tarea en un sitio suele implicar varios pasos. Por ejemplo, comprar un producto en un sitio Netz de comercio electrónico puede implicar buscar un producto, seleccionar un artículo de la lista de resultados, agregar el artículo al carrito y completar la operación mediante el pago.
In technischer Hinsicht bedeutet das Durchblättern verschiedener Seiten, a Navigationsanfrage. Generell, nein Ich möchte langlebig verwenden Cache-Kontrolle Überschriften para almacenar en Zwischenspeicher la respuesta HTML para una solicitud de navegación. Normalmente deberían satisfacerse a través de la red, con Cache-Kontrolle: kein Cache, para garantizar que el HTML, junto con la cadena de solicitudes de red posteriores, Sein (razonablemente) actualizado. Tener que ir en contra de la red cada vez que el Nutzername navega a una nueva página significa, desafortunadamente, que cada navegación puede ser lenta; al menos, significa que no será sicherlich Schnell.
Um diese Anforderungen zu beschleunigen, können Sie, wenn Sie Benutzeraktionen antizipieren können, diese Seiten und Assets im Voraus anfordern und sie für einen kurzen Zeitraum im Cache aufbewahren, bis der Benutzer auf diese Links klickt. Diese Technik wird als Prefetch bezeichnet und üblicherweise durch Hinzufügen implementiert Tags zu Seiten, die die zuvor zu durchsuchende Ressource angeben.
In diesem Handbuch werden wir verschiedene Möglichkeiten untersuchen, wie Servicemitarbeiter Es kann als Ergänzung zu traditionellen Vorzuchttechniken verwendet werden.
Produktionsfälle
Freier Markt Es ist die größte E-Commerce-Website in Lateinamerika. Um das Surfen zu beschleunigen, werden sie dynamisch injiziert Etiketten in einigen Teilen des Flusses. Auf Listenseiten erhalten sie beispielsweise die folgende Ergebnisseite, sobald der Benutzer zum Ende der Liste blättert:
Los archivos precargados se solicitan con la prioridad «más baja» y se almacenan en la caché HTTP oder in der Zwischenspeicher (dependiendo de si el recurso se puede almacenar en caché o no), durante un período de tiempo que varía según los Browser. Por ejemplo, a partir de Chrome 85, este valor es de 5 minutos. Los recursos se mantienen durante cinco minutos, después de los cuales el Cache-Kontrolle Es gelten die Regeln für die Ressource.
Mithilfe des Service Worker-Caching können Sie die Lebensdauer von Prefetch-Ressourcen über das Fünf-Minuten-Fenster hinaus verlängern.
Zum Beispiel italienisches Sportportal Virgilio Sport Verwendet die Servicemitarbeiter, um eine Vorschau der beliebtesten Beiträge auf Ihrer Homepage anzuzeigen. Sie benutzen auch die Netzwerkinformations-API um eine Voraberfassung für Benutzer zu vermeiden, die sich in einer 2G-Verbindung befinden.
Infolgedessen konnte Virgilio Sport nach mehr als dreiwöchiger Beobachtung die Ladezeiten für die Navigation zu Artikeln verbessern. 78%y aumenta el número de Eindrücke de artículos 45%.
Implementieren Sie das Caching mit Workbox
Im nächsten Abschnitt werden wir Workbox verwenden, um zu zeigen, wie verschiedene Caching-Techniken im Service Worker implementiert werden, die als Ergänzung zu verwendet werden können oder sogar ein Ersatz, der diese Aufgabe vollständig an den Servicemitarbeiter delegiert.
Vorsicht: Sie müssen Maßnahmen ergreifen, um sicherzustellen, dass das Hinzufügen eines Servicemitarbeiters zu Ihrer Site das Surfen nicht verlangsamt. Wenn Sie den Servicemitarbeiter starten, ohne ihn zum Beantworten einer Suchanforderung zu verwenden, tritt eine geringe Latenz auf (wie in erläutert) Erstellen Sie schnellere und stabilere Anwendungen mit Servicemitarbeitern). Sie können diesen Overhead verringern, indem Sie eine aufgerufene Funktion aktivieren Navigationsvorladungund dann mit dem Netzwerkantwort Dies wurde in Ihrem Wiederherstellungsereignishandler vorinstalliert.
1. Statische Seiten und Seitenunterressourcen vorab zwischenspeichern
Pre-Caching ist die Fähigkeit des Servicemitarbeiters, Dateien während der Installation zwischenzuspeichern.
Precaching klingt ähnlich wie Preloading, ist aber eine andere Technik. Im ersten Fall findet und speichert der Servicemitarbeiter Ressourcen (normalerweise statische Dateien) während der Installation und speichert sie im Cache, bis eine neue Version der Datei verfügbar ist. Im zweiten Fall werden Ressourcen im Voraus angefordert, um sie für kurze Zeit im Cache zu haben, um die nachfolgende Navigation zu beschleunigen.
En los siguientes casos, la captura previa se utiliza para lograr un Ziel similar al de la captura previa: hacer que la navegación sea más rápida.
Statisches Seiten-Caching
Für Seiten, die zur Kompilierungszeit generiert werden (z. about.html, contact.html) oder auf vollständig statischen Sites können die Dokumente der Site einfach zur Precache-Liste hinzugefügt werden, sodass sie bei jedem Zugriff des Benutzers bereits im Cache verfügbar sind:
workbox.precaching.precacheAndRoute([
{URL: '/about.html', revision: 'abcd1234'},
]);Seiten-Subressourcen vorspeichern
El almacenamiento en caché de los activos estáticos que las diferentes secciones del sitio podrían utilizar (por ejemplo, JavaScript, CSS, etc.) es una práctica recomendada general y puede dar un impulso adicional en los escenarios de búsqueda previa.
Um die Navigation auf einer E-Commerce-Website zu beschleunigen, können Sie verwenden Tags auf Auflistungsseiten, um eine Vorschau der Produktdetailseiten für die ersten Produkte auf einer Auflistungsseite anzuzeigen. Wenn Sie bereits untergeordnete Ressourcen auf der Produktseite zwischengespeichert haben, kann dies das Surfen noch beschleunigen.
So implementieren Sie dies:
- Füge hinzu ein
Tag zur Seite:
<Verknüpfung rel="prefetch" href="/phones/smartphone-5x.html" As="Dokument">- Fügen Sie die untergeordneten Ressourcen der Seite zur Pre-Check-Liste im Service Worker hinzu:
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
]);2. Verlängern Sie die Nutzungsdauer von Ressourcen vor dem Fundraising
Wie bereits erwähnt, ruft die Ressourcen ab und hält sie für einen begrenzten Zeitraum im HTTP-Cache Cache-Kontrolle Es gelten die Regeln für eine Ressource. Ab Chrome 85 beträgt dieser Wert 5 Minuten.
Mit Servicemitarbeitern können Sie die Lebensdauer von Prefetch-Seiten verlängern und gleichzeitig den zusätzlichen Vorteil bieten, dass diese Ressourcen für die Offline-Verwendung verfügbar sind.
Im obigen Beispiel könnten Sie das ergänzen se utiliza para obtener una página de producto con una Strategie de almacenamiento en caché en tiempo de ejecución de Workbox.
Um dies umzusetzen:
- Füge hinzu ein
Tag zur Seite:
<Verknüpfung rel="prefetch" href="/phones/smartphone-5x.html" As="Dokument">- Implementieren Sie im Service Worker eine Laufzeit-Caching-Strategie für diese Arten von Anforderungen:
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'document-cache',
Plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 30 * 24 * 60 * 60,
}),
],
});In diesem Fall haben wir uns für a entschieden veraltete Strategie während der erneuten Validierung. Bei dieser Strategie können Seiten parallel sowohl aus dem Cache als auch aus dem Netzwerk angefordert werden. Die Antwort kommt aus dem Cache, falls verfügbar, andernfalls aus dem Netzwerk. Der Cache wird bei jeder erfolgreichen Anforderung immer über die Antwort des Netzwerks auf dem Laufenden gehalten.
3. Delegieren Sie die vorherige Einstellung an den Servicemitarbeiter
In den meisten Fällen ist der beste Ansatz die Verwendung . Das Etikett ist a Ressourcenvorschlag Entwickelt, um die Vorerfassung so effizient wie möglich zu gestalten.
En algunos casos, sin embargo, puede ser mejor delegar esta tarea por completo al trabajador del servicio. Por ejemplo: para precargar los primeros productos en una página de lista de productos renderizada del lado del Klient, es posible que deba inyectar varios etiquetas dinámicamente en la página, según una respuesta de la API. Esto puede consumir momentáneamente tiempo en el hilo principal de la página y dificultar la implementación.
Verwenden Sie in solchen Fällen eine "Kommunikationsstrategie für die Seite zum Servicemitarbeiter", um die Vorladeaufgabe vollständig an den Servicemitarbeiter zu delegieren. Diese Art der Kommunikation kann mit erreicht werden worker.postMessage ():
das Workbox-Fensterpaket Es vereinfacht diese Art der Kommunikation und abstrahiert viele Details aus dem zugrunde liegenden Anruf, der gerade getätigt wird.
Das Prefetch mit dem Workbox-Fenster kann wie folgt implementiert werden:
- Auf Seite: Rufen Sie den Servicemitarbeiter an und übergeben Sie den Nachrichtentyp und die Liste der URLs an die Vorsuche:
const wb = new Arbeitsbox('/sw.js');
wb.registrieren();const prefetchResponse = erwarten wb.messageSW({Art: 'PREFETCH_URLS', urls: […]});
- Im Service Worker: Implementieren Sie einen Nachrichtenhandler, um a auszugeben
fetch ()Fordern Sie an, dass jede URL zuvor gesucht wird:
addEventListener('message', (Veranstaltung) => {
wenn (Veranstaltung.Daten.Art === 'PREFETCH_URLS') {
}
});
