Mainline Menswear setzt PWA ein und steigert Conversion-Rate um 55 %

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

Mainline ist ein Online-Bekleidungshändler, der die größten Designermarken der Mode anbietet. Das in Großbritannien ansässige Unternehmen setzt auf sein Team interner Experten, das strategisch mit wichtigen Partnern zusammenarbeitet, um allen ein reibungsloses Einkaufserlebnis zu bieten. Mit einer Marktpräsenz in über 100 Ländern über sieben speziell entwickelte regionale Websites und eine App wird Mainline weiterhin dafür sorgen, dass das E-Commerce-Angebot mit der Konkurrenz mithalten kann.

Herausforderung

Mainline Menswear wollte die aktuelle für Mobilgeräte optimierte Website mit progressiven Funktionen ergänzen, die der „Mobile First“-Vision des Unternehmens entsprechen. Dabei sollte das Design für Mobilgeräte und die Funktionalität auf den wachsenden Smartphone-Markt ausgerichtet sein.

Lösung

Ziel war es, eine PWA zu entwickeln und zu starten, die die ursprüngliche für Mobilgeräte optimierte Version der Mainline Menswear-Website ergänzt, und dann die Statistiken mit der hybriden mobilen App zu vergleichen, die derzeit für Android und iOS verfügbar ist.

Nachdem die App eingeführt und von einem kleinen Teil der Mainline Menswear-Nutzer verwendet wurde, konnten sie die Unterschiede bei den wichtigsten Statistiken zwischen PWA, App und Web ermitteln.

Bei der Umstellung ihrer Website auf eine PWA hat Mainline darauf geachtet, dass das für die Website ausgewählte Framework (Nuxt.js mit Vue.js) zukunftssicher ist und die Nutzung von schnell entwickelnden Webtechnologien ermöglicht.

Ergebnisse

Technische Details

Mainline Menswear verwendet das Nuxt.js-Framework, um die Website zu bündeln und zu rendern. Die Website ist eine Single-Page-Anwendung (SPA).

Service Worker-Datei generieren

Um den Service Worker zu generieren, hat Mainline Menswear die Konfiguration über eine benutzerdefinierte Implementierung des Workbox-Moduls nuxt/pwa hinzugefügt.

Der Grund für die Forking des nuxt/pwa-Moduls war, dass das Team der Service Worker-Datei weitere Anpassungen hinzufügen wollte, die in der Standardversion nicht möglich waren oder Probleme verursachten. Eine solche Optimierung betraf die Offlinefunktionen der Website, z. B. die Bereitstellung einer Standard-Offlineseite und die Erfassung von Analysedaten im Offlinemodus.

Aufbau des Web-App-Manifests

Das Team hat ein Manifest mit Symbolen für verschiedene mobile App-Symbolgrößen und anderen Web-App-Details wie name, description und theme_color erstellt:

{
  "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"
}

Nach der Installation kann die Web-App über den Startbildschirm gestartet werden, ohne dass der Browser im Weg ist. Dazu fügen Sie den Parameter display in die Manifestdatei der Web-App ein:

{
  "display": "standalone"
}

Zu guter Letzt kann das Unternehmen jetzt ganz einfach nachvollziehen, wie viele Nutzer die Web-App über den Startbildschirm aufrufen. Dazu muss lediglich ein utm_source-Parameter im Feld start_url des Manifests angehängt werden:

{
  "start_url": "/?utm_source=pwa"
}

Laufzeit-Caching für schnellere Navigation

Caching für Web-Apps ist ein Muss für die Optimierung der Seitengeschwindigkeit und für eine bessere Nutzererfahrung für wiederkehrende Nutzer.

Für das Caching im Web gibt es eine Reihe verschiedener Ansätze. Das Team verwendet eine Kombination aus dem HTTP-Cache und der Cache API, um Assets clientseitig zu cachen.

Die Cache API gibt Mainline Menswear mehr Kontrolle über die im Cache gespeicherten Assets, sodass das Unternehmen komplexe Strategien für jeden Dateityp anwenden kann. Das klingt alles kompliziert und schwer einzurichten und zu verwalten, aber Workbox bietet eine einfache Möglichkeit, solche komplexen Strategien zu deklarieren, und erleichtert die Wartung.

CSS und JS im Cache speichern

Für CSS- und JS-Dateien hat sich das Team entschieden, sie zu cachen und über den Cache mit der StaleWhileRevalidate-Workbox-Strategie bereitzustellen. Mit dieser Strategie können alle CSS- und JS-Dateien von Nuxt schnell bereitgestellt werden, was die Leistung der Website deutlich 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-Schriftarten 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

Für Bilder hat sich Mainline Menswear für zwei Strategien entschieden. Die erste Strategie gilt für alle Bilder, die von ihrem CDN stammen. Das sind in der Regel Produktbilder. Die Seiten sind sehr bildlastig, daher achten sie darauf, nicht zu viel Speicherplatz auf den Geräten der Nutzer zu belegen. Über Workbox haben sie also eine Strategie hinzugefügt, mit der nur Bilder aus ihrem CDN gecacht werden, und zwar maximal 60 Bilder mit dem ExpirationPlugin.

Das 61. (neueste) angeforderte Bild ersetzt das 1. (älteste) Bild, sodass zu jedem Zeitpunkt maximal 60 Produktbilder im Cache gespeichert sind.

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 klein, aber zur Sicherheit ist die Anzahl dieser im Cache gespeicherten Bilder auch auf 60 begrenzt.

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,
      }),
    ],
  }),
);

Offlinefunktionen anbieten

Die Offline-Seite wird direkt nach der Installation und Aktivierung des Service Workers im Cache gespeichert. Dazu erstellen sie eine Liste aller Offlinedependenzen: 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 eingefügt, die sich um alle wichtigen Aufgaben kümmert, z. B. das Hinzufügen der URLs zum Cache, das Prüfen auf Revisionsabweichungen, das Aktualisieren und das Bereitstellen der vorab im Cache gespeicherten Dateien mit einer CacheFirst-Strategie.

workbox.precaching.precacheAndRoute(PRECACHE);

Offlinenavigation

Sobald der Service Worker aktiviert ist und die Offline-Seite vorab im Cache gespeichert wurde, wird sie verwendet, um auf Offline-Navigationsanfragen des Nutzers zu reagieren. Die Web-App von Mainline Menswear ist zwar eine SPA, die Offline-Seite wird aber erst angezeigt, wenn die Seite neu geladen wird, der Nutzer den Browser-Tab schließt und wieder öffnet oder die Web-App offline über den Startbildschirm gestartet wird.

Dazu hat Mainline Menswear einen Fallback für fehlgeschlagene NavigationRoute-Anfragen mit der vorab im Cache gespeicherten Offline-Seite 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

Erfolgreiche Installationen melden

Abgesehen vom Tracking des Startbildschirmstarts (mit "start_url": "/?utm_source=pwa" im Web-App-Manifest) werden in der Web-App auch erfolgreiche App-Installationen gemeldet, indem auf das appinstalled-Ereignis in window gewartet wird:

window.addEventListener('appinstalled', (evt) => {
  ga('send', 'event', 'Install', 'Success');
});

Wenn Sie Ihrer Website PWA-Funktionen hinzufügen, wird das Einkaufserlebnis Ihrer Kunden weiter verbessert. Außerdem ist die Markteinführung schneller als bei einer [plattformspezifischen] App.

Andy Hoyle, Head of Development

Fazit

Weitere Informationen zu progressiven Web-Apps und zum Erstellen solcher Apps finden Sie auf web.dev im Abschnitt zu progressiven Web-Apps.

Weitere Fallstudien zu progressiven Web-Apps finden Sie im Abschnitt zu Fallstudien.