Компания Mainline Menswear внедрила PWA и добилась повышения коэффициента конверсии на 55 %.

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

Mainline — это интернет-магазин одежды, предлагающий самые крупные дизайнерские бренды в мире моды. Компания, базирующаяся в Великобритании, доверяет своей команде внутренних экспертов, стратегически объединенных с ключевыми партнерами, чтобы обеспечить беспроблемный опыт покупок для всех. Присутствуя на рынке в более чем 100 странах через семь специально разработанных территориальных веб-сайтов и приложение, Mainline продолжит обеспечивать конкуренцию в предложении электронной коммерции.

Испытание

Целью компании Mainline Menswear было дополнить текущий оптимизированный для мобильных устройств веб-сайт прогрессивными функциями, которые соответствовали бы ее видению «мобильные устройства прежде всего», уделяя особое внимание дизайну и функциональности, удобным для мобильных устройств, с учетом растущего рынка смартфонов.

Решение

Целью было создание и запуск PWA, дополняющего оригинальную мобильную версию сайта Mainline Menswear, а затем сравнение статистики с их гибридным мобильным приложением, которое в настоящее время доступно на Android и iOS.

После запуска приложения и начала его использования небольшой группой пользователей Mainline Menswear они смогли определить разницу в ключевых показателях между PWA, приложением и веб-версией.

Подход, который компания Mainline использовала при преобразовании своего веб-сайта в PWA, заключался в том, чтобы убедиться, что выбранный ими для веб-сайта фреймворк (Nuxt.js, использующий Vue.js) будет соответствовать требованиям завтрашнего дня и позволит им воспользоваться преимуществами быстро развивающихся веб-технологий.

Результаты

Техническое глубокое погружение

Mainline Menswear использует фреймворк Nuxt.js для сборки и визуализации своего сайта, представляющего собой одностраничное приложение (SPA).

Создание файла сервисного работника

Для создания сервисного работника компания Mainline Menswear добавила конфигурацию посредством пользовательской реализации модуля nuxt/pwa Workbox .

Причина, по которой они разветвили модуль nuxt/pwa заключалась в том, чтобы позволить команде добавлять больше настроек в файл service worker, которые они не могли или с которыми у них были проблемы при использовании стандартной версии. Одна из таких оптимизаций касалась автономной функциональности сайта, например, обслуживания автономной страницы по умолчанию и сбора аналитики в автономном режиме.

Анатомия манифеста веб-приложения

Команда создала манифест с иконками для различных размеров иконок мобильных приложений и другими данными веб-приложения, такими как name , description и 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"
}

Веб-приложение после установки можно запустить с домашнего экрана, не мешая браузеру. Это достигается путем добавления параметра display в файл манифеста веб-приложения:

{
  "display": "standalone"
}

И последнее, но не менее важное: теперь компания может легко отслеживать, сколько пользователей посещают ее веб-приложение с главного экрана, просто добавив параметр utm_source в поле start_url манифеста:

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

Кэширование во время выполнения для более быстрой навигации

Кэширование веб-приложений необходимо для оптимизации скорости загрузки страниц и обеспечения лучшего пользовательского опыта для постоянных пользователей.

Для кэширования в сети существует довольно много различных подходов . Команда использует сочетание HTTP-кеша и Cache API для кэширования активов на стороне клиента.

API Cache дает Mainline Menswear более точный контроль над кэшированными активами, позволяя применять сложные стратегии к каждому типу файлов. Хотя все это звучит сложно и трудно для настройки и обслуживания, Workbox предоставляет им простой способ объявления таких сложных стратегий и облегчает боль обслуживания.

Кэширование CSS и JS

Для файлов CSS и JS команда решила кэшировать их и обслуживать через кэш с помощью стратегии StaleWhileRevalidate Workbox. Эта стратегия позволяет им быстро обслуживать все файлы CSS и JS Nuxt, что значительно повышает производительность их сайта. В то же время файлы обновляются в фоновом режиме до последней версии для следующего посещения:

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

Кэширование шрифтов Google

Стратегия кэширования Google Fonts зависит от двух типов файлов:

• Таблица стилей, содержащая объявления @font-face .
• Базовые файлы шрифтов (запрошенные в таблице стилей, упомянутой выше).

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

Кэширование изображений

Для изображений Mainline Menswear решила использовать две стратегии. Первая стратегия применяется ко всем изображениям, поступающим из их CDN, которые обычно являются изображениями продуктов. Их страницы перегружены изображениями, поэтому они осознают, что не должны занимать слишком много места на устройствах своих пользователей. Поэтому через Workbox они добавили стратегию, которая кэширует изображения, поступающие только из их CDN, с максимумом в 60 изображений, используя ExpirationPlugin .

61-е (самое новое) запрошенное изображение заменяет 1-е (самое старое) изображение, так что в любой момент времени кэшируется не более 60 изображений продукта.

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

Вторая стратегия изображений обрабатывает остальные изображения, запрашиваемые источником. Эти изображения, как правило, очень редки и малы по всему источнику, но для надежности количество этих кэшированных изображений также ограничено 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,
      }),
    ],
  }),
);

Предоставление автономной функциональности

Оффлайн-страница предварительно кэшируется сразу после установки и активации сервис-воркера. Они делают это, создавая список всех оффлайн-зависимостей: оффлайн-файл HTML и оффлайн-значок SVG.

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

Затем список предварительного кэширования передается в Workbox, который берет на себя всю тяжелую работу по добавлению URL-адресов в кэш, проверке несоответствия ревизий, обновлению и обслуживанию предварительно кэшированных файлов с помощью стратегии CacheFirst .

workbox.precaching.precacheAndRoute(PRECACHE);

Обработка офлайн-навигации

После активации service worker и офлайн-страницы, предварительно кэшированной, она затем используется для ответа на офлайн-запросы навигации пользователя . Хотя веб-приложение Mainline Menswear представляет собой SPA, офлайн-страница отображается только после перезагрузки страницы, закрытия и повторного открытия пользователем вкладки браузера или при запуске веб-приложения с домашнего экрана в офлайн-режиме.

Чтобы добиться этого, Mainline Menswear предоставила запасной вариант для неудавшихся запросов 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);

Демо

Отчеты об успешных установках

Помимо отслеживания запуска домашнего экрана (с помощью "start_url": "/?utm_source=pwa" в манифесте веб-приложения), веб-приложение также сообщает об успешных установках приложений, прослушивая событие appinstalled в window :

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

Добавление возможностей PWA на ваш сайт еще больше улучшит опыт совершения покупок у вас и ускорит вывод продукта на рынок по сравнению с приложением [для определенной платформы].

Энди Хойл, руководитель отдела развития

Заключение

Чтобы узнать больше о прогрессивных веб-приложениях и о том, как их создавать, перейдите в раздел «Прогрессивные веб-приложения» на сайте web.dev.

Чтобы прочитать больше примеров использования Progressive Web Apps, перейдите в раздел примеров использования .