Задача: Разработать мобильное приложение маркетплейса ЭлектроМаркет для Android и IOS.
Клиент: ЭлектроМаркет - оптово-розничная компания по продаже электротоваров, имеет сеть офлайн магазинов в нескольких городах.
Почти каждая крупная компания, продающая какие-либо товары или услуги, рано или поздно решает выпустить свое мобильное приложение. Это не удивительно, поскольку сейчас большинство посетителей сайтов приходит с мобильных устройств. Не исключение и сайт компании «Электромаркет» , который так же был разработан нами.
Функциональность сайта компании «Электромаркет» довольно обширная и, если стараться делать такое же функциональное мобильное приложение, то:
Вполне вероятно, что от части функционала придется отказаться, чтобы как-то сократить время и стоимость разработки а также снизить сложность приложения. Хотя у нас есть опыт разработки нативных мобильных приложений, например приложение системы умного дома «Electrolux Home Comfort», однако, по вышеизложенным причинам, решили от этого варианта отказаться.
Есть альтернативный способ разработки мобильного приложения, с использованием фреймворка React Native. Это позволит исключить разнообразие языков программирования и разрабатывать один проект для всех платформ одновременно, однако стоимость и сроки разработки все еще будут велики. У нас есть решение для интернет-магазина, которое разработано на основе этой технологии - «MSHP» (Mobile Shop), но из-за довольно обширного функционала маркетплейса, сложности доработки и поддержки, мы решили выбрать третий вариант — разработка PWA приложения.
Эта технология появилась не так давно и на сегодняшний день поддержка этого типа приложений имеется как в телефонах под управлением операционной системы Android, так и для телефонов с операционной системой iOS.
Суть этой технологии в том, что сам сайт может стать мобильным приложением при этом не предъявляя каких-либо требований к телефону или программному обеспечению телефона. Чтобы сайт смог так работать потребуются определенные действия с самим сайтом. Для сайта необходимо подготовить «манифест», который является основой для приложения, подготовить изображения иконок во всех необходимых размерах и форматах, которые будут использоваться мобильным телефоном, не забыть про специальный скрипт «ServiceWorker», который добавляет определенные возможности для PWA приложения, такие, как возможность кеширования или отправки PUSH сообщений. В итоге в качестве итогового приложения выступает мобильная версия основного сайта, в которой сохранен весь ее обширный функционал, а какие-то изменения на сайте не требуют дополнительных вмешательств в само приложение, что избавляет от необходимости доработки и выпуска обновлений. Для достижения лучшего эффекта в качестве PWA приложения мы провели дополнительные работы с мобильной версией сайта, чтобы она работала быстрее и выглядела симпатичнее и, если мобильная версия открывается как PWA приложение, чтобы была похожа на классическое мобильное приложение.
Одна из изюминок приложений, сделанных на этой технологии, в том, что для установки приложения вообще можно не привязываться к какому-либо официальному маркетплейсу приложений, например, Google Play или AppStore. Приложение автоматически определяется прямо на сайте и предлагает себя установить и, в случае согласия, оно сразу же установится в мобильный телефон создав необходимые ярлыки для запуска.
Приложение PWA не исключает так же и размещение «по классическому сценарию», то есть создание отдельного приложения и загрузки его во все официальные маркетплейсы. Для этого уже потребуются услуги разработчика мобильных приложений, но сборка такого приложения не занимает много времени.
По итогу получается приложение, которое устанавливается из официального маркетплейса. В отличие от приложения, устанавливаемого сайтом, оно выглядит как самое обычное приложение и визуально его не отличить от приложений, сделанных по другим технологиям. Единственное отличие, которое видно, при первом запуске на некоторых телефонах под управлением операционной системы Android на короткое время показывается уведомление, что приложение работает на базе Chrome.
Отдельное опасение было с публикацией приложения в AppStore, поскольку есть мнения, что AppStore отказывает в публикации PWA приложений, ссылаясь на пункт правил, что приложение не должно дублировать функционал сайта. Однако, наше приложение прошло модерацию без проблем.
Отдельно есть мнение, что «нативные» приложения, разработанные по «классическому сценарию» работают плавнее, лучше и стабильнее приложений, разработанных по технологии React Native, а приложения React Native работают лучше чем приложение PWA. Мы провели свои тесты производительности приложения и обнаружили, что производительности современных телефонов вполне хватает для того, чтобы приложение PWA работало практически так же быстро и плавно, как и классическое.
Были так же опасения что Push сообщения на iOS могут работать некорректно, но и этот вариант можно обойти и отправлять Push через нативный компонент даже если приложение собрано из PWA.
Итог: На текущий момент использование технологии разработки PWA приложений является вполне неплохим вариантом для создания мобильного приложения. Приложение, публикуемое в официальных маркетплейсах, маленькое по размеру и не требует большой производительности мобильного телефона для запуска.
Дмитрий Покровский
Юрий Логинов
Артем Казарян
Евгений Никонов
