Sofortiges Surferlebnis

Ergänzen Sie traditionelle Pre-Capture-Techniken mit Servicemitarbeitern.

23. Juni 2020
Aktualisiert 20. August 2020

Es erscheint in:
Netzwerkzuverlässigkeit

Das Ausführen einer Aufgabe an einem Standort umfasst normalerweise mehrere Schritte. Zum Beispiel kann der Kauf eines Produkts auf einer E-Commerce-Website das Suchen nach einem Produkt, das Auswählen eines Artikels aus der Ergebnisliste, das Hinzufügen des Artikels zum Warenkorb und das Abschließen der Transaktion durch Auschecken umfassen.

In technischer Hinsicht bedeutet das Durchblättern verschiedener Seiten, a Navigationsanfrage. Generell, nein Ich möchte langlebig verwenden Cache-Kontrolle Header zum Zwischenspeichern der HTML-Antwort für eine Suchanforderung. Sie sollten normalerweise über das Netzwerk mit zufrieden sein Cache-Kontrolle: kein Cache, um sicherzustellen, dass der HTML-Code zusammen mit der Kette nachfolgender Netzwerkanforderungen (angemessen) auf dem neuesten Stand ist. Jedes Mal, wenn der Benutzer zu einer neuen Seite navigiert, gegen das Netz gehen zu müssen, bedeutet leider, dass jede Navigation langsam sein kann. Zumindest bedeutet dies, dass dies nicht der Fall sein wird 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:

Vorinstallierte Dateien werden mit der "niedrigsten" Priorität angefordert und im HTTP-Cache oder im gespeichert Zwischenspeicher (abhängig davon, ob die Ressource zwischengespeichert werden kann oder nicht), für einen Zeitraum, der zwischen den Browsern variiert. Ab Chrome 85 beträgt dieser Wert beispielsweise 5 Minuten. Die Ressourcen werden fünf Minuten lang aufbewahrt. Danach wird die 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%und erhöht die Anzahl der Artikelimpressionen 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.

1. Statische Seiten und Seitenunterressourcen vorab zwischenspeichern

Pre-Caching ist die Fähigkeit des Servicemitarbeiters, Dateien während der Installation zwischenzuspeichern.

In den folgenden Fällen wird die Vorerfassung verwendet, um ein ähnliches Ziel wie die Vorerfassung zu erreichen: das Surfen zu beschleunigen.

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:

Arbeitsbox . Precaching . precacheAndRoute ( [
 { url : '/about.html' , Revision : 'abcd1234' } ,
 ] ) ;

Seiten-Subressourcen vorspeichern

Das Zwischenspeichern der statischen Assets, die möglicherweise von verschiedenen Abschnitten der Website verwendet werden (z. B. JavaScript, CSS usw.), ist eine allgemeine bewährte Methode und kann in Szenarien vor der Suche einen zusätzlichen Schub geben.

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:

 < link rel = " prefetch " href = " /phones/smartphone-5x.html " as = " document " >

• Fügen Sie die untergeordneten Ressourcen der Seite zur Pre-Check-Liste im Service Worker hinzu:

Arbeitsbox . 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 Wird verwendet, um eine Produktseite mit einer Workbox-Laufzeit-Caching-Strategie abzurufen.

Um dies umzusetzen:

• Füge hinzu ein Tag zur Seite:

 < link rel = " prefetch " href = " /phones/smartphone-5x.html " as = " document " >

• Implementieren Sie im Service Worker eine Laufzeit-Caching-Strategie für diese Arten von Anforderungen:

neue Arbeitsbox . Strategien . StaleWhileRevalidate ( {
 cacheName : 'document-cache' ,
 Plugins : [
 neue Arbeitsbox . Ablauf . 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.

In einigen Fällen kann es jedoch besser sein, diese Aufgabe vollständig an den Servicemitarbeiter zu delegieren. Beispiel: Um die ersten Produkte in eine clientseitig gerenderte Produktlistenseite vorzuladen, müssen Sie möglicherweise mehrere einfügen Tags dynamisch auf der Seite, basierend auf einer Antwort von der API. Dies kann vorübergehend Zeit im Hauptthread der Seite beanspruchen und die Implementierung erschweren.

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 = neue Arbeitsbox ( '/sw.js' ) ;
 wb . register ( ) ;
 const prefetchResponse = warte auf wb. messageSW ( { Typ : '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' , ( event ) => {
 if ( event . data . type === 'PREFETCH_URLS' ) {
 }}
 } ) ;