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

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

Mainline to sklep internetowy z odzieżą, w którym można kupić odzież od największych projektantów. Brytyjska firma powierza współpracę swojego zespołu wewnętrznych ekspertów, współpracując strategicznie z kluczowymi partnerami, aby zapewnić bezproblemowe zakupy wszystkim klientom. Firma jest obecna na rynku w ponad 100 krajach za pomocą 7 niestandardowych witryn terytorialnych i aplikacji, a firma Mainline będzie w dalszym ciągu dbać o to, aby oferty e-commerce były konkurencyjne.

Wyzwanie

Celem firmy Mainline Menswear było uzupełnienie obecnej wersji mobilnej witryny o progresywne funkcje, które byłyby zgodne z wizją firmy, która powstała z myślą o optymalizacji pod kątem urządzeń mobilnych. Skupiła się na tym, aby jej wygląd i funkcje były dostosowane do urządzeń mobilnych – a to wszystko z myślą o rozwijającym się rynku smartfonów.

Rozwiązanie

Celem było stworzenie i wprowadzenie aplikacji PWA, która będzie uzupełnieniem oryginalnej wersji strony Mainline Menswear, 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 przez niewielką grupę użytkowników Mainline Menswear, mogliśmy określić różnicę w kluczowych statystykach między PWA, aplikacją a witryną.

Podczas konwersji witryny na PWA firma Mainline przyjęła podejście, które polegało na zadbaniu o to, aby platforma wybrana dla witryny (Nuxt.js, wykorzystująca Vue.js) była przyszłościowa i umożliwiła wykorzystanie technologii, która szybko się zmienia.

Wyniki

Szczegółowe informacje techniczne

Mainline Menswear korzysta z platformy Nuxt.js do tworzenia pakietów i renderowania swojej witryny, czyli aplikacji na jednej stronie.

Generowanie pliku skryptu service worker

Do wygenerowania skryptu service worker firma Mainline Menswear dodała konfigurację za pomocą niestandardowej implementacji modułu nuxt/pwa Workbox.

Powodem utworzenia rozwidlenia modułu nuxt/pwa było umożliwienie zespołowi większej liczby dostosowań do pliku skryptu service worker, którego nie mogli napotkać lub z którymi problemami nie mieli korzystać podczas korzystania z wersji standardowej. Jedną z takich optymalizacji było korzystanie z funkcji offline witryny, takich jak wyświetlanie domyślnej strony offline i zbieranie statystyk w trybie offline.

Struktura pliku manifestu aplikacji internetowej

Zespół wygenerował plik manifestu z ikonami aplikacji mobilnych o różnych rozmiarach i innymi szczegółami aplikacji internetowych, np. name, description i 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"
}

Zainstalowaną aplikację internetową można uruchomić z poziomu ekranu głównego – przeglądarka nie ma w tym nic robić. Aby to zrobić, dodaj parametr display do pliku manifestu aplikacji internetowej:

{
  "display": "standalone"
}

Co ważne, firma może teraz łatwo śledzić, ilu użytkowników odwiedza jej aplikację z poziomu ekranu głównego, dodając po prostu parametr utm_source w polu start_url pliku manifestu:

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

Buforowanie środowiska wykonawczego przyspieszające nawigację

Zapisywanie w pamięci podręcznej aplikacji internetowych jest niezbędne do optymalizacji szybkości strony i zapewnienia wygody powracającym użytkownikom.

Jeśli chodzi o buforowanie w internecie, można skorzystać z kilku różnych metod. Zespół korzysta z pamięci podręcznej HTTP i interfejsu Cache API do buforowania zasobów po stronie klienta.

Interfejs Cache API zapewnia Mainline Menswear dokładniejszą kontrolę nad zasobami przechowywanymi w pamięci podręcznej, dzięki czemu może stosować złożone strategie do każdego typu plików. Choć wydaje się to skomplikowane i trudne w konfiguracji i obsłudze, Workbox zapewnia prosty sposób deklarowania tak skomplikowanych strategii i ułatwia obsługę.

Buforowanie plików CSS i JS

W przypadku plików CSS i JS zespół zdecydował się przechowywać je w pamięci podręcznej i wyświetlać w pamięci podręcznej zgodnie ze strategią pola obszaru roboczego StaleWhileRevalidate. Ta strategia pozwala szybko wyświetlać wszystkie pliki CSS i JS Nuxt, co znacznie zwiększa wydajność witryny. Jednocześnie pliki są aktualizowane w tle do najnowszej wersji, aby było możliwe podczas następnej wizyty:

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

Buforowanie czcionek Google

Strategia buforowania Google Fonts zależy od 2 typów plików:

• Arkusz stylów zawierający deklaracje @font-face.
• Podstawowe pliki czcionek (wymagane w wymienionym powyżej arkuszu stylów).

// 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',
);

Buforowanie obrazów

Jeśli chodzi o zdjęcia, marka Mainline Menswear postawiła na 2 strategie. Pierwsza strategia dotyczy wszystkich obrazów pochodzących z sieci CDN, która zwykle jest zdjęciami produktu. Zawierają dużo obrazów, aby nie zajmowały zbyt dużo miejsca na urządzeniu. Firma Workbox dodała więc strategię, która buforuje obrazy pochodzące tylko z ich sieci CDN z maksymalnie 60 obrazami za pomocą ExpirationPlugin.

61 (najnowszy) żądany obraz zastępuje pierwsze (najstarsze) zdjęcie, dzięki czemu w pamięci podręcznej nie może być w żadnym momencie w pamięci podręcznej więcej niż 60 obrazów 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 obrazów obsługuje pozostałe obrazy żądane przez źródło. Takich obrazów w całym źródle jest bardzo mało i mało, ale ze względów bezpieczeństwa liczba tych obrazów w pamięci podręcznej też 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ępniamy funkcje offline

Strona offline jest zapisywana w pamięci podręcznej zaraz po zainstalowaniu i aktywowaniu skryptu service worker. Aby to zrobić, tworzą 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' },
];

Lista z pamięci podręcznej jest następnie wprowadzana do Workbox, który zajmuje się najtrudniejszymi zadaniami związanymi z dodawaniem adresów URL do pamięci podręcznej, sprawdzaniem ewentualnych niezgodności wersji, aktualizowaniem i wyświetlaniem wstępnie zapisanych plików za pomocą strategii CacheFirst.

workbox.precaching.precacheAndRoute(PRECACHE);

Obsługa nawigacji offline

Po aktywowaniu skryptu service worker i umieszczeniu strony offline w pamięci podręcznej jest on używany do odpowiadania na żądania użytkownika dotyczące nawigacji w trybie offline. Choć aplikacja internetowa Mainline Menswear to aplikacja SPA, strona offline wyświetla się dopiero po ponownym załadowaniu strony, zamknięciu i ponownym otwarciu karty przeglądarki lub po uruchomieniu aplikacji z ekranu głównego w trybie offline.

Aby to osiągnąć, strona Mainline Menswear udostępniła awaryjne żądania NavigationRoute z pamięci podręcznej strony offline:

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

Pokaz

Raportowanie udanych instalacji

Oprócz śledzenia uruchamiania na ekranie głównym (z parametrem "start_url": "/?utm_source=pwa" w manifeście aplikacji internetowej) aplikacja internetowa rejestruje również udane instalacje aplikacji, nasłuchując zdarzenia appinstalled z window:

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

Dodanie do witryny funkcji PWA zwiększy wygodę klientów korzystających z Twoich zakupów, a przy tym szybciej wprowadza je na rynek niż aplikacje [platform-specific].

Andy Hoyle, dyrektor ds. rozwoju

Podsumowanie

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

Więcej studiów przypadków dotyczących progresywnych aplikacji internetowych znajdziesz w sekcji studiów przypadków.