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

Дополнительные сведения о том, какие собственные возможности PWA могут использовать, см.

Https://whatwebcando.today/

Обычный процесс привлечения пользователей с помощью PWA для Android показан ниже:

  1. Пользователь посещает ваш сайт
  2. Отображается всплывающее окно с просьбой добавить приложение на домашний экран.
  3. Пользователь принимает предложение, нажимая «Добавить на главный экран» во всплывающем окне.
  4. Приложение добавлено на их домашний экран.

Что PWA значат для вас как владельца бизнеса?

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

Вы должны разработать и поддерживать одно приложение

Традиционно вам потребуются отдельные базы кода для веб-приложений, приложений iOS и Android. Каждая поддерживаемая вами платформа должна иметь свою собственную бизнес-логику, поскольку этот код невозможно разделить между платформами (за исключением React Native, Xamarin и т. Д.). Каждая платформа имеет свои собственные ошибки и требует отдельного обслуживания, что также означает тестирование каждой платформы отдельно. В общем, время, затрачиваемое на разработку, поддержку и тестирование, значительно больше.

Создание PWA дешевле, чем создание собственных приложений

Разработка и публикация собственных приложений занимает намного больше времени, чем создание веб-приложения, совместимого с PWA. При публикации собственного приложения вы сначала должны купить лицензию разработчика в одном из соответствующих магазинов (App Store или Google Play Store), затем вы должны создать и поставить цифровую подпись для приложения, настроить все изображения и тексты для приложения. магазинов, и когда вы, наконец, загрузите и отправите приложение, вам придется подождать, пока оно будет рассмотрено официальными лицами магазина приложений.

Несмотря на то, что магазины приложений предоставляют возможности тестирования (например, внутренние треки или TestFlight), совместное использование доступа и публикация новых версий для тестировщиков затруднительны. В случае PWA начальная версия может быть запущена всего за несколько минут с использованием таких инструментов, как Netlify. Чтобы предоставить доступ к приложению общедоступным или внутренним тестировщикам, достаточно поделиться ссылкой.

PWA поддерживают большинство встроенных возможностей

Для PWA проще найти разработчиков

Беглый взгляд на самые популярные технологии показывает, что встретить разработчика JavaScript намного проще, чем разработчика Objective-C / Swift или Java / Kotlin. Весьма вероятно, что большинство разработчиков, с которыми вы встретитесь, имеют хоть какой-то опыт работы с JavaScript.

Доказано, что коэффициент конверсии PWA выше

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

Настройка и разработка PWA выполняется быстрее по сравнению с собственными приложениями.

Как для Android, так и для iOS, вам необходимо загрузить большие, зависящие от платформы IDE. Собственные приложения также требуют компиляции исходного кода в байтовый код перед установкой или публикацией приложения, что по мере роста проекта занимает все больше и больше времени. Как только ваше приложение будет готово к выпуску, вам все равно придется ждать, пока Google и / или Apple проверит приложение.

В случае PWA разработчик может выбрать любой текстовый редактор или IDE, который они желают разработать для своих приложений. Код не нужно компилировать, но его часто переносят и объединяют. Транспортировка и объединение JavaScript и CSS занимает гораздо меньше времени, чем компиляция исходного кода в байтовый код. Процесс разработки PWA часто сопровождается горячей заменой модуля, что означает, что вы можете видеть изменения на лету, без необходимости перестраивать и перезапускать приложение. Публикация приложения для широкой публики - это всего лишь вопрос обслуживания файлов на веб-сервере и привязки его к доменному имени. Никому из Google или Apple не потребуется его просматривать.

PWA имеют крохотный размер по сравнению с собственными приложениями.

Нативные приложения имеют тенденцию быть очень раздутыми - средний размер приложения для Android составляет 15 мегабайт, а для iOS - 38 мегабайт. (Источник: https://sweetpricing.com/blog/2017/02/average-app-file-size/)

С PWA разумно ожидать приложений размером менее 1 мегабайта. Быстрая математика показывает, что время загрузки по крайней мере в 15–38 раз быстрее и не требует установки, что дает PWA еще большее преимущество с точки зрения скорости установки.

Например, размер PWA Twitter составляет всего 0,6 мегабайта, в то время как их родное приложение для Android - 23 мегабайта. Если загрузка родного приложения для Android занимает одну минуту, вы получите PWA всего за 2 секунды.

Другой пример - Uber: их PWA составляет 50 килобайт. В сети 2G загрузка займет 3 секунды. По сравнению со средним размером приложения 23 мегабайта, это займет более 20 минут в той же сети.

Легкость ведения бизнеса

Магазин Google Play взимает единовременную плату в размере 25 долларов за возможность загружать приложения в Play Store. Комиссия за транзакцию для продажи приложения или платежей, совершаемых в приложении через платформу Google Play, включает комиссию за транзакцию в размере 30%.

Разработчики Apple App Store должны платить 99 долларов в год за право публиковать и поддерживать приложения. Apple также сокращает на 30% продажу приложений и покупок внутри них.

Примеры из крупных компаний-разработчиков приложений

Uber удалось сделать свое мобильное приложение размером всего 50 килобайт, сохранив при этом ту же функциональность, что и собственное приложение.

См. Пример использования: https://eng.uber.com/m-uber/

При создании PWA Tinder сократил размер своего приложения на 90% по сравнению с аналогом Android. Время их загрузки было сокращено с 12 до чуть менее 5 секунд.

См. Пример использования: https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0

Pinterest

Alibaba увеличила коэффициент конверсии для новых пользователей на 104% с помощью PWA и вдвое увеличила посещаемость страниц.

См. Пример использования: https://developers.google.com/web/showcase/2016/aliexpress

Twitter увеличил количество твитов, отправляемых через PWA, на 75%.

См. Пример использования: https://developers.google.com/web/showcase/2017/twitter

Внутренние показатели Google показывают, что коэффициент конверсии PWA в 5–6 раз выше, чем у нативных приложений.

См. Пример использования: https://medium.com/dev-channel/why-are-app-install-banners-still-a-thing-18f3952d349a

Еще примеры:



Проблемы с PWA на iOS

У PWA есть три основных недостатка, которые Apple еще не решила на iOS.

Нет push-уведомлений

Apple пока не указала, когда и станут ли push-уведомления доступны на iOS. С некоторых точек зрения кажется, что Apple не хочет, чтобы PWA стали обычным явлением, и хочет заставить людей разрабатывать собственные приложения.

Нет баннера с надписью "добавить на главный экран"

Android поддерживает отображение всплывающего окна «Добавить на главный экран» на веб-сайтах, которые квалифицируются как PWA. В iOS нет возможности для встроенного всплывающего окна. Однако вы по-прежнему можете определить, установил ли пользователь его на своем домашнем экране, и отобразить всплывающую подсказку, указывающую, что ваше веб-приложение может быть загружено, и показать пользователю, как это сделать. См. Этот пример:

Плохое управление государством

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

Заключение

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

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