Когда-то Всемирная Паутина представляла собой набор из статичных веб-страниц с весьма ограниченной интерактивностью, обеспеченной такими инструментами, как Flash и Java-апплеты. Страницы были глючными и часто сталкивались с проблемами совместимости на разных устройствах и оставались относительно неэффективными до появления в 2008 году HTML5. Этот язык разметки позволил значительно расширить возможности веб-страниц — от воспроизведения встроенных видео до обработки запросов в реальном времени без каких-либо плагинов.
Прогрессивные веб-приложения (PWA) используют этот механизм, чтобы предложить пользовательский интерфейс, подобный полноценному приложению, поэтому неудивительно, что они добились больших успехов в широком спектре отраслей.
Однако, несмотря на преимущества PWA, по-прежнему существуют веские аргументы в пользу создания собственных приложений. В этой статье мы расскажем, как конвертировать PWA в так называемые нативные приложения — программы, которые создаются под конкретную операционную систему и скачиваются из соответствующих сторов.
PWA vs Native App
Прогрессивное веб-приложение — это тип приложения, которое может работать как веб-страница, так и мобильное приложение на любом устройстве. Это отличное решение для плохого пользовательского интерфейса мобильных устройств и низких коэффициентов конверсии в интернет-магазинах.
Во многих отношениях PWA превосходит нативное мобильное приложение:
- Оно более доступно для пользователей
- Оно проще в разработке
- Оно функционирует на любом типе устройств без какой-либо дополнительной работы с Вашей стороны
Однако в реальном мире компании почти всегда создают приложения для IOS и Android, даже если они уже выпустили полностью функциональный PWA. Почему?
Самая главная причина, по которой бизнес переносит собственное приложение в магазины приложений — это видимость.
Распространение смартфонов за последние несколько лет кардинально изменило то, как мы взаимодействуем с Интернетом. Если когда-то главными движущими силами обмена информацией были поисковые системы и веб-сайты, то сегодня большая часть трафика поступает через приложения. В этом ключе Google Play и App Store сумели зарекомендовать себя как ключевая помощь в удовлетворении любых потребностей пользователей, которые полагаются на мобильные приложения для взаимодействия практически со всеми интернет-сервисами или контентом, которые они потребляют.
Давайте теперь перейдем от «почему» к «как» создать нативное приложение из PWA.
Кстати, если вы хотите глубже погрузиться в веб-разработку и создание собственных приложений, приходите на бесплатный двухдневный марафон по разработке без кода. Мы покажем как создавать собственные проекты и расскажем, как стать полноценным no-code разработчиком!
Использование Trusted Web Activities (TWA) — только для Android
В начале 2019 года Google внедрила в Android новую функцию под названием «Trusted Web Activities».
Эта функция позволяет разработчику запускать любые веб-приложения, включая PWA, в приложении для Android следующим образом: он открывает версию браузера Chrome, который затем может выполнять желаемую веб-активность; в данном случае — PWA.
Метод может показаться слишком хитрым, но это, безусловно, самый простой способ перенести прогрессивное веб-приложение на мобильную платформу Android, сохранив его изначальные параметры и настроив лишь несколько конфигурационных файлов, чтобы разместить его в Google Play.
Сам процесс публикации приложения в сторе может показаться немного сложным для новичка, но при этом отпадает необходимость писать код на другом языке для создания собственного приложения. Так в чем же подвох?
- Во-первых, это только Android. Метод TWA не работает для Apple.
- Во-вторых, этот процесс не совсем прост — необходимо настроить двустороннее соединение между самим PWA и приложением для Android и изменить его файл манифеста, чтобы распознавать и использовать это соединение.
Все эти манипуляции проводятся в Android Studio, который необходимо освоить хотя бы в какой-то степени, чтобы «операция прошла успешно». Кстати, одна из манипуляций в Android Studio подразумевает под собой превращение PWA в APK (Android Package).
Другие платформы для конвертирования
В то время как TWA хорошо работает для Android, необходимо понять, какие методы подойдут для IOS, так как Apple просто не позволяет веб-сервису что-либо делать со своим API.
Итак, нужно обмануть Apple, заставив систему думать, что PWA на самом деле является нативным приложением, создав для него пользовательскую оболочку.
Как пример, в данном вопросе могут помочь такие платформы, как Cordova и Ionic, причем оба этих фреймворка работают в связке — Cordova служит звеном между приложением и собственным API, а Ionic работает с его интерфейсом. Кроме того, можно прибегнуть к платформе Create React App, которая предлагает встроенную поддержку для создания PWA.
Как настроить таргет PWA-to-Native одновременно на IOS и на Android
Предыдущие методы хоть и являются достаточно доступными, но при этом их сложно назвать универсальными, так как они требуют большой вовлеченности, работы над постоянно возникающими ошибками и терпения.
Поэтому, если ваша цель состоит в том, чтобы конвертировать прогрессивное веб-приложение сразу для двух операционных систем, следует отнестись к этому как к непростому, но интересному квесту.
Одна из наиболее подходящих для данной цели платформ — NativeScript, который позволяет создавать собственные приложения для IOS и Android, используя только Javascript и его библиотеки.
Загвоздка заключается в том, что этот фреймворк имеет свой собственный синтаксис и функции, и перенос уже существующего PWA на него потребует обширной перезаписи и, опять же, углубления в детали, что может занять определенное время.
Что в итоге
Как отмечалось выше, несмотря на свою скорость, относительную простоту разработки по сравнению с нативными приложениями, PWA имеют определенный набор ограничений, включая невозможность появиться в магазинах приложений, поэтому вопрос их конвертации в нативные приложения является весьма актуальным.
Излишне говорить, что этот процесс труден, утомителен, технически сложен и подвержен ошибкам, но результат — PWA для веб-браузеров и нативное приложение для ваших лояльных, вовлеченных пользователей — это действительно идеальное мобильное сочетание для любого бизнеса.
