Adaptives Laden mit Servicemitarbeitern

Ändern Sie die den Benutzern angebotenen Assets basierend auf den Bedingungen ihres Geräts und Netzwerks.

23. Juni 2020
Aktualisiert 20. August 2020

Es erscheint in:
Netzwerkzuverlässigkeit

Benutzer greifen über eine Vielzahl von Netzwerkverbindungen und Geräten auf Websites zu. Selbst in Großstädten, in denen Mobilfunknetze schnell und zuverlässig sind, kann es zu langsameren Ladezeiten kommen, z. B. wenn Sie mit der U-Bahn, im Auto oder einfach nur unterwegs sind. In Regionen wie Schwellenländern tritt dieses Phänomen noch häufiger auf, nicht nur aufgrund unzuverlässiger Netzwerke, sondern auch, weil Geräte tendenziell weniger Speicher- und CPU-Verarbeitungsleistung haben.

Das adaptive Laden ist ein Webleistungsmuster, mit dem Sie Ihre Site basierend auf den Netzwerk- und Gerätebedingungen des Benutzers anpassen können.

Das adaptive Lastmuster wird von Servicemitarbeitern ermöglicht, die Netzwerkinformations-API, das Hardware-Parallelitäts-API, und das Gerätespeicher-API. In diesem Handbuch erfahren Sie, wie Sie mithilfe von Servicemitarbeitern und der Netzwerkinformations-API eine adaptive Ladestrategie erzielen können.

Produktionsfall

Terra ist eines der größten Medienunternehmen in Brasilien. Es hat eine große Benutzerbasis, die aus einer Vielzahl von Geräten und Netzwerken stammt.

Um allen Benutzern ein zuverlässigeres Erlebnis zu bieten, kombiniert Terra Servicemitarbeiter und Netzwerkinformations-API um Benutzern mit 2G- oder 3G-Verbindungen Bilder mit geringerer Qualität anzubieten.

Das Unternehmen stellte außerdem fest, dass Skripte und Assets (z. B. Banner), die von Werbenetzwerken hochgeladen wurden, für Benutzer, die auf 3G-Verbindungen oder langsameren Verbindungen surfen, besonders schädlich waren.

Wie bei vielen Verlagen dient Terra AMPERE Versionen seiner Seiten an Benutzer von Suchmaschinen und anderen Linkaustauschplattformen. AMP-Seiten sind in der Regel leichtgewichtig und tragen dazu bei, die Auswirkungen von Anzeigen auf die Leistung zu verringern, indem die Priorität des Ladens gegenüber dem Hauptinhalt auf der Seite verringert wird.

Vor diesem Hintergrund hat Terra beschlossen, AMP-Versionen seiner Seiten nicht nur Benutzern von Suchmaschinen anzubieten, sondern auch Benutzern, die auf ihrer Website mit 3G-Verbindungen oder langsameren Verbindungen surfen.

Um dies zu erreichen, verwenden sie die Netzwerkinformations-API auf dem Servicemitarbeiter zu erkennen, ob die Anforderung von 3G oder langsamer kommt. In diesem Fall ändern sie die URL der Seite, um die AMP-Version der Seite anzufordern.

Dank dieser Technik senden sie 70% weniger Bytes an Benutzer mit langsameren Verbindungen. das Zeit verwendet auf AMP-Seiten ist für 3G-Benutzer höher und Anzeigen auf AMP-Seiten haben eine bessere CTR (Klickrate) für diese Gruppe.

Implementieren Sie das adaptive Laden mit Workbox

In diesem Abschnitt werden wir untersuchen, wie Workbox zum Implementieren adaptiver Ladestrategien verwendet werden kann.

Workbox bietet verschiedene sofort einsatzbereite Laufzeit-Caching-Strategien. Sie werden verwendet, um anzugeben, wie der Servicemitarbeiter nach Erhalt einer Antwort eine Antwort generiert holen Veranstaltung.

Zum Beispiel in a Zuerst zwischenspeichern Strategie der Anfrage Dies wird mithilfe der zwischengespeicherten Antwort (falls verfügbar) erfüllt. Wenn es keine zwischengespeicherte Antwort gibt, Anfrage Es wird von einer Netzwerkanforderung erfüllt und die Antwort wird zwischengespeichert.

{ registerRoute } aus 'Workbox-Routing' importieren ;
 { CacheFirst } aus 'Workbox-Strategien' importieren ;
 registerRoute (
 neues RegExp ( '/ img /' ) ,
 neues CacheFirst ( )
 ) ;

Caching-Strategien können mit angepasst werden Workbox-Plugins. Mit diesen können Sie zusätzliche Verhaltensweisen hinzufügen, indem Sie Anforderungen und Antworten während des Lebenszyklus einer Anforderung bearbeiten. Workbox verfügt über mehrere integrierte Plugins für häufige Fälle und APIs. Sie können jedoch auch ein Plugin definieren benutzerdefiniertes Pluginund geben Sie eine benutzerdefinierte Logik Ihrer Wahl ein.

Um eine Lastanpassung zu erreichen, definieren Sie ein benutzerdefiniertes Plugin, das beispielsweise " adaptiveLoadingPlugin:

const adaptiveLoadingPlugin = {
 requestWillFetch : async ( { request } ) => {
 const urlParts = Anfrage . URL . split ( '/' ) ;
 let imageQuality ;
 Schalter (
 Navigator && Navigator . Verbindung
 ? Navigator . Verbindung . effektiveTyp
 : ''
 ) {
 Fall '3g' :
 imageQuality = 'q_30' ;
 Pause ;
 }}
 const newUrl = urlParts
 . Spleiß ( urlParts . Länge - 1 , 0 , imageQuality )
 . beitreten ( '/' )
 . ersetzen ( '.jpg' , '.png' ) ;
 const newRequest = new Request ( newUrl . href , { headers: request . headers } ) ;
 return newRequest ;
 } ,
 } ;

Der obige Code bewirkt Folgendes:

• Implementieren Sie a requestWillFetch () Rückruf: Wird jedes Mal aufgerufen, wenn eine Netzwerkanforderung gestellt werden soll, damit Sie die ändern können Anfrage.
• Überprüfen Sie die Art der Verbindung mit der Netzwerkinformations-API. Basierend auf dem Status des Netzwerks wird ein neuer URL-Teil erstellt, der die Qualität des zu durchsuchenden Bildes angibt (z. q_30 für 3G-Benutzer).
• Erstellen Sie eine neue URL basierend auf der Dynamik neuer Teil Wert und gibt das neue zurück Anfrage basierend auf dieser URL durchzuführen.

Übergeben Sie dann die Ergänzung an a cacheFirst Strategie, die einen regulären Ausdruck enthält, der mit den Bild-URLs übereinstimmt (z. / img /):

Arbeitsbox . Routing . registerRoute (
 neues RegExp ( '/ img /' ) ,
 Arbeitsbox . Strategien . cacheFirst ( {
 cacheName : 'images' ,
 Plugins : [
 adaptiveLoadingPlugin ,
 Arbeitsbox . Ablauf . Plugin ( {
 maxEntries : 50 ,
 purgeOnQuotaError : true ,
 } ) ,
 ] ,
 } ) ,
 ) ;

Wenn Bildanforderungen abgefangen werden, versucht die Laufzeit-Caching-Strategie daher, die Anforderung aus dem Cache zu erfüllen. Wenn nicht verfügbar, wird im Plugin eine Logik ausgeführt, um zu entscheiden, welche Bildqualität aus dem Netzwerk abgerufen werden soll.

Schließlich wird die Antwort zwischengespeichert und an die Seite zurückgesendet.

Cloudinary Workbox Plugin

Cloudinary, ein Bild- und Video-Hosting-Dienst, hat Workbox Plugin Dies kapselt die im vorherigen Abschnitt erläuterten Funktionen und macht die Implementierung noch einfacher.

Das Plugin wurde entwickelt, um damit zu arbeiten Workbox Web Pack Plugin. Verwenden Sie zum Implementieren die GenerateSW () Klasse:

neues workboxPlugin . GenerateSW ( {
 swDest : 'sw.js' ,
 importScripts : [ './cloudinaryPlugin.js' ] ,
 runtimeCaching : [
 {
 urlPattern : neues RegExp ( '^ https: //res.cloudinary.com/.*/image/upload/' ) ,
 Handler : 'CacheFirst' ,
 Optionen : {
 cacheName : 'cloudinary-images' ,
 Plugins : [
 {
 requestWillFetch : async ( { request } ) =>
 cloudinaryPlugin . requestWillFetch ( Anfrage ) ,
 } ,
 ] ,
 } ,
 } ,
 ] ,
 } ) ;

Der obige Code bewirkt Folgendes:

• Verwenden Sie die GenerateSW () Klasse zum Konfigurieren des Webpacks zum Generieren eines Service Workers auf dem in angegebenen Ziel swDest.
• Importieren Sie das Cloudinary Plugin-Skript.
• Definiert eine Cache-Strategie zur ersten Laufzeit-Zwischenspeicherung für Image-Anforderungen an Cloudinary CDN.
• Übergeben Sie die Cloudinary Workbox Plugin um die Bildqualität an die Netzwerkbedingungen anzupassen.

Entdecken Sie anpassungsfähigere Ladestrategien

Sie können noch weiter gehen, indem Sie Gerätesignale wie z Hardware-Parallelität y Speichergerät zu Gerätekategorien und bieten dann verschiedene Assets basierend auf dem Gerätetyp (Low-End, Mid-Range oder High-End).