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

Los usuarios acceden a sitios Netz a través de una amplia variedad de dispositivos y conexiones de red. Incluso en las principales ciudades, donde las redes móviles son rápidas y confiables, uno puede terminar experimentando tiempos de carga más lentos, por ejemplo, al viajar en el metro, en un automóvil o simplemente al moverse. En regiones como los mercados emergentes, este fenómeno es aún más común, no solo debido a redes poco confiables, sino también porque los dispositivos tienden a tener menos memoria y potencia de procesamiento de CPU.

La carga adaptable es un patrón de rendimiento web que le permite adaptar su sitio en función de la red del Nutzername y las condiciones del dispositivo.

Das adaptive Lastmuster wird von Servicemitarbeitern ermöglicht, die Netzwerkinformations-API, das Hardware-Parallelitäts-API, und das Gerätespeicher-API. En esta guía, exploramos cómo puede utilizar los trabajadores del servicio y la API de información de red para lograr una Strategie de carga adaptable.

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.

La empresa también descubrió que los Skripte y los activos (como los banners) cargados por las redes publicitarias eran especialmente perjudiciales para los usuarios que navegaban en 3G o conexiones más lentas.

Wie bei vielen Verlagen dient Terra AMPERE versiones de sus páginas a usuarios procedentes de Suchmaschinen y otras plataformas de Link austausch. Las páginas AMPERE suelen ser livianas y ayudan a mitigar el impacto de los anuncios en el rendimiento al reducir la prioridad de su carga con respecto al Inhalt principal de la página.

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 en el trabajador del servicio para detectar si la solicitud proviene de 3G o más lento. Si ese es el caso, cambian la Url de la página para solicitar la versión AMP de la página.

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 proporciona varias estrategias de almacenamiento en Zwischenspeicher en tiempo de ejecución listas para usar. Se utilizan para indicar cómo el trabajador del servicio genera una respuesta después de recibir una 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.

importieren {registerRoute} desde 'Workbox-Routing';
importieren {CacheFirst} desde 'workbox-strategies';
registerRoute(
new RegExp('/img/'),
new 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: asynchron ({request}) => {
const urlParts = request.URL.split('/');
Lassen imageQuality;
switch (
Navigator && Navigator.Verbindung
? Navigator.Verbindung.effectiveType
: ''
) {
case '3g':
imageQuality = 'q_30';
brechen;
}
const newUrl = urlParts
.spleißen(urlParts.Länge - 1, 0, imageQuality)
.join('/')
.replace('.jpg', '.png');
const newRequest = new Anfrage(newUrl.href, {Überschriften: request.Überschriften});
Rückkehr 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 /):

workbox.routing.registerRoute(
  new RegExp('/img/'),
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    Plugins: [
      adaptiveLoadingPlugin,
      workbox.expiration.Plugin({
        maxEntries: 50,
        purgeOnQuotaError: wahr,
      }),
    ],
  }),
);

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:

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

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).