Прогрессивная разработка веб-приложений: о технологии PWA в 2022 году

PWA (Progressive Web Application) — относительно недавняя тенденция в разработке мобильных приложений. Термин относится к проектам, которые используют “прогрессивные” подходы, чтобы функционировать аналогично нативным приложениям. 

Преимущества и недостатки PWA

Использование PWA имеет много преимуществ, но недостатки тоже стоит учитывать.

Преимущество 1. PWA практически не зависит от платформы. Приложение может быть разработано с использованием единой кодовой базы и развернуто на нескольких разных площадках. Разработка сокращает время и ресурсы, необходимые для вывода приложения на рынок. 

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

Преимущество 2. PWA доступны все фишки современного дизайна. Современные браузеры позволяют разработчикам использовать все дизайнерские элементы, учитывая изменения экранов у разных платформ. 

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

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

PWA и другие технологии

PWA против нативных приложений

Прямое сравнение PWA с нативными приложениями выявляет отличительную особенность. А именно, PWA создаются с использованием более простой кодовой базы (требуются только веб-языки, а не SDK для конкретных платформ). 

PWA против кроссплатформенных приложений

По сравнению с более гибридными технологиями, такими как React Native, PhoneGap или Flutter, для кроссплатформенных приложений необходимо выделить определенные черты. Например, React Native создан для разработки кроссплатформенных нативных приложений с помощью единой кодовой базы. Обычно для этого требуется широкий набор навыков команды разработчиков, поскольку им приходится иметь дело с различными нативными элементами управления и плагинами, которые написаны на разных языках. Таких, как Java или Objective-C (зависит от платформы).

Приложения PhoneGap также в чем-то похожи. Это просто приложения, завернутые в нативный контейнер, который имеет доступ к API различных платформ через набор нативных плагинов. Несмотря на огромный список доступных плагинов, вам может понадобиться что-то нестандартное, и придется реализовать это самостоятельно. Опять же с помощью разработчиков Android и iOS.

В этом смысле PWA  немного проще и обычно создаются только на JavaScript с использованием современных фреймворках, таких как React, Angular и Vue.

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

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

PWA против веб-приложений

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

Среди похожих преимуществ — отзывчивый, легкий дизайн, характерный для многих одностраничных приложений (SPA).  

Ключевым отличием является стандартизированный подход PWA к имитации нативного взаимодействия.

PWA также можно сравнить с платформами приложений, такими как Electron и Flutter. Electron — это фреймворк для веб-приложений с недостатками в виде размера и безопасности, которые делают его непригодным для разработки PWA. Но Flutter больше похож на PWA. И PWA, и Flutter делают упор на разработку в единой кодовой базе с кросс-платформенной нативной функциональностью. Но Flutter использует только новый веб-язык Dart, в то время как PWA можно писать на любом языке. Причем многие старые языки предлагают дополнительную поддержку.

Поддержка PWA на основных платформах

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

Поддержка PWA на IOS

Для устройств iOS поддержка PWA несколько ограничена. Происхождение PWA можно проследить до самого первого iPhone. До того, как Apple предоставила SDK для устройств iOS, единственными приложениями, доступными на iPhone, были веб-приложения. 

Поскольку разработчики просили более последовательный рабочий процесс, Apple в конечном итоге выпустила свой SDK вместе с App Store. Эта эволюция сопровождалась строгими правилами Apple для разработчиков в плане взаимодействия с пользователем и безопасности приложений, доступных в App Store. К сожалению, эти правила серьезно ограничивают возможности разработчиков по предоставлению PWA для iOS.

Но начиная с iOS 11.3 PWA поддерживаются на платформе Apple. Тем не менее, они по-прежнему должны быть обернуты в нативный код и распространяться через магазин приложений. Это ограничивает некоторые преимущества PWA, такие как упрощенная кодовая база и простота установки. 

Поддержка PWA на Android

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

Поддержка браузера PWA

Хотя сейчас большинство популярных браузеров поддерживают PWA, есть те, которые решили НЕ поддерживать:

• Десктопный Firefox

• Интернет-Explorer

• Мобильный браузер Facebook

Есть оговорка с Safari. Хотя он и обеспечивает базовую поддержку PWA, но включены не все функции. Safari не поддерживает push-уведомления, поэтому пользователь должен установить приложение вручную, чтобы добавить его на главный экран.

В дополнение к этому, в 2020 году WebKit, движок Safari, объявил, что не будет поддерживать многие API-интерфейсы, дающие доступ к собственным функциям. Примерами таких неподдерживаемых функций являются Web Bluetooth, Web MIDI API, Magnetometer API, Web NFC API и другие. Говорят, так сделано из соображений конфиденциальности, но это тормозит развитие PWA на iOS.

Стоит ли использовать PWA в 2022 году?

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

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

Другие частые случаи использования PWA — это когда вашему приложению требуется поддержка автономного режима или вам нужно, чтобы устаревшее веб-приложение, например, созданное с помощью React, было преобразовано в PWA с минимальными временными затратами по сравнению с созданием нового приложения с нуля, например, во Flutter для Web .

Когда не стоит использовать PWA

Хотя у PWA есть некоторые недостатки, они минимальны и в основном перевешиваются преимуществами. Большими ограничениями для PWA являются особенности их поддержки на iOS, которая, очевидно, составляет значительную часть доли рынка мобильных приложений. Но некоторая поддержка есть. И изменение позиции Apple в отношении PWA в прошлом показывает, что компания готова развиваться в этом плане.

Еще одно ограничение, которое может помешать вам использовать PWA, заключается в том, что приложение может быть не опубликовано в AppStore. Но его легко разместить в Google Play и можно запустить в Microsoft Store.

8 рекомендаций по разработке PWA

1. PWA должно ощущаться как нативное приложение — рекомендуется показывать заставки во время запуска, обеспечить набор значков разного размера, которые будут использоваться на главном экране в качестве логотипа, и правильно настроенную тему. Некоторые браузеры до сих пор не имеют полной поддержки manifest.json, поэтому вам придется использовать метатеги, например, чтобы указать цвет темы или плитки в Safari или Microsoft Edge.

2. Установка приложения или функция “добавить на главный экран” вместе с push-уведомлениями — это те функции, которые значительно повышают коэффициент конверсии и повторное вовлечение пользователей. 

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

4.  Всякий раз, когда выходит новая версия приложения PWA, необходимо сообщать пользователю о доступных обновлениях. Это можно сделать с помощью баннеров или уведомлений с предложением обновиться. Обратите внимание, что ServiceWorker не будет автоматически обновляться до тех пор, пока не будут закрыты все окна или вкладки приложения, использующие предыдущую версию. Если вы не выведете баннер, пользователь некоторое время так и не будет знать об обновлениях.

5. Когда пользователи не могут обновить приложение и используют старую версию, важно иметь на обратно совместимые API.

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

7. PWA должны быть быстрыми. Вы можете протестировать и отладить производительность с помощью Lighthouse и других инструментов Chrome DevTools.

Наши проекты на PWA

Разработка мобильных приложений на Android и IOS:

• Кинг суши

• Palladi 

• Маит

• ЛК застройщика 

• Shure

На основе: https://mobidev.biz/blog/why-when-use-progressive-web-app-pwa-development