Компания 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. Эта стратегия позволяет им быстро обслуживать все файлы Nuxt CSS и JS, что значительно повышает производительность их сайта. При этом файлы в фоновом режиме обновляются до последней версии для следующего посещения:

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

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

Как только сервис-воркер активируется и автономная страница предварительно кэшируется, она затем используется для ответа на запросы автономной навигации пользователя . Хотя веб-приложение 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.

Чтобы прочитать больше примеров использования прогрессивных веб-приложений, перейдите в раздел примеров внедрения .