Разработка мобильного приложения (PWA) для интернет-магазина на OpenCart

Не сомневайтесь по поводу необходимости высокой скорости загрузки интернет-магазина на мобильных. Тысячи исследований доказывают, что скорость страниц и продажи связаны напрямую. Если вы спрашиваете себя, зачем мне платить деньги, для чего мне нужен быстрый интернет-магазин?

 – Ответ один: “Только для продаж, для ваших высоких продаж”, поскольку:

1. Если у вас быстрый интернет-магазин, уже с мая 2021 г. его скорость по достоинству оценит Google, который вот в этой справке объявил, что скорость по CORE WEB VITALS теперь будет фактором ранжирования в поисковой выдаче.
   
2. Если у вас будет классный быстрый интернет-магазин, значит он будет УДОБНЫМ вашим Покупателям, не заставит их нервничать и долго ждать загрузки страниц, товаров, фото и т.д.
   
3. А поскольку ваш быстрый интернет-магазин понравится посетителям в использовании, им будет приятно быстро и удобно получать информацию на своих мобильных устройствах, они будут покупать у вас чаще, чем на среднестатистическом медленном сайте-конкурента. Выражаясь профессиональной терминологией – у вашего интернет-магазина будет выше процент конверсии из пользователей в Покупатели (это при всех прочих равных условиях, к которым относятся: качественное представление товара (описание, изображения, видео, цена товара), условия доставки, выбор и ассортимент, вежливые менеджеры, условия гарантии и возврата, наличие акций и т.д.).

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

1. Быстрые интернет-магазины будет "уважать" и хорошо ранжировать Google, а это огромные плюсы и экономия на рекламных бюджетах в платной рекламе.
2. Его будут любить Покупатели, которые охотнее будут осуществлять покупки, тем самым вы, как грамотный маркетолог, увеличите показатель возврата инвестиций в рекламу и в развитие онлайн-вектора вашего бизнеса. При равных затратах вы получите больше продаж, чем конкуренты с медленными сайтами, исследования вот тут:

• https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm
• https://www.propellernet.co.uk/the-impact-of-speed-on-ecommerce/
• https://www.abtasty.com/blog/page-speed-conversions/.

После детального анализа руководств и справок для веб-мастеров от Google и Яндекс у нас сформировалось 4 актуальных решения, которые направлены на улучшение скорости загрузки мобильной версии сайта (самый важный фактор для поисковиков при расстановке сайтов в своих бесплатных выдачах).

1. Улучшить показатели Core Web Vitals (по тестам Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/?hl=ru).
2. Разработать прогрессивное мобильное приложение – PWA (о нём, собственно поговорим ниже)
3. Создать ускоренные мобильные страницы – AMP (Accelerated Mobile Pages).
4. Разработать Турбо-страницы (актуально для проектов, ориентированных на продвижение в Яндекс)

Все технологии – это прямые рекомендации Google и Яндекса, они призывают веб-мастеров делать качественные, быстрые сайты, мотивируя высокими позициями в своих бесплатных выдачах. 

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

Мы писали ещё 3-4 года тому, что именно качество мобильной версии сегодня влияет на позиции Вашего магазина в т.ч. и в десктопной выдаче поисковиков (тут: https://neoseo.com.ua/google-mobile-index и тут https://neoseo.com.ua/skorost-stranits-internet-magazina

Ещё раз напомним, что именно СКОРОСТЬ загрузки страниц мобильной версии сейчас является КЛЮЧЕВЫМ фактором в ранжировании сайтов поисковиками Google и Яндекс. Именно скорость загрузки страниц они считают самым важным для пользователей, и именно быстрые сайты они выдают первыми на своих страницах бесплатной поисковой выдачи.

Источники: https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for

https://support.google.com/webmasters/answer/9205520

Как работает прогрессивное мобильное приложение (PWA) можно посмотреть на тут: https://demo.neoseo.com.ua, https://musician.ua, https://karelianheritage.com/. 

Google постоянно изменяет алгоритмы и свои требования к мобильным версиям сайтов (после изменений летом 2020 г. все сайты заново “просели” по показателям Google PageSpeed Insight, и все сайты получили вновь низкие баллы и ошибки, которые очень сложно устранить, не говоря уже о том, чтобы довести показатели тестов до “зелёной зоны”, т.е. 90+ баллов.

Мы установили PWA на https://demo.neoseo.com.ua, заходите туда и всё покликайте самостоятельно.

Узнайте в нашем видео на Youtube-канале, как работает PWA: https://www.youtube.com/watch?v=bTp6qWyoYYg 

 

Термин PWA (Progressive Web App) или прогрессивное веб приложение — это в буквальном переводе “прогрессивное мобильное приложение” для вашего интернет-магазина, следующий этап развития сайта для ваших пользователей.

После входа на сайт система предложит пользователю установить его во всплывающем окне или из меню браузера вручную.

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

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

Чем PWA отличаются от нативных приложений?

Нативное приложение — это автономная программа, которая находится на смартфоне. Для ее разработки Вам необходимо нанимать специалистов, которые по сути будут создавать весь сайт с нуля в приложении. Также Вам необходимо будет регистрировать его в маркете и отправлять после этого пользователей для скачивания данного приложения в маркет приложений. Также необходимо будет следить за актуальностью приложения, что добавит много неудобств для администрирования и поддержки всех версий сайта.

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

Адаптивность.

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

Возможность автономной работы и push-уведомлений.

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

Зачем Вам нужно прогрессивное веб-приложение?

PWA помогают решить такие проблемы как скорость интернета, медленную загрузку веб-сайта и взаимодействие с пользователем.

Основные бонусы, которые вы получите используя PWA:

• Продвижение. Т.к. в поисковых алгоритмах учитывается скорость получения первого экрана пользователями, то с помощью PWA вы максимально сократите это время для мобильных пользователей и повысите этот показатель для различных поисковых систем. Поскольку 80% всех пользователей мобильных устройств на Android использует Google Chrome, все данные по скорости загрузки определённых страниц конечно же передаются в “центр”, данные анализируются мобильным ботом и естественно, что быстрые сайты получают лучшие позиции от Google в его бесплатной поисковой мобильной выдаче. Ну а то, что именно качество мобильной версии и результаты оценки мобильного бота прямо влияют и на десктопную выдачу, уже и вспоминать не будем, ещё 4 года назад рассказывали в статье про “Mobile first” https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for
• Скорость работы интернет-магазина. После загрузки приложения пользователем кэшируются ресурсы Вашего сайта и когда он начинает с ним взаимодействовать, всё происходит очень быстро, т.к. не нужно постоянно загружать уже посещенные страницы, скрипты, стили и отрисовывать повторяющийся контент, всё загрузится при первом использовании интернет-магазина, а далее, будут подгружаться только изменения.
• Удобство. Установка приложения позволит попасть на Ваш сайт прямо с главного экрана смартфона, т.к. при установке приложения там сразу создается иконка.
• Автономность. С помощью сервисных “воркеров” можно нарисовать картинку на экране пользователя, даже если сеть вышла из строя и в зависимости от настроек кэширования, можно передавать закэшированную версию сайта при потере связи, чтобы клиент мог ознакомиться с уже просмотренными товарами.
• Взаимодействие и вовлечение. Приложение позволяет отправлять push-уведомления прямо на устройство всем Вашим пользователям. Пользователь не пропустит Ваши рассылки: новости, акции, специальные предложения, т.к. он сможет получить уведомление как от обычного приложения телефона.
• Покрытие пользователей. PWA может быть установлено у 93% пользователей, как на телефонах, так и на ПК.
• Безопасность. PWA работает по протоколу https — вся информация, которая передается, идет в зашифрованном виде.
• Поддержка и обновления. В отличии от нативных приложений нет необходимости постоянно вести много версий приложения под разные платформы, что значительно снижает затраты на содержание вашего магазина. Если выйдет более новая версия вашего магазина, пользователи получат мгновенный доступ к ней, просто посетив Ваш веб-сайт.
• Повышение процента конверсии пользователей в Покупателей. Важный плюс для бизнеса, что приложение приносит гораздо больше конверсии по сравнению с мобильной версией сайта. По заявлению Google, перед специалистами Lancôme стояла задача создать быстро загружаемый, мощный мобильный инструмент, который можно будет быстро найти и просто использовать. В результате в 2016 году у компании появилось веб-приложение. И что же в итоге? Результаты говорят сами за себя: на 84% снизилось время загрузки, на 17% увеличилась конверсия, на 53% увеличилось количество мобильных сеансов на iOS,18% push-уведомлений открываются пользователями, 8% потребителей, которые открыли push-уведомление, совершали покупку. Пример компании Lancôme стал показательным для всех, кто ещё сомневался.

Как получить все эти преимущества?

Вам необходимо просто заказать разработку PWA для вашего интернет-магазина на OpenCart. Для заказа услуги “под ключ” пишите нам в Telegram-чат.

После реализации вы получите:

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

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

Как всегда, с заботой о развитии вашего онлайн-бизнеса,

Команда НЕОСЕО.

 

Часто задаваемые вопросы (ЧЗВ) о мобильном приложении PWA для OpenCart

1. Можно PWA зарегистрировать в “Apple Store” и “Play Market” и сколько будет стоить?

• Да, но, возможно, потребуется проводить дополнительные работы по вёрстке вашего интернет-магазина, детальную оценку предоставим по запросу.

2. Если дизайн индивидуальный, не будет проблем с PWA?

• Проблем не будет если дизайн нормально адаптирован под мобильные устройства.

3. Если редактировать дизайн – нормально будет адаптироваться для PWA?

• При редактировании дизайна надо учитывать верстку для мобильных устройств. Если правки нормально отображаются на мобильных устройствах то и в PWA не будет проблем

4. Приложение PWA покупателю нужно скачивать?

• Скачивать не нужно, выполняется установка как расширение к браузеру, через который производится установка приложения. Установка происходит мгновенно, за всеми файлами кэша следит браузер, через который приложение установлено.

5. На маркете Гугл будет приложение автоматом и его можно будет скачать?

• На маркетах приложений нет необходимости ничего размещать / регистрировать

6. Это отдельное приложение со своей БД,? или это не надо никак обслуживать, информация берется с сайта?

• Это приложение тесно связано с сайтом, все изменения на сайте сразу отображаются в приложении

7. Как работает PWA с Mozilla?

• Mozilla отказалась от поддержки PWA в обновлении Firefox 85.

8. Как настраивается кеш в приложении? если поменялась информация, как быть в этом случае?

• Кэширование происходит автоматически. Если на сайте делаются изменения то кеш автоматически обновится на устройствах клиентов как только они войдут в приложение.

9. Как это заливать на маркет андройд и апл? обычный клиент не будет скачивать ничего с браузера гугла, он этого не поймет

• В браузере будет уведомление о доступности приложения, покупатель просто нажимает на это уведомление и подтверждает установку приложения на домашний экран.

10. Какие плюсы дает это приложение для десктопа?

• Для десктопа такие-же плюсы как и для мобильных устройств. Поддержка кэширования + пуш уведомления в панель уведомления ПК.

11. Как покупатель узнает, что ему надо на плюсик или стрелочку перейти?

• При входе на сайт покупателю будет показано уведомление о возможности установить приложение.

12. Будет работать на Маках и Айфонах?

• Да. Работает на всех системах

13. Как работает корзина в приложении?

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

14. Как будет происходить загрузка (скачивание) приложения на телефон? Если через обычное приложение из app store мы подтверждаем загрузку приложения паролем от Apple ID то как тут будет?

• В браузере будет уведомление о доступности приложения, покупатель просто нажимает на это уведомление и подтверждает установку приложения на домашний экран.

15. Возможно ли управлять дизайном? То есть, адаптация моб версии сайта может произойти не так как нужно в приложении, сможем ли мы кнопки или текста и другое переставить так как нужно будет нам. Если сможем то как? Это будет отдельная оплата за доработку или как?

• При редактировании дизайна надо учитывать верстку для мобильных устройств. Если правки нормально отображаются на мобильных устройствах то и в PWA не будет проблем. Дизайн будет повторять мобильную версию сайта.

16. Дублирует ли информацию по контенту приложение с сайта? То есть у нас под регион свой контент, все ли будет идентично как на сайте?

Приложение будет повторять контент, который отображается на сайте.

17. Смогу ли я видеть аналитику по приложению? Сколько скачали? Сколько удалили? Сколько времени в приложении провели, конверсию в заказ? Или оно будет моб версию и приложение считать в одно?

• Аналитика приложения и мобильная версия будет считать как одинаковые посетители. Для расширенного трекинга необходимо будет подключить платную аналитику на сервисе firebase , а также доработать приложение PWA дополнительно.

18. Как я буду управлять приложением? Пуш уведомления и тд? Есть ли какой то кабинет? Нам нужно будет СНГ аудитории одни уведомления делать, другим странам другое.

• Отправка пушей предусмотрена для всех пользователей из админ.части сайта.
• Разделять аудиторию можно будет только если отдельно проплатить на сервере firebase тариф для аналитики и делать рассылку из сайта firebase , также потребуется дополнительная доработка приложения на сайте.

19. Есть ли пример реальный, кто это уже юзает, чтобы как потребитель посмотреть как оно работает ?

• Как работает приложение можно посмотреть на https://demo.neoseo.com.ua, https://musician.ua, https://karelianheritage.com/ .