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

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

Mainline to internetowy sklep z odzieżą, który oferuje produkty znanych projektantów w branży modowej. Brytyjska firma powierzyła swojemu zespołowi wewnętrznych ekspertów, którzy są strategicznie zgrani z kluczowymi partnerami, aby zapewnić wszystkim klientom bezproblemowe zakupy. Mainline jest obecna 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 witryny zoptymalizowanej pod kątem urządzeń mobilnych za pomocą progresywnych funkcji zgodnych z wizją „mobilności”. Skupiliśmy się na designie i funkcjonalności przyjaznych dla urządzeń mobilnych, biorąc pod uwagę rosnący rynek smartfonów.

Rozwiązanie

Celem było stworzenie i wprowadzenie na rynek progresywnej aplikacji internetowej, która uzupełniła oryginalną wersję strony Mainline Menswear, dostosowaną do urządzeń mobilnych, a następnie porównaj statystyki z porównaniem z hybrydową aplikacją mobilną, dostępną obecnie 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 firma Mainline zadbała o to, aby platforma wybranej dla witryny (Nuxt.js z wykorzystaniem Vue.js) była przygotowana na przyszłość i umożliwiła wykorzystanie szybko zmieniającej się technologii internetowej.

Wyniki

Szczegóły techniczne

Mainline Menswear wykorzystuje platformę Nuxt.js do łączenia i renderowania swojej witryny – aplikacji na jednej stronie (SPA).

Generowanie pliku usługi

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

Moduł nuxt/pwa został rozgałęziony, ponieważ zespół mógł dodawać do pliku service worker więcej dostosowań, które nie były dostępne lub z którymi występowały problemy podczas korzystania z wersji standardowej. Jedna z takich optymalizacji dotyczyła funkcji offline witryny, takich jak wyświetlanie domyślnej strony offline i gromadzenie danych analitycznych w trybie offline.

Składnia pliku manifestu aplikacji internetowej

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

Po zainstalowaniu aplikację internetową można uruchamiać 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 szybszej nawigacji

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 buforowania w internecie. Do buforowania zasobów po stronie klienta zespół używa kombinacji 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ż konfiguracja i obsługa klienta wydaje się skomplikowane i trudne w obsłudze, narzędzie Workbox pozwala łatwo zadeklarować, że tak skomplikowane strategie są trudne.

Buforowanie arkuszy 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 umożliwia im szybkie wyświetlanie wszystkich plików CSS i JS Nuxt, co znacznie zwiększa wydajność witryny. Jednocześnie pliki są aktualizowane w tle do najnowszej wersji, która będzie potrzebna do 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 arkuszu stylów wspomnianym powyżej).

// 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

W przypadku obrazów firma Mainline Menswear wybrała 2 strategie. Pierwsza strategia dotyczy wszystkich obrazów pochodzących z ich sieci CDN, czyli zwykle obrazów produktów. Strony zawierają dużo obrazów, więc klienci mają świadomość, że nie zajmują zbyt dużo miejsca na urządzeniach użytkowników. Dlatego w Workbox zespół dodał strategię buforowania obrazów pochodzących wyłącznie z jej sieci CDN z maksymalnie 60 obrazami za pomocą ExpirationPlugin.

61. (najnowsze) zdjęcie zastąpione przez 1. (najstarsze) zdjęcie, dzięki czemu w każdej chwili w pamięci podręcznej nie ma 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' },
];

Lista z zapisanymi wcześniej plikami jest następnie 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 niezgodności w wersji, aktualizowanie i wyświetlanie za pomocą strategii CacheFirst.

workbox.precaching.precacheAndRoute(PRECACHE);

Obsługa nawigacji offline

Gdy skrypt service worker zostanie aktywowany, a strona offline zostanie wstępnie zcacheowana, będzie on służyć do odpowiedzi na żądania użytkownika dotyczące nawigacji offline. Chociaż aplikacja internetowa Mainline Menswear to SPA, strona offline wyświetla się dopiero po ponownym załadowaniu strony, użytkownik zamyka i ponownie otwiera kartę przeglądarki lub gdy aplikacja internetowa uruchamia się z ekranu głównego w trybie offline.

Aby to osiągnąć, Mainline Menswear udostępniła stronę offline z zapasową pamięcią podręczną na wypadek nieudanych żądań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

Raportowanie udanych 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 o tym, jak je tworzyć, 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.