Найти и посетить веб-сайт гораздо проще, чем установить приложение. Просто запустите браузер, введите URL-адрес, и все готово.
Делиться тоже просто. Вы можете поделиться простой URL-ссылкой со своим другом, и, если у него есть современный браузер и подключение к Интернету, он также сможет получить доступ к веб-сайту.
Представьте, если бы вам пришлось загружать приложение Amazon, если бы вы хотели просматривать или кто-то хотел поделиться с вами продуктом через ваш телефон. Пользовательский опыт выполним, однако это занимает гораздо больше времени. К счастью, мы можем открывать Amazon через браузер нашего телефона и делиться продуктами с URL-адресами.
Однако, несмотря на длительный процесс загрузки собственного приложения, они лучше интегрированы с операционной системой устройства. Это позволяет разработчикам создавать удобный пользовательский интерфейс и в полной мере использовать все собственные API, предлагаемые платформой.
Например, разработчики iOS могут настроить свои приложения для отправки и получения push-уведомлений для своих приложений iOS, использовать MLKit и ARKit, подключаться к вашим Apple Watch и многое другое. Это то, что веб-сайты, даже при посещении через мобильное устройство, не могут сделать.
Именно здесь на помощь приходят прогрессивные веб-приложения (PWA), призванные решить проблему преодоления разрыва между возможностями веб-сайта и нативного приложения. Это дает нам возможность создавать веб-приложения, которые могут соответствовать определенным функциям, которые раньше были зарезервированы только для нативных приложений.
Эти определенные функции также не являются статическим списком функций. По мере роста сообщества и поддержки PWA создаются новые функции и API для дальнейшего расширения списка собственных функций приложений, которые мы можем имитировать с помощью PWA. Например, с выпуском iOS 13 и 14 Apple обновила свою поддержку для PWA, чтобы они могли работать в iOS Safari.
Но прежде чем продолжить сравнение прогрессивных веб-приложений и нативных приложений, давайте лучше поймем, что такое прогрессивное веб-приложение.
Определение прогрессивных веб-приложений
Прогрессивные веб-приложения — это веб-приложения, в которых специально используются Service Workers, файлы веб-манифеста и другие API-интерфейсы веб-платформы, чтобы обеспечить удобство работы пользователя, неотличим от родного приложения.
Service Worker — это просто Javascript, который работает в фоновом режиме вашего веб-браузера и является основой прогрессивных веб-приложений. Без сервис-воркеров мы не смогли бы создавать прогрессивные веб-приложения. Это связано с тем, что без какого-либо фонового рабочего процесса браузер пользователя не может обрабатывать входящие сетевые запросы или даже кэшировать приложение.
Файлы веб-манифеста содержат метаинформацию (информацию о вашем приложении) о вашем приложении. Например, какое имя, описание того, что он делает, какой стартовый URL и многое другое.
Одним из распространенных и важных элементов метаинформации является ссылка на значок приложения. Поскольку прогрессивные веб-приложения можно добавлять на главный экран телефона, будет использоваться значок приложения.
Если вам интересно узнать обо всех различных полях, которые принимают файлы веб-манифеста, и о том, какое поведение они вызывают, ознакомьтесь с этим руководством.
Наконец, PWA содержат слово «прогрессивный» в своем названии, потому что их можно запускать в старых браузерах с резервной поддержкой. По сути, улучшения функций «постепенно» обновляются, чтобы соответствовать возможностям браузера пользователя.
Итак, теперь, когда мы лучше понимаем, что такое прогрессивные веб-приложения, давайте вернемся к вопросу, чем именно они отличаются от нативных приложений?
Нативные приложения против прогрессивных веб-приложений
С каждым днем возможности PWA расширяются по мере того, как выполняется больше работы, однако все еще существуют определенные ключевые отличия, о которых вам следует знать.
Языки программирования
Для начала нативные приложения обычно пишутся на таких языках, как Swift (для iOS), Java или Kotlin (для Android), C# (для кроссплатформенной разработки с Xamarin) и многих других. Их можно найти и загрузить непосредственно на телефон пользователя через некоторые специализированные магазины приложений, такие как Apple App Store или Google Play Store.
С другой стороны, PWA состоят из более знакомых веб-языков, таких как Javascript. Это означает, что ваше веб-приложение React также может стать PWA. Их можно найти через веб-браузер с возможностью «добавить» их на главный экран (примечание: не все браузеры и платформы будут предлагать пользователю добавить веб-приложение на главный экран).
Глубина возможностей
Нативные приложения, как правило, будут иметь доступ к большему количеству того, что операционная система предлагает разработчикам. С другой стороны, PWA будет ограничен тем, что поддерживается на данный момент.
Например, совсем недавно с выходом iOS 13.3 была введена частичная поддержка API веб-аутентификации, который позволяет разработчикам получать доступ к системам аутентификации операционной системы. Это означало, что теперь разработчики могли разрешить пользователям входить в свое веб-приложение с помощью Touch ID или Face ID. До выпуска iOS 13.3 вам нужно было сделать собственное приложение, позволяющее пользователям входить в систему с помощью Touch ID или Face ID.
Точно так же есть другие функции, которые изначально поддерживаются, но еще не поддерживаются через веб-браузер.
Кроме того, такие компании, как Apple, могут позволить определенным функциям работать только через собственные приложения, а не через браузер. Например, на iOS нет поддержки push-уведомлений через Safari. Однако, если вы создали собственное приложение для iOS, у вас будет возможность интегрировать push-уведомления.
Охват платформы
Если вы выберете путь создания нативных приложений, вам придется создавать нативные приложения для каждой отдельной платформы: iOS, Android и т. д. Существуют фреймворки JavaScript, такие как React Native или Flutter, которые позволяют создавать кроссплатформенные приложения с единая кодовая база, однако у этих фреймворков есть и свои недостатки.
С другой стороны, PWA доступен как для настольных, так и для мобильных пользователей через единую кодовую базу без необходимости использовать какую-то причудливую среду Javascript для создания собственного приложения.
Единственная разница будет заключаться в том, какую платформу будет использовать ваша целевая аудитория для доступа к вашему приложению. Для собственного приложения они будут найдены и распространены через какой-либо магазин приложений, тогда как прогрессивное веб-приложение будет найдено и распространено с помощью браузера и URL-адреса.
Таким образом, в конечном счете, все еще существует компромисс между созданием собственного приложения и PWA. Например, если вашему приложению требуется слишком много функций, которые еще не поддерживаются PWA, лучше создать собственное приложение.
Однако, если вы все еще считаете, что PWA — это то, что вы хотели бы создать и что это лучший маршрут для вас, давайте посмотрим, как работают PWA.
Как работают прогрессивные веб-приложения
Прогрессивным веб-приложениям нужны три основных компонента: HTTPS-соединение, файл манифеста веб-приложения и сервис-воркер.
HTTPS-соединение
Прежде всего, для PWA требуется HTTPS-соединение. Ваш веб-сервер должен предоставить SSL-сертификат, который вы можете бесплатно установить в наши дни с помощью Let’s Encrypt.
Это необходимо, потому что в отличие от нативного приложения, которое упаковано в виде файла в уже защищенном магазине приложений, ваше PWA обслуживается с какого-то веб-сервера, которым вы управляете. Для обеспечения безопасности при доставке приложения требуется HTTPS-соединение.
Веб-манифест
Затем вам нужно определить метаинформацию о вашем приложении с помощью файла веб-манифеста. Файл веб-манифеста — это всего лишь простой файл JSON, в котором есть ключи для всей необходимой метаинформации (например, имя приложения, язык, значок, начальный URL-адрес, ориентация, область действия и многое другое).
Изменяя значения в файле веб-манифеста, вы можете указать браузеру пользователя, как обрабатывать ваше приложение. Например, отредактировав значение background_color , вы можете изменить цвет заставки, которая отображается при запуске PWA с главного экрана.
Сервисный работник
Наконец, и это самое главное, у нас есть сервис-воркер. Как указывалось ранее, это файл Javascript, который работает в фоновом режиме веб-браузера пользователя. Это то, что обеспечивает все основные функции PWA.
Как правило, разработчики используют сервис-воркеров для управления тем, как браузер обрабатывает сетевые запросы и кэширование. Это позволяет выполнять фоновую синхронизацию и запускать приложение в автономном режиме.
Теперь, когда мы понимаем три основных компонента, необходимых для создания PWA, нам нужно понять архитектуру PWA, чтобы мы могли понять, как каждая часть сочетается друг с другом.
Архитектура оболочки приложения
Хорошо спроектированное PWA обычно следует архитектуре «оболочки».
Архитектура «оболочки» выступает за кэширование «оболочки» вашего приложения, чтобы его можно было запускать в автономном режиме. «Оболочка» приложения — это минимум HTML, CSS и Javascript, необходимых для работы пользовательского интерфейса.
Оболочка может состоять из пустых компонентов состояния, чтобы отображать пользовательский интерфейс по умолчанию, когда приложение работает в автономном режиме. Вы также можете кэшировать данные в своей оболочке, чтобы вы могли создавать пользовательский интерфейс с реальными данными.
При первом запросе приложения из браузера пользователя ваш веб-сервер вернет приложение. После этого сервисный работник в браузере пользователя кэширует «оболочку» вашего приложения.
Теперь, когда посетитель возвращается в ваше приложение, сервис-воркер в браузере пользователя перехватит отправляемый запрос на получение вашего приложения и вернет кешированную оболочку вашего приложения. Это позволяет браузеру пользователя быстро загружать пользовательский интерфейс без каких-либо сетевых вызовов. Даже если данные в конечном итоге будут использоваться для поддержки определенных частей пользовательского интерфейса, быстрое отображение пользовательского интерфейса может повысить воспринимаемую производительность.
Подход к архитектуре «оболочки» сильно зависит от вас, разработчика, кэширующего оболочку. Однако вы должны тщательно продумать, что следует кэшировать, поскольку за это приходится платить: хранение.
Вы не можете кэшировать слишком мало, иначе вы не в полной мере используете то, что можете делать в автономном режиме. Напротив, вы не можете кэшировать слишком много, иначе ваше приложение может занять слишком много памяти.
Как только оболочка загружена, как правило, динамический контент загружается после получения ответа. Например, приложение, которое кэширует оболочку приложения с некоторыми данными, может быстро отобразить пользовательский интерфейс с кэшированными данными при первой загрузке экрана. В то же время можно сделать сетевой запрос на дополнительные данные, чтобы обновить пользовательский интерфейс последними данными.
Следуя архитектуре «оболочки», вы можете быстро загрузить базовый пользовательский интерфейс для своего приложения даже в автономном режиме. Это лишь одно из преимуществ PWA по сравнению с традиционным веб-сайтом.
Давайте подробнее рассмотрим, какие преимущества PWA предлагают по сравнению с традиционными веб-сайтами, а также недостатки и на что следует обратить внимание.
Преимущества и недостатки PWA
Во всем в жизни есть свои плюсы и минусы, и PWA ничем не отличаются. Несмотря на некоторые недостатки, у PWA есть хорошие преимущества, которые могут оправдать время, потраченное на создание PWA.
Преимущество 1 — немедленно обновите приложение
При обновлении родного приложения, которое распространяется через магазин приложений, вам, как правило, придется отправить обновление на проверку. Сколько времени займет проверка, зависит от того, какая компания занимается ею, какое сейчас время года и от многих других факторов, находящихся вне вашего контроля.
Для компании, которой нужно быстро выпускать обновления, может быть, даже несколько раз в день, они не могут позволить себе ждать так долго.
Однако с помощью PWA разработчики могут немедленно обновить приложение. Это связано с тем, что приложение размещается непосредственно на каком-либо веб-сервере, которым вы управляете. При правильном конвейере CI/CD и QA компания может уверенно выпускать несколько обновлений своего приложения, не дожидаясь внешних факторов.
Преимущество 2 — работает на нескольких платформах
При создании нативных приложений, если вы хотите, чтобы ваше приложение работало на нескольких платформах, вы должны создать по одному нативному приложению для каждой из них. В каждом магазине приложений должна быть своя версия приложения, что может удвоить или утроить объем необходимой разработки.
Представьте, что вы — стартап, ищущий продуктовый рынок, подходящий для вашего мобильного приложения. Если принято решение создавать собственные мобильные приложения для iOS и Android, вам придется сделать две версии одного и того же приложения. Один для iOS App Store и один для Google Play Store.
Приложение iOS нужно будет написать на Swift, и если вы хотите протестировать его на реальном устройстве iOS, вам понадобится Mac. Что касается приложения для Android, вы будете использовать либо Java, либо Kotlin, однако вы можете протестировать свое мобильное приложение на реальном устройстве Android с Mac или Windows.
Но вы, по сути, создаете одно и то же приложение дважды. Это много дополнительных денег и то, что похоже на дублирование труда для стартапа.
В этом могут помочь PWA, поскольку они работают на всех платформах и во всех браузерах. Неважно, посещается ли PWA с устройства Android или устройства iOS, потому что оно будет вести себя одинаково. Любые обновления, которые вы отправляете, также будут применяться для всех платформ.
Это может помочь сэкономить огромное количество времени, энергии и денег для небольшого стартапа, который просто ищет продукт, подходящий для рынка.
Преимущество 3 — автономная поддержка и фоновая синхронизация
Сервисные работники позволяют нам кэшировать оболочку нашего приложения вместе с любыми оперативными данными, к которым мы хотели бы получить доступ в автономном режиме. Всякий раз, когда приложение затем запускается в автономном режиме, кэшированная оболочка извлекается из памяти и используется для отображения пользовательского интерфейса. Если мы также кешируем оперативные данные, мы можем отображать некоторый контент в приложении и в автономном режиме.
Например, новостные организации, использующие PWA, кэшируют в браузерах читателей определенное количество статей, которые можно просматривать даже в автономном режиме. Кроме того, с заданным интервалом новостное приложение может загружать новые истории в фоновом режиме, чтобы поддерживать актуальность контента, даже если приложение запускается в автономном режиме.
Это имитирует поведение собственных приложений, поскольку они обычно могут работать даже в автономном режиме, даже если их возможности ограничены.
Преимущество 4 — Push-уведомления
Представьте, если бы вы могли попросить посетителей вашего сайта получать от вас push-уведомления. Оттуда для тех, кто принял, в любое время, когда вы публикуете новый блог, вы можете отправить им push-уведомление. Это было бы здорово для маркетинга, однако обычные веб-приложения не позволяют нам это сделать.
К счастью, с помощью PWA мы можем отправлять push-уведомления… на определенных платформах. Как упоминалось ранее, Apple предпочитает не разрешать push-уведомления для PWA. Однако это не означает, что вы не можете настроить push-уведомления для пользователей, использующих Chrome или Android.
Я рекомендую эту статью на Medium, чтобы вникнуть в технические детали реализации push-уведомлений для вашего PWA.
Теперь обо всех недостатках и вещах, которые следует учитывать в отношении прогрессивных веб-приложений.
Недостаток 1 — не такой мощный, как нативные приложения
Поскольку PWA легковесны по сравнению с нативным приложением, они, как правило, не будут такими же функциональными, как полностью нативное приложение. Несмотря на растущее сообщество и поддержку, еще многое предстоит сделать, чтобы преодолеть разрыв.
Некоторые функции, такие как доступ к камере, геолокация и аутентификация, имеют официально поддерживаемые веб-API, которые может использовать ваше PWA. Другие функции, такие как поддержка Bluetooth, в настоящее время доступны только для ограниченного числа платформ.
Потратив некоторое время на разработку того, что должно делать ваше приложение, вы сможете решить, следует ли вам создавать PWA или собственное приложение.
Минус 2 — трафик в магазине приложений для iOS
В настоящее время Apple не разрешает публиковать PWA в App Store для iOS. Это означает, что вы потенциально можете потерять потенциальные загрузки из-за трафика в iOS App Store.
Если вы ожидаете, что значительная часть вашего бизнеса будет приходиться на трафик iOS App Store, PWA может затруднить вам продвижение. Важно помнить о бизнес-целях, прежде чем приступать к созданию PWA.
Минус 3 — Отстающая поддержка браузера
Несмотря на растущую поддержку того, что могут делать PWA, всегда будут некоторые браузеры и устройства, которые не полностью поддерживают все передовые технологии.
Если большая часть вашей целевой аудитории предпочитает определенный браузер другому, может быть разумно подумать, какие функции веб-API поддерживаются браузером.
Вывод
К веб-сайтам легко получить доступ и поделиться ими, однако их возможности ограничены по сравнению с тем, что могут делать нативные приложения. Прогрессивные веб-приложения призваны помочь преодолеть этот разрыв.
Благодаря использованию Service Workers, файлов веб-манифеста и других функций веб-API ваше мобильное веб-приложение может начать вести себя как родное мобильное приложение.
PWA дают вам много преимуществ по сравнению с обычным веб-приложением, в том числе:
- Возможность немедленного обновления вашего приложения, поскольку код подается с веб-сервера, которым вы управляете, а не из магазина приложений какой-либо другой компании.
- Возможность запускать одно и то же приложение на любом устройстве и платформе с установленным современным веб-браузером.
- Предоставление автономной поддержки и фоновой синхронизации, чтобы пользователи могли получать доступ к контенту, даже если они отключены или имеют нестабильное подключение к Интернету.
Если вы хотите начать создавать PWA с помощью React или преобразовать существующее приложение React в PWA, я бы порекомендовал прочитать эту статью на Medium, в которой рассматривается технический процесс.
По мере роста поддержки прогрессивных веб-приложений мы можем ожидать расширения возможностей и потенциальных функций. Изучение того, как создавать прогрессивные веб-приложения сейчас, потенциально может подготовить вас к созданию чего-то совершенно нового, что может принести массу пользы вашим клиентам, вашему бизнесу или работодателю.
