Magento PWA - мощное решение для улучшения UX вашего магазина Magento

Разработка Nov 05, 2019

Magento PWA - мощное решение для улучшения UX вашего магазина Magento

Главная / Блог / Magento PWA - мощное решение для улучшения UX вашего магазина Magento

Прогрессивные веб-приложения (PWA) - довольно молодая концепция, представленная в 2015 году командой Google. Они превращают обычный веб-сайт в приложение, которое полностью функционирует прямо из мобильного браузера. Однако при запуске такого решения через браузер настольного компьютера все работает как обычный веб-сайт. В настоящее время решения PWA поддерживаются всеми распространенными браузерами, такими как Google Chrome, Firefox, Opera и Microsoft Edge.

pwa magento development

Источник изображения: Rishabh Soft

Первоначальная реализация PWA была представлена публике в мае 2016 года командой разработчиков, ответственных за Washington Post - ранее обычный веб-сайт и полноценное гибридное программное обеспечение PWA в настоящее время. Но давайте углубимся в подробное определение прогрессивного веб-приложения, рассмотрим список основных функций веб-приложений и обсудим нюансы создания таких решений на основе ресурсов на основе Magento.

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

Определение PWA

Итак, PWA (Progressive Web App) - прогрессивное веб-приложение - что это такое? Это в первую очередь веб-ресурс, который относится к трем основным характеристикам, впервые представленным Google: надежный, быстрый и привлекательный. Это достигается с помощью современных веб-технологий и инструментов, таких как Service Worker, манифест веб-приложения, HTTPS, оболочка приложения, push-уведомления и другие.

Усовершенствованный технологический подход предоставляет пользователям:

С точки зрения функциональности, первоначальный запуск PWA основан на сценарии Service Worker. В то же время происходит кэширование. И только после этого данные View начинают загружаться в соответствии с любым другим запросом пользователя или другим событием. После каждого события Service Worker переходит в режим ожидания, пока не будет выполнен другой запрос пользователя.

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

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

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

Как PWA работает?

Прежде всего, пользователь запускает ваш сайт, в идеале, со своего смартфона. Далее сайт отображается в виде функционального приложения. Пользователи могут добавить ярлык на этот сайт, чтобы персонализировать свой UX в дополнение к более быстрому доступу к процедурам электронной коммерции, автономным функциям, push-уведомлениям, немедленной загрузке страницы и т. д.

Известные случаи PWA

Наиболее известные реализации PWA включают таких гигантов, как:

Можно ли превратить любой сайт в PWA?

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

Если мы говорим о преобразовании сайтов на платформе Magento в PWA, то дополнительно вы должны убедиться, что используете версию платформы 2.0 или выше.

Функции прогрессивного веб-приложения и функции собственного программного обеспечения

pwa development

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

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

Плюсы и минусы PWA

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

Pros

Минусы:

Нужен ли всем PWA?

Для полной объективности отметим, что может быть разумным сосредоточиться на PWA для 9 из 10 пользователей Magento 2. С точки зрения этой структуры, в настоящее время PWA все еще является экспериментальной концепцией. Таким образом, если вы возьмете решение Magento 2 и начнете адаптировать его к стандартам PWA, вы не сможете выбирать из полного ассортимента выделенных модулей в Magento Store. Просто потому, что большинство из них имеют логику кода, основанную на статической визуализации страницы. И пока нет полностью PWA-совместимых модулей для Magento 2.

Как интегрировать PWA с вашим магазином на Magento?

Если вы по-прежнему выбираете PWA и преобразуете свое существующее решение на основе Magento в прогрессивное веб-приложение, вот основные методы, которые обычно используются.

Интеграция через расширение Magento PWA

Самое простое, что можно сделать, - это просто установить расширение Progressive Web App на своем веб-сайте Magento. В официальном магазине Magento вы можете найти множество расширений от различных поставщиков, как бесплатных, так и платных (платные обычно стоят не более 150 долларов США).

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

Интеграция через Magento PWA Studio

PWA Studio - это инструмент, доступный для Magento 2.3. Это помогает развертывать решения PWA на основе Magento не более, чем за несколько дней. Более того, в отличие от обычных расширений, в Studio вы найдете целый набор возможностей для реализации функций, обеспечивающих соответствие политикам Googles PWA. В конечном итоге ваш магазин будет подключен к бэкэнду PWA через API.

Интеграция через Magento 2 PWA Theme

Вы также можете использовать комплексное решение - Magento PWA Theme - которое основано на таких известных программных продуктах, как PWA Studio, ReactJS и GraphQL. Таким образом, помимо функций корреспонденции PWA, вы получите доступ к API, который обеспечит подключение вашего основного магазина Magento с обновленными возможностями PWA.

По сути, это считается самым ванильным, то есть обычным способом создания PWA на основе Magento - вам не нужно будет привлекать какие-либо дополнительные сторонние программные продукты.

Однако некоторые разработчики отмечают, что в целом PWA Studio для Magento может быть значительно лучше оптимизирована. Мы рекомендуем использовать альтернативное платное решение, созданное несколько лет назад - Vue Storefront. Исходя из практики, он гораздо более востребован разработчиками и, кстати, совместим со старыми версиями Magento, а не только со второй.

Поэтому, если вы чувствуете строгую необходимость превратить ваш ресурс на основе Magento в PWA, вам лучше выбрать стороннее или другое решение.

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

magento pwa review

Источник изображения: React etc

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

Тем не менее, когда дело доходит до практики, некоторые особенности платформы Magento могут несколько усложнить правильную реализацию PWA. Более того, это может быть чрезмерным усилием, потому что все функции UX, которыми может похвастаться PWA, могут быть просто реализованы с помощью существующих инструментов Magento.

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

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

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

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