Mainline ist ein Online-Bekleidungshändler, der die größten Designermarken in der Kategorie „Mode“ anbietet. Das im Vereinigten Königreich ansässige Unternehmen vertraut sein internes Expertenteam, das strategisch mit wichtigen Partnern zusammengearbeitet hat, um allen ein reibungsloses Einkaufserlebnis zu bieten. Mit sieben maßgeschneiderten regionalen Websites und einer App ist Mainline in mehr als 100 Ländern auf dem Markt präsent. Das E-Commerce-Angebot von Mainline kann also weiterhin mit den Mitbewerbern konkurrieren.
Herausforderung
Das Ziel von Mainline Menswear war es, die aktuelle für Mobilgeräte optimierte Website mit progressiven Funktionen zu ergänzen, die ihrer „Mobile First“-Vision entsprechen. Das Unternehmen konzentrierte sich auf ein für Mobilgeräte optimiertes Design und eine für Mobilgeräte optimierte Funktionalität mit Blick auf den wachsenden Smartphone-Markt.
Lösung
Ziel war es, eine PWA zu entwickeln und auf den Markt zu bringen, die die ursprüngliche, für Mobilgeräte optimierte Version der Website Mainline Menswear ergänzte. Anschließend wurden die Statistiken mit der hybriden mobilen App verglichen, die derzeit für Android und iOS verfügbar ist.
Nachdem die App auf den Markt gebracht wurde und von einem kleinen Teil der Nutzer von Mainline Menswear verwendet wurde, konnte das Unternehmen den Unterschied in den wichtigsten Statistiken zwischen PWA, App und Web ermitteln.
Mainline verfolgte bei der Umwandlung der Website in eine PWA den Ansatz, das für die Website ausgewählte Framework (Nuxt.js, Vue.js) zukunftssicher zu sein und die Vorteile einer schnelllebigen Webtechnologie zu nutzen.
Ergebnisse
139%
Mehr Seiten pro Sitzung in PWA vs. Web.
161%
Längere Sitzungsdauer in PWA und im Web.
10 %
niedrigere Absprungrate bei PWA im Vergleich zum Web
12,5 %
höherer durchschnittlicher Bestellwert bei PWA vs. Web
55%
höhere Conversion-Rate in PWA im Vergleich zum Web.
243%
höherer Umsatz pro Sitzung in PWA im Vergleich zum Web.
Technische Details
Mainline Menswear verwendet das Nuxt.js-Framework, um die Website zu bündeln und zu rendern. Dabei handelt es sich um eine Single-Page-Anwendung (SPA).
Service Worker-Datei generieren
Zum Generieren des Service Workers fügte Mainline Menswear die Konfiguration durch eine benutzerdefinierte Implementierung des nuxt/pwa Workbox-Moduls hinzu.
Der Grund dafür war, dass das Modul nuxt/pwa abgespalten wurde, damit das Team der Service Worker-Datei weitere Anpassungen hinzufügen kann, die bei Verwendung der Standardversion nicht möglich waren oder bei denen Probleme aufgetreten sind.
Eine solche Optimierung beschäftigte sich mit der Offline-Funktion der Website, wie etwa dem Bereitstellen einer Standard-Offlineseite und dem Erfassen von Analysen im Offline-Modus.
Aufbau des Web-App-Manifests
Das Team erstellte ein Manifest mit Symbolen für verschiedene Symbolgrößen für mobile Apps und anderen Web-App-Details wie name, description und theme_color:
{
"name": "Mainline Menswear",
"short_name": "MMW",
"description": "Shop mens designer clothes with Mainline Menswear. Famous brands including Hugo Boss, Adidas, and Emporio Armani.",
"icons": [
{
"src": "/_nuxt/icons/icon_512.c2336e.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#107cbb"
}
Wenn die Webanwendung installiert ist, kann sie vom Startbildschirm aus gestartet werden, ohne dass der Browser dadurch beeinträchtigt wird. Dazu wird der Parameter display in die Manifestdatei der Web-App eingefügt:
{
"display": "standalone"
}
Nicht zuletzt kann das Unternehmen jetzt ganz einfach nachvollziehen, wie viele Nutzer seine Webanwendung über den Startbildschirm aufrufen. Dazu hängt es einfach den Parameter utm_source im Feld start_url des Manifests an:
{
"start_url": "/?utm_source=pwa"
}
Laufzeit-Caching für schnellere Navigation
Caching für Webanwendungen ist ein Muss, um die Seitengeschwindigkeit zu optimieren und wiederkehrenden Nutzern eine bessere Nutzererfahrung zu bieten.
Für das Caching im Web gibt es verschiedene verschiedene Ansätze. Das Team verwendet eine Mischung aus HTTP-Cache und Cache API zum Caching von Assets auf Clientseite.
Mit der Cache API kann Mainline Menswear die im Cache gespeicherten Assets genauer steuern und auf jeden Dateityp komplexe Strategien anwenden. Das klingt alles kompliziert und schwer einzurichten und zu warten. Mit Workbox ist es jedoch möglich, so komplexe Strategien zu erklären und Wartungen zu vereinfachen.
CSS und JS zwischenspeichern
Für CSS- und JS-Dateien entschied sich das Team, sie im Cache zu speichern und mithilfe der Workbox-Strategie StaleWhileRevalidate über den Cache bereitzustellen. Auf diese Weise können alle CSS- und JS-Dateien von Nuxt schnell bereitgestellt werden, was die Leistung der Website erheblich steigert.
Gleichzeitig werden die Dateien im Hintergrund auf die neueste Version für den nächsten Besuch aktualisiert:
/* sw.js */
workbox.routing.registerRoute(
/\/_nuxt\/.*(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'css_js',
}),
'GET',
);
Google Fonts im Cache speichern
Die Strategie für das Caching von Google Fonts hängt von zwei Dateitypen ab:
- Das Stylesheet, das die
@font-face-Deklarationen enthält - Die zugrunde liegenden Schriftartdateien, die im oben genannten Stylesheet angefordert werden
// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
workbox.routing.registerRoute(
/https:\/\/fonts\.googleapis\.com\/*/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google_fonts_stylesheets',
}),
'GET',
);
// Cache the underlying font files with a cache-first strategy for 1 year.
workbox.routing.registerRoute(
/https:\/\/fonts\.gstatic\.com\/*/,
new workbox.strategies.CacheFirst({
cacheName: 'google_fonts_webfonts',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
maxEntries: 30,
}),
],
}),
'GET',
);
Bilder im Cache speichern
Bei den Bildern entschied sich Mainline Menswear für zwei Strategien. Die erste Strategie gilt für alle Bilder, die von ihrem CDN stammen. In der Regel sind das Produktbilder. Ihre Seiten enthalten viele Bilder, sodass sie nicht zu viel Speicherplatz auf dem Gerät der Nutzer einnehmen. Im Rahmen von Workbox wurde daher eine Strategie hinzugefügt, bei der Bilder nur aus ihrem CDN im Cache gespeichert werden, und zwar mit maximal 60 Bildern mithilfe von ExpirationPlugin.
Das 61. (neueste) angeforderte Bild ersetzt das erste (älteste) Bild, sodass zu einem beliebigen Zeitpunkt nicht mehr als 60 Produktbilder im Cache gespeichert werden.
workbox.routing.registerRoute(
({ url, request }) =>
url.origin === 'https://mainline-menswear-res.cloudinary.com' &&
request.destination === 'image',
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'product_images',
plugins: [
new workbox.expiration.ExpirationPlugin({
// Only cache 60 images.
maxEntries: 60,
purgeOnQuotaError: true,
}),
],
}),
);
Die zweite Bildstrategie verarbeitet die restlichen Bilder, die vom Ursprung angefordert werden. Diese Bilder sind in der Regel sehr wenige und kleine Bilder vom Ursprung. Um auf der sicheren Seite zu sein, ist die Anzahl dieser im Cache gespeicherten Bilder auf 60 beschränkt.
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg|webp)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'images',
plugins: [
new workbox.expiration.ExpirationPlugin({
// Only cache 60 images.
maxEntries: 60,
purgeOnQuotaError: true,
}),
],
}),
);
Offline-Funktionen
Die Offlineseite wird direkt nach der Installation und Aktivierung des Service Workers vorab im Cache gespeichert. Dazu erstellt sie eine Liste aller Offlineabhängigkeiten: die Offline-HTML-Datei und ein Offline-SVG-Symbol.
const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
{ url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
{ url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];
Die Precache-Liste wird dann in Workbox eingespeist, die sich um das aufwendige Hinzufügen der URLs zum Cache, das Prüfen auf Überarbeitungsabweichungen, die Aktualisierung und die Bereitstellung der vorab im Cache gespeicherten Dateien mit einer CacheFirst-Strategie kümmert.
workbox.precaching.precacheAndRoute(PRECACHE);
Umgang mit Offlinenavigationen
Nachdem der Service Worker aktiviert wurde und die Offlineseite vorab im Cache gespeichert wurde, wird sie verwendet, um auf Offlinenavigationsanfragen des Nutzers zu antworten. Die Web-App von Mainline Menswear ist zwar eine SPA, aber die Offlineseite wird erst angezeigt, nachdem sie neu geladen wurde, der Nutzer den Browsertab schließt und wieder öffnet oder wenn die Web-App offline über den Startbildschirm gestartet wird.
Zu diesem Zweck hat Mainline Menswear einen Fallback für fehlgeschlagene NavigationRoute-Anfragen mit der vorab im Cache gespeicherten Offlineseite bereitgestellt:
const htmlHandler = new workbox.strategies.NetworkOnly();
const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
const request = event.request;
// A NavigationRoute matches navigation requests in the browser, i.e. requests for HTML
return htmlHandler.handle({ event, request }).catch(() => caches.match(OFFLINE_HTML, {
ignoreSearch: true
}));
});
workbox.routing.registerRoute(navigationRoute);
Demo
Berichte über erfolgreiche Installationen
Abgesehen vom Tracking des Starts des Startbildschirms (mit "start_url": "/?utm_source=pwa" im Manifest der Webanwendung) meldet die Web-App auch erfolgreiche App-Installationen, indem das appinstalled-Ereignis auf window überwacht wird:
window.addEventListener('appinstalled', (evt) => {
ga('send', 'event', 'Install', 'Success');
});
Wenn du deiner Website PWA-Funktionen hinzufügst, können deine Kunden bei dir einkaufen. Außerdem lässt sie sich schneller auf den Markt bringen als eine [plattformspezifische] App.
Andy Hoyle, Head of Development
Fazit
Weitere Informationen zu progressiven Web-Apps und deren Erstellung finden Sie im Abschnitt zu progressiven Web-Apps auf web.dev.
Weitere Fallstudien zu progressiven Web-Apps finden Sie im Abschnitt „Fallstudien“.