Firma Mainline Menswear wdraża PWA i odnotowuje wzrost współczynnika konwersji o 55%

Mainline to internetowy sklep odzieżowy, który oferuje produkty największych marek odzieżowych. Brytyjska firma korzysta z pomocy zespołu wewnętrznych ekspertów, którzy współpracują strategicznie z kluczowymi partnerami, aby zapewnić wszystkim bezproblemowe zakupy. Mainline ma obecność na rynkach w ponad 100 krajach dzięki 7 spersonalizowanym witrynom regionalnym i aplikacji. Firma będzie nadal dbać o to, aby jej oferta e-commerce była konkurencyjna.

Wyzwanie

Celem firmy Mainline Menswear było uzupełnienie obecnej strony internetowej zoptymalizowanej pod kątem urządzeń mobilnych o funkcje, które będą zgodne z ich wizją „najpierw mobilność”, skupiając się na łatwym w użyciu interfejsie i funkcjonalnościach oraz mając na uwadze rosnący rynek smartfonów.

Rozwiązanie

Celem było utworzenie i wdrożenie PWA, która uzupełnia oryginalną wersję strony internetowej Mainline Menswear zoptymalizowaną pod kątem urządzeń mobilnych, a następnie porównanie statystyk z hybrydową aplikacją mobilną, która jest obecnie dostępna na Androida i iOS.

Gdy aplikacja została uruchomiona i zaczęli z niej korzystać użytkownicy Mainline Menswear, mogli oni porównać najważniejsze statystyki dotyczące aplikacji internetowej, Progressive Web App i wersji internetowej.

Podczas konwertowania witryny na PWA Mainline zastosował podejście, które miało zapewnić, aby wybrany przez firmę framework (Nuxt.js korzystający z Vue.js) był przyszłościowy i umożliwiał korzystanie z szybko rozwijających się technologii internetowych.

Wyniki

139%

Więcej stron na sesję w aplikacji internetowej w porównaniu z internetem

161%

Dłuższe sesje w aplikacji internetowej w porównaniu z sesjami w przeglądarce.

10%

niższy współczynnik odrzuceń w aplikacji PWA w porównaniu z witryną;

12,5%

Wyższa średnia wartość zamówienia w PWA w porównaniu z internetem

55%

wyższy współczynnik konwersji w aplikacji internetowej w porównaniu z witryną;

243%

Wyższe przychody na sesję w aplikacji internetowej w porównaniu z internetem.

Szczegóły techniczne

Firma Mainline Menswear używa ramy Nuxt.js do tworzenia pakietu i renderowania swojej witryny, która jest aplikacją jednostronicową (SPA).

Generowanie pliku usługi

Aby wygenerować usługę workera, Mainline Menswear dodała konfigurację za pomocą niestandardowej implementacji nuxt/pwa modułu Workbox.

Powodem stworzenia odgałęzi modułu nuxt/pwa było umożliwienie zespołowi dodania do pliku service workera większej liczby funkcji dostosowanych do potrzeb, których nie udało się dodać do wersji standardowej lub z którymi zespół miał problemy. Jedna z takich optymalizacji dotyczyła funkcji offline witryny, takich jak wyświetlanie domyślnej strony offline i gromadzenie danych analitycznych w trybie offline.

Anatomia pliku manifestu aplikacji internetowej

Zespół wygenerował plik manifestu z ikonami w różnych rozmiarach i innymi szczegółami aplikacji internetowej, takimi jak name, descriptiontheme_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"
}

Po zainstalowaniu aplikację internetową można uruchomić z poziomu ekranu głównego bez uruchamiania przeglądarki. Aby to zrobić, dodaj parametr display do pliku manifestu aplikacji internetowej:

{
  "display": "standalone"
}

Na koniec warto wspomnieć, że firma może teraz łatwo śledzić, ilu użytkowników odwiedza jej aplikację internetową z ekranu głównego. Wystarczy dodać parametr utm_source w polu start_url w pliku manifestu:

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

Buforowanie w czasie wykonywania w celu szybszego przewijania

Buforowanie w przypadku aplikacji internetowych jest niezbędne do optymalizacji szybkości wczytywania stron i zapewnienia lepszych wrażeń użytkownikom powracającym.

Istnieje kilka różnych podejść do pamięci podręcznej w internecie. Do buforowania zasobów po stronie klienta zespół używa mieszanki pamięci podręcznej HTTP i interfejsu Cache API.

Interfejs Cache API zapewnia firmie Mainline Menswear większą kontrolę nad zasobami w pamięci podręcznej, co pozwala jej stosować złożone strategie do każdego typu pliku. Chociaż wszystko to brzmi skomplikowanie i trudno do wdrożenia oraz utrzymania, Workbox zapewnia łatwy sposób deklarowania takich złożonych strategii i ułatwia ich utrzymanie.

Buforowanie kodu CSS i JS

W przypadku plików CSS i JS zespół zdecydował się na ich umieszczenie w pamięci podręcznej i serwowanie z pamięci podręcznej za pomocą strategii Workbox StaleWhileRevalidate. Ta strategia pozwala szybko wyświetlać wszystkie pliki CSS i JS Nuxt, co znacznie zwiększa wydajność witryny. Jednocześnie w tle pliki są aktualizowane do najnowszej wersji na potrzeby następnej wizyty:

/* sw.js */
workbox.routing.registerRoute(
  /\/_nuxt\/.*(?:js|css)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'css_js',
  }),
  'GET',
);

Pamięć podręczna czcionek Google

Strategia dotycząca buforowania czcionek Google zależy od 2 typów plików:

  • Arkusz stylów zawierający deklaracje @font-face.
  • pliki czcionek (żądane w ramach wspomnianego powyżej szablonu);
// 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',
);

Zapisywanie obrazów w pamięci podręcznej

W przypadku obrazów Mainline Menswear zdecydowała się na 2 strategie. Pierwsza strategia dotyczy wszystkich obrazów pochodzących z ich sieci CDN, czyli zwykle obrazów produktów. Strony te zawierają dużo obrazów, więc twórcy są świadomi, że nie mogą zajmować zbyt dużo miejsca na urządzeniu użytkownika. Dlatego za pomocą Workbox dodali strategię, która przechowuje w pamięci podręcznej obrazy pochodzące tylko z ich sieci CDN, z maksymalnie 60 obrazów przy użyciu ExpirationPlugin.

61. (najnowsze) zdjęcie zastąpione przez 1. (najstarsze) zdjęcie, aby w każdej chwili w pamięci podręcznej znajdowało się nie więcej niż 60 zdjęć produktów.

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

Druga strategia dotycząca obrazu obsługuje pozostałe obrazy żądane przez źródło. Zdjęć jest zwykle niewiele i są one małe, ale na wszelki wypadek liczba tych obrazów w pamięci podręcznej jest ograniczona do 60.

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

Udostępnianie funkcji offline

Strona offline jest wstępnie buforowana zaraz po zainstalowaniu i aktywowaniu skryptu service worker. Robią to, tworząc listę wszystkich zależności offline: plik HTML offline i ikonę SVG offline.

const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
  { url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
  { url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];

Następnie lista wstępnie z pamięci podręcznej jest przekazywana do Workboxa, który zajmuje się wszystkimi trudnymi zadaniami, takimi jak dodawanie adresów URL do pamięci podręcznej, sprawdzanie, czy nie ma rozbieżności wersji, aktualizowanie i wyświetlanie plików z pamięci podręcznej z użyciem strategii CacheFirst.

workbox.precaching.precacheAndRoute(PRECACHE);

Obsługa nawigacji offline

Gdy skrypt service worker zostanie aktywowany, a strona offline zostanie zarchiwizowana, będzie on służyć do odpowiedzi na żądania użytkownika dotyczące nawigacji offline. Aplikacja internetowa Mainline Menswear jest aplikacją typu SPA, ale strona offline jest wyświetlana tylko po ponownym załadowaniu strony, gdy użytkownik zamknie i ponownie otworzy kartę przeglądarki lub gdy aplikacja internetowa zostanie uruchomiona z ekranu głównego w trybie offline.

Aby to osiągnąć, Mainline Menswear udostępniła stronę offline z domyślną zawartością na wypadek niepowodzenia żądania NavigationRoute:

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

Prezentacja

Przykład strony offline w witrynie www.mainlinemenswear.co.uk.

Raportowanie pomyślnych instalacji

Oprócz śledzenia uruchamiania na ekranie głównym (z użyciem elementu "start_url": "/?utm_source=pwa" w pliku manifestu aplikacji internetowej) aplikacja internetowa zgłasza też pomyślne instalacje aplikacji, nasłuchując zdarzenia appinstalled w układzie window:

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

Dodanie do witryny funkcji PWA jeszcze bardziej ulepszy wrażenia klientów z zakupów w Twojej firmie, a także pozwoli Ci szybciej wprowadzić produkt na rynek niż w przypadku aplikacji [dla konkretnej platformy].

Andy Hoyle, kierownik zespołu rozwoju

Podsumowanie

Więcej informacji o progresywnych aplikacjach internetowych i sposobie ich tworzenia znajdziesz w sekcji dotyczącej progresywnych aplikacji internetowych na stronie web.dev.

Aby przeczytać więcej przykładów dotyczących progresywnych aplikacji internetowych, przejdź do sekcji z przykładami.