Официальный PWA для Shopware 6 или Как заставить ваших клиентов сказать "Вот это да!" в 2020

Shopware платформа Jun 26, 2020

Официальный PWA для Shopware 6 или Как заставить ваших клиентов сказать "Вот это да!" в 2020

Главная / Блог / Официальный PWA для Shopware 6 или Как заставить ваших клиентов сказать "Вот это да!" в 2020

Граница между веб-сайтами и нативными приложениями размыта для мобильной электронной коммерции. Создание мобильного приложения для вашей компании электронной коммерции с последующим привлечением пользователей для загрузки больше не актуально. Почему? Потому что появились PWA (прогрессивные веб-приложения), в которых сочетаются плюсы веб-сайтов и нативных приложений. Хотя PWA для Magento 2 появились раньше, магазины Shopware уже могут быть успешно превращены в PWA. А с выпуском официального PWA для Shopware 6 это стало намного проще.

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

Количество мобильных клиентов неуклонно растет. На изображении ниже от Statista вы можете видеть, что 25% пользователей часто совершают покупки через мобильные устройства, а 20% делают это почти всегда. Однако, если ваш веб-сайт электронной коммерции не подходит для мобильных устройств, маловероятно, что клиенты будут загружать нативное приложение просто для покупки продукта. Чтобы максимизировать свою прибыль, вам нужна технология, которая обеспечивает удобный пользовательский интерфейс на каждом устройстве.

Доля клиентов, которые покупают через мобильные устройства в Германии в 2019 году
Источник изображения: Shopware

В этой статье мы расскажем, что такое PWA приложения, и расскажем о преимуществах, которые они приносят вашему бизнесу. Кроме того, мы расскажем вам о самой проверенной на рынке платформе PWA для создания внешних интерфейсов - Vue Storefront, которая служит в качестве встроенного в PWA Shopware 6. Таким образом, вы узнаете о преимуществах его интеграции с сайтом Shopware eCommerce.

Определение PWA и зачем его использовать?

Прогрессивное веб-приложение впервые появилось в 2015 году. Короче говоря, это смесь веб-сайтов (или веб-приложений) и мобильных приложений. Они сочетают в себе функции, предоставляемые веб-браузерами, для обеспечения удобства работы с мобильными приложениями.

Так что же такое PWA? У PWA есть все признаки обычного сайта. Их можно открыть в браузере на любом устройстве, имеющем подключение к интернету. Они имеют URL и могут быть найдены в поисковых системах. И вы, вероятно, видели PWA раньше, только вы не знали об этом. Например, знаете ли вы, что Instagram, Tinder или Pinterest теперь PWA?

Разница между PWA и обычными веб-сайтами или веб-приложениями заключается в следующем. Когда вы открываете PWA в мобильном браузере, вы чувствуете, что открыли собственное приложение. Более того, вам даже не нужно загружать приложение, чтобы сделать это! Тем не менее, PWA предложит вам добавить его на домашний экран и, следовательно, установить его в качестве приложения на вашем устройстве. После того, как вы это сделаете, пользовательский интерфейс браузера не будет доступен, чтобы вы могли наслаждаться нативными приложениями.

Instagram предлагает добавить его в качестве мобильного приложения на домашний экран
Источник изображения: Googleusercontent

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

Быстрая производительность

Согласно оценкам скорости страницы Google, 53% пользователей покинут ваш интернет-магазин, если время его загрузки превышает 2 секунды.

Напротив, PWA невероятно быстрые, поэтому, если вы перейдете на них, то можете забыть о любых заботах, связанных со скоростью загрузки страниц. Короче говоря, они используют дополнительный файл JS Service Worker для кэширования данных. Например, Vue Storefront, который является официальным PWA для Shopware 6, о котором мы поговорим далее, достиг скорости загрузки каталога электронного магазина, составив 0,1 секунды.

Небольшой размер приложения

Собственные приложения занимают приличное количество дискового пространства. Они могут весить более 100 мегабайт. И я держу пари, что ни один пользователь не любит загрязнять свое пространство памяти приложениями, которые он редко использует, например, раз в неделю. Почему пользователи часто удаляют приложения так же быстро, как и загружают их? Это потому, что многие из них хотят использовать память устройства для аудио, изображений, видео и другого мультимедийного контента.

У правильно разработанных сайтах вес должен быть небольшим. Если мы не примем во внимание видео и изображения, их размер может быть менее 100 килобайт.

PWA эффективно решают проблему высокого потребления нативных приложений. Они потребляют гораздо меньше места для хранения. Давайте посмотрим на Twitter, который недавно стал PWA.

Размер PWA

Размер Android приложения

Размер iOS приложения

600 KB

23.5 MB

116,5 MB

Это в 39 раз меньше по сравнению с приложением для Android и в 194 раза по сравнению с iOS.

Работа offline

Прогрессивные веб-приложения могут получать доступ к предварительно кэшированным данным независимо от наличия подключения к Интернету или нет. Таким образом, пользователи могут просматривать продукты, а также заказывать их в автономном режиме. Заказанные товары отправляются на сервер после восстановления интернет-соединения. Процесс покупки не будет прерван в случае плохого подключения к Интернету или его отсутствия вообще.

Читайте также: Как выбрать команду по веб разработке: пошаговое руководство

Не требуется установка, обновление или публикация в магазине приложений

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

SEO-friendliness

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

Dinarys является экспертом в области анализа электронной коммерции. Если вам нужна бесплатная консультация по внедрению PWA для вашего бизнеса, напишите нам.

Повышение вовлеченности пользователей

На Google I/O 2017 было сказано, что пользовательская вовлеченность нативных приложений в двадцать раз выше, чем веб-приложений. Приложения PWA имеют следующие преимущества. В частности, вы можете добавить их на домашний экран мобильного устройства и отправлять push-уведомления. Эти возможности заставляют пользователей возвращаться к вашему приложению снова и снова. Кроме того, нажатие на значок приложения происходит быстрее и проще, чем написание URL-адреса веб-сайта. Таким образом, PWA обеспечивает удобство использования и, следовательно, повышает коэффициент конверсии вашего интернет-магазина.

Кросс-браузерность и кросс-совместимость устройств

Прогрессивные веб-приложения отлично работают на каждом используемом вами браузере и устройстве - настольном компьютере, смартфоне, планшете и т. д. Так же, как и родные мобильные приложения, они могут взаимодействовать с внутренними компонентами вашего устройства, например, камера, GPS-датчики и др.

Читайте также: 6 способов оптимизировать процесс оформления заказа

Разработка и сопровождение дешевле

Если вы решите разработать одно приложение для iOS и одно для Android, вам придется потратить примерно в два раза больше времени и сил. Технология PWA, напротив, использует только одну кодовую базу, но работает как на Android, так и на iOS.

Чтобы суммировать различия PWA по сравнению с нативными приложениями, взгляните на изображение ниже:

нативные против прогрессивных приложений
Различия между нативными и прогрессивными веб-приложениями

Прогрессивные примеры веб-приложений и их маркетинговые результаты

Вот некоторые из результатов лучших прогрессивных веб-приложений, созданных известными брендами:

  1. AliExpress

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

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

Как вы можете видеть ниже, AliExpress почти удвоил свои показатели участия. Они приобрели + 104% новых пользователей и улучшили свои показатели конверсии на iOS на 82%. Благодаря улучшенному удобству использования их клиенты также стали просматривать в 2 раза больше страниц за сеанс и тратить на 74% больше времени за сеанс.

Результаты участия пользователей AliExpress после внедрения PWA
Источник изображения: Divante

  1. Forbes

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

С помощью PWA Forbes эффективно достиг вышеупомянутых целей. Время загрузки их сайта составляло от 3 до 12 секунд. Теперь всего 0,8 секунды! Forbes также изменил дизайн своего сайта на новый формат, основанный на макете Snapchat Stories.

Результаты привлечения пользователей Forbes после внедрения PWA
Источник изображения: Divante

Результаты после внедрения PWA не заставили себя долго ждать. Их пользователи стали чаще посещать Forbes и читать больше. Кроме того, реклама стала более видимой. Посмотрите на цифры на картинке ниже.

  1. Twitter

Всемирно известная социальная сеть хотела создать PWA для повторного привлечения пользователей своего веб-сайта на мобильные устройства. Им нужно было реализовать push-уведомления и заставить их работать как в нативных приложениях. Это означает, что пользователи могут получать их, даже когда браузер закрыт.

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

Результаты привлечения пользователей в Twitter после внедрения PWA
Источник изображения: Divante

  1. Lancome

Lancome является производителем и международным дистрибьютором элитной парфюмерии и косметики из Франции. Число их мобильных пользователей неуклонно растет. Однако показатели конверсии на мобильных устройствах были значительно ниже, чем на настольных устройствах. Клиенты Lancome сталкивались с многочисленными неприятностями в процессе мобильных покупок.

Lancome решила превратить свой сайт в PWA, чтобы улучшить показатели конверсии и обеспечить впечатляющий UX. Вот результаты, которых им удалось достичь:

Ланком
Источник изображения: Divante

Что такое Vue Storefront?

Vue Storefront - это прогрессивная платформа PWA с открытым исходным кодом для электронной коммерции. Он предназначен для создания пользовательского интерфейса интернет-магазина и совместим с любым бэкэндом (например, бэкендом Shopware или Magento). Поскольку он приносит все преимущества PWA, он также используется в качестве инструмента для улучшения покупок и привлечения пользователей. Начиная с апреля 2017 года его популярность быстро растет среди владельцев и разработчиков интернет-магазинов. Из-за растущего сообщества разработчиков и кода с открытым исходным кодом Vue Storefront получает тестирование и исправления кода в короткие сроки.

Некоторые цифры по проекту Vue Storefront:

Vue Storefront основан на Headless-архитектуре электронной коммерции. Это означает, что интерфейс и бэкэнд интернет-магазина отделены друг от друга. Vue Storefront обрабатывает интерфейсную часть и поддерживает интеграцию с различной сервисной частью, включая Shopware, Magento, Spree, Episerver, Coreshop и т. д. Преимущество Headless-архитектуры заключается в том, что вы можете в любой момент заменить серверную часть своего магазина. Например, вы можете мигрировать из Magento 1 в Magento 2, и никаких изменений во внешнем интерфейсе не происходит.

Vue Storefront - единственная проверенная на рынке витрина PWA. С его помощью было разработано более 20 проектов PWA для известных брендов. Среди них Tally Weijl, Danone Direct, Philip Stein, Klebefieber, Gasto Hero и другие.

Vue Storefront может значительно повысить важнейшие показатели электронной коммерции. Вот рекордные показатели, достигнутые клиентами с помощью этой платформы PWA:

Зачем использовать Vue Storefront в качестве версии PWA для Shopware 6?

Обновление Shopware 6 было переработано с нуля и получило совершенно новую технологическую базу. Изменения настолько радикальны, что производитель не может предложить инструмент миграции «одним щелчком» для обновления с Shopware 5 до Shopware 6.

Среди основных изменений в технологиях Shopware версии 6 - включение подхода API-first. Это упрощает подключение стороннего программного обеспечения к Shopware, чтобы контролировать и автоматизировать функциональность каждого магазина с помощью различных API. Следовательно, обновление Shopware 6 позволяет подключать разнообразные интерфейсы интернет-магазинов и каналы продаж. И именно поэтому Vue Storefront стал совместимым с Shopware.

Vue Storefront - это встроенная платформа прогрессивного веб-приложения для Shopware 6. Vue Storefront обеспечивает более удобную работу для вас и ваших клиентов по сравнению с другими решениями PWA. Вот некоторые технические подробности, почему лучше использовать веб-сайты Vue Storefront для Shopware 6:

  1. И Vue Storefront, и Shopware используют одну и ту же технологию для своего внешнего интерфейса, а именно Vue.js. Что это нам дает? Уместная аналогия для этого - всегда легче сотрудничать, если вы говорите на одном языке. Так что это касается не только обычного человеческого общения, но и взаимодействия различных программных компонентов. Благодаря этому интеграция между Vue Storefront и Shopware проходит проще и стабильнее.
  2. Каждое изменение, сделанное в магазине, автоматически передается в PWA.
  3. Shopware 6 и Vue Storefront тянутся из одного источника. Допустим, если с вашим магазином возникнут какие-то технические проблемы, это может быть вызвано как на стороне магазина, так и на стороне PWA. Если вы используете внешний PWA, все, что могут сделать разработчики, - это решить проблему на их стороне или направить вас в службу поддержки Shopware. Но если вы используете собственный PWA, разработчики Shopware могут предоставить вам всестороннюю поддержку для устранения проблем, связанных как с их CMS, так и с PWA.
  4. Никакого дополнительного промежуточного программного обеспечения между Shopware и PWA. Другие платформы используют адаптеры для интеграции PWA в качестве промежуточного программного обеспечения для передачи данных между PWA и Shopware CMS.

Промежуточное программное обеспечение не используется для взаимодействия Shopware и Vue Storefront
Источник изображения: Youtube

Однако преимущество встроенной интеграции Shopware с Vue Storefront заключается в том, что не требуются адаптеры промежуточного программного обеспечения. Это приводит к более высокой и стабильной производительности и уменьшению вероятности ошибок программного обеспечения.

Shopware and Vue Storefront
Источник изображения: Youtube​​​

В результате Shopware и Vue Storefront могут общаться напрямую

Итак, почему вы должны рассмотреть реализацию PWA?

PWA - это будущее разработки программного обеспечения. Тот факт, что такие крупные игроки, как Airbnb, Alibaba, Forbes, Twitter перешли на PWA, доказывает его большой потенциал. Каждый бизнес, скорее всего, будет использовать PWA. В настоящее время включение PWA - ваш шанс произвести впечатление на клиентов и выделиться среди конкурентов. Вы хотите быть среди первых новичков в электронной коммерции или отстать?

Конечно, это только ваш выбор, инвестировать в создание PWA или нет. Следовательно, мы можем гарантировать, что преимущества PWA значительно превышают затраты на внедрение этой технологии. В конце концов, вы получаете невероятно быстрое, легкое и безопасное приложение. Кроме того, разработка PWA заменяет необходимость разработки веб-сайта, приложений для iOS и Android.

Единственная проблема заключается в том, что реализация PWA для Shopware 6, Magento или других CMS - сложная задача, требующая большого количества кодирования. Но есть решение! В Dinarys мы имеем большой опыт в разработке сайтов электронной коммерции, включая создание прогрессивных веб-приложений. Clutch, платформа отзывов клиентов, назвала нас лучшим веб-разработчиком в 2019 году. . Если вы хотите разработать PWA, сайт электронной коммерции или изменить его дизайн, не стесняйтесь, напишите нам .

Хотите узнать больше

Получите свежие статьи, новости и тематические исследования в первую очередь на вашу электронную почту

Теперь вы подписаны!