Розробка мобільного додатку (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 (тест https://developers.google.com/speed/pagespeed/insights/?hl=ru).
2. Розробити прогресивний мобільний додаток – PWA, мова піде нижче.
3. Створити прискорені мобільні сторінки – AMP (Accelerated Mobile Pages).
4. Турбо-сторінки (актуально для проектів, орієнтованих на Яндекс).

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

Детально ознайомитися можна тут:

1. https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for
2. https://support.google.com/webmasters/answer/9205520
3. https://developers.google.com/web/ilt/pwa/challenge-convert-an-e-commerce-site-to-a-pwa

Ми створили PWA і протестували все на своїй демо-версії, подивіться, як воно виглядає і як працює у відео:

Термін PWA (Progressive Web App) або прогресивний веб-додаток — це в буквальному перекладі "прогресивний мобільний додаток" для вашого інтернет-магазину, наступний етап розвитку сайту для ваших користувачів.

В першу чергу це альтернатива нативних (тих, які ви зазвичай завантажуєте в Google Play і AppStore) додатків для мобільних пристроїв. Вашим покупцям більше не доведеться здійснювати додаткових дій, а вам не потрібно розробляти додаток з нуля і проходити всі кола пекла, щоб потрапити в маркет додатків. PWA буде доступний для завантаження вже з другого входу на сайт –  система сама запропонує користувачеві встановити його у спливаючому вікні або з меню браузера вручну.

Як це виглядає і працює на практиці подивіться на додатоку, який ми встановили на https://demo.neoseo.com.ua, скоро покажемо приклади і на інших сайтах.

Прогресивні веб-додатки підтримуються в браузерах встановлених у 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 — вся інформація, яка передається, йде в зашифрованому вигляді.
• Підтримка та оновлення. На відміну від нативних додатків немає необхідності постійно вести багато версій програми під різні платформи, що значно знижує витрати на утримання вашого магазину. Якщо вийде нова версія вашого магазину, користувачі миттєво отримають доступ до неї, просто відвідавши Ваш веб-сайт.

Як отримати всі ці переваги?

Вам необхідно просто замовити розробку PWA для вашого інтернет-магазину.

Після реалізації ви отримаєте:

• Додаток PWA, розроблений з урахуванням особливостей вашого сайту і високими стандартами нашої компанії, а також довічне оновлення продукту.
• Встановлення та налаштування PWA у вас на сайті.
• Проведення необхідних дій на сторонньому сервісі для відсилання push-повідомлень, а також налаштування прямо з адмінки вашого сайту
• Інформаційний супровід з питань PWA в перший місяць роботи.

Як завжди, з турботою про розвиток Вашого онлайн-бізнесу,

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

 

Часті питання (ЧЗВ) про мобільному додатку PWA для OpenCart

1. Можна PWA зареєструвати в "аппл стор" і "плей маркет" і скільки буде коштувати?

• Ні, зареєструвати PWA додаток в магазинах додатків не тільки можна, але й немає необхідності. Додаток встановлюється безпосередньо через браузер з Вашого сайту. Немає необхідності його реєструвати

1. Якщо індивідуальний дизайн, не буде проблем з PWA?

• Проблем не буде, якщо дизайн нормально адаптований під мобільні пристрої.

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

• При редагуванні дизайну треба враховувати верстку для мобільних пристроїв. Якщо правки нормально відображаються на мобільних пристроях то і в PWA не буде проблем

1. Додаток PWA покупцеві потрібно скачувати?

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

1. На маркеті Гугл буде додаток автоматом і його можна буде скачати?

• На маркетах додатків немає необхідності нічого розміщувати / реєструвати

1. Це окремий додаток зі своєї БД? або це не треба ніяк обслуговувати, інформація береться з сайту?

• Це додаток тісно пов'язане з сайтом, всі зміни на сайті відразу відображаються в додатку

1. Як налаштовується кеш в додатку? якщо змінилася інформація, як бути в цьому випадку?

• Кешування відбувається автоматично. Якщо на сайті робляться зміни то кеш автоматично оновиться на пристроях клієнтів як тільки вони увійдуть у програму.

1. Як це заливати на маркет андройд і апл? звичайний клієнт не буде скачувати нічого з браузера гугла, він цього не зрозуміє

• У браузері повідомлення про наявність додатка, покупець просто натискає на це повідомлення і підтверджує установку програми на домашній екран.

1. Які плюси дає це додаток для десктопа?

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

1. Як покупець дізнається, що йому треба на плюсик або стрілочку перейти?

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

1. Буде працювати на Маках і Айфонах?

• Так. Працює на всіх системах

1. Як працює кошик в додатку?

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

13. Як буде відбуватися завантаження (завантаження) програми на телефон? Якщо через звичайний додаток з app store ми підтверджуємо завантаження програми паролем від Apple ID то як тут буде?

• У браузері повідомлення про наявність додатка, покупець просто натискає на це повідомлення і підтверджує установку програми на домашній екран.

 

14. Можливо управляти дизайном? Тобто, адаптація моб версії сайту може відбутися не так як потрібно в додатку, чи зможемо ми кнопки або тексту й інше переставити так як потрібно буде нам. Якщо зможемо, то як? Це буде окрема оплата за доопрацювання чи як?

• При редагуванні дизайну треба враховувати верстку для мобільних пристроїв. Якщо правки нормально відображаються на мобільних пристроях то і в PWA не буде проблем. Дизайн буде повторювати мобільну версію сайту.

 

15. Дублює інформацію по контенту додаток з сайту? Тобто у нас під свій регіон контент, все буде ідентично як на сайті?

Додаток буде повторювати контент, що відображається на сайті.

 

16. Чи можу я бачити аналітику з додатком? Скільки скачали? Скільки видалили? Скільки часу в додатку провели, конверсію в замовлення? Або воно буде моб версію і додаток вважати в одне?

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

 

17. Як я буду керувати додатком? Пуш повідомлення і тд? Чи є якийсь кабінет? Нам потрібно буде СНД аудиторії одні попередження робити іншим країнам інше.

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

18. Є приклад реальний, хто це вже юзає, щоб споживач подивитися як воно працює ?

• Додаток підключено на https://demo.neoseo.com.ua