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

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

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

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

Определение прогрессивного веб-приложения — часть 1: веб-сайт и приложение, объединенные в одно целое

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

В отличие от обычных веб-приложений, прогрессивные веб-приложения можно запускать и в автономном режиме. Для этого достаточно соединить главный экран устройства, совместимого с Интернетом, с соответствующим URL. Это позволит вам вызвать приложение, даже если у вас очень слабое подключение к Интернету или его вообще нет (одно условие — ваш браузер должен иметь автономный кэш). В этом случае приложение отображается не как веб-сайт, а производит впечатление «родного» приложения. Благодаря отзывчивому дизайну оно также может подстраиваться под любой размер дисплея.

Определение прогрессивного веб-приложения — часть 2: PWA против нативного приложения

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

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

Еще одним преимуществом PWA перед нативными приложениями является количество работы, связанной с разработкой; PWA требует гораздо меньше работы. Это связано с тем, что он является одновременно веб-сайтом и приложением, работающим в различных системах.  Это также означает, что затраты намного ниже, и во многих случаях трудно провести различие между двумя типами приложений, когда речь идет о таких вещах, как воспроизведение и работа. Кроме того, PWA почти не требуют места для хранения (хотя это зависит от размера автономного кэша устройства).

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

Определение прогрессивного веб-приложения — часть 3: PWA против традиционного веб-приложения

Уже сейчас классические веб-приложения можно запускать в браузерах различных мобильных операционных систем, таких как Android, iOS и Windows Phone, даже без установки. Основа прогрессивного веб-приложения ничуть не нова, но выглядит более сложной, чем традиционное веб-приложение, поскольку его набор функций адаптивен и вписывается в рамки используемого устройства. Это означает, что даже пользователи, чье устройство и/или браузер могут быть несовместимы со всеми функциями приложения, могут пользоваться приложением в ограниченном формате.

Пример: прогрессивное веб-приложение, с помощью которого можно загружать фотографии на онлайн-платформу, предоставляет доступ к камере. Идея заключается в том, что пользователи могут делать фотографии и загружать их прямо в приложении. Но не все браузеры и устройства способны поддерживать эту функцию на техническом уровне. Как только вы запустите приложение в браузере, оно начнет проверять, подключена ли камера, и если да, то может ли она поддерживаться браузером. Если это невозможно, то функция камеры будет недоступна, но все остальные совместимые функции приложения будут доступны. Камера может быть несовместима, но пользователи могут, например, по-прежнему использовать функцию загрузки в прогрессивном веб-приложении и интегрировать фотографии, видео, записи и т.д., уже имеющиеся на смартфоне.

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

Определение прогрессивного веб-приложения — часть 4: PWA против гибридного приложения

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

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

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

PWA основаны исключительно на открытых веб-стандартах и написаны в основном на HTML, CSS и JavaScript, как и обычные веб-приложения. Прогрессивные веб-приложения очень гибкие и изменяют функции в соответствии с соответствующими рамками и ограничениями устройства. То, что именно может делать PWA, зависит от браузера и устройства (а также в некоторой степени от операционной системы). Но какие технологии используются на самом деле?

Service Worker

Новой особенностью PWA является использование Service Worker — дальнейшее развитие Web Worker. Service Worker выполняется на JavaScript в фоновом режиме браузера (в виде одного из потоков ленты сайта). При первом запуске приложения PWA-сервер загружает Service Worker и пытается его установить. После успешной установки сервисный работник будет готов к использованию при каждом запуске приложения и будет оставаться в курсе всех веб-запросов на соответствующем домене. Но имейте в виду, что это работает только при использовании HTTPS. В противном случае существует опасность значительных рисков для безопасности.

Сервисный работник и сопутствующий кэш сохраняются в используемом браузере, если он поддерживает эту функцию (в настоящее время это относится к Google Chrome, Mozilla Firefox и Opera). Это примечательно, поскольку Service Worker позволяет использовать PWA даже без подключения к Интернету, так как содержимое загружается из кэша. Этот процесс значительно ускоряется благодаря тому, что структура приложения кэшируется, а значит, загружать нужно только самые новые файлы.

Разделение оболочки приложения и содержимого

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

При первом запуске PWA оболочка приложения сохраняется в кэше сервисного работника. Преимущество сохранения в кэше сервисного работника заключается в том, что время загрузки требуемой оболочки приложения будет сведено к минимуму, что в свою очередь означает повышение производительности PWA. Кроме того, содержимое PWA может быть защищено в кэше с помощью IndexedDB. Для этого он должен быть предварительно загружен в прогрессивное веб-приложение (это точно так же, как и для App Shell). Это позволяет получить доступ к ранее загруженному содержимому PWA в автономном режиме.

WebAPKs

WebAPKs — это сервер, на котором можно преобразовать запущенное в браузере прогрессивное веб-приложение в файл формата APK (Andorid Package). Это позволяет более эффективно интегрировать PWA в операционную систему — по крайней мере, так обстоит дело на устройствах Android.

PWA, упакованный в формат APK, может быть интегрирован в «ящик приложений» (иногда также известный как «лоток приложений», т.е. собрание всех приложений и виджетов, установленных на устройстве), что означает, что он может быть установлен на устройство аналогично «родному» приложению Android. Это также позволяет использовать больше нативных функций, права доступа к другим приложениям, а также общие ресурсы устройства. Примером этого является то, как после установки PWA Android запускает его как собственное приложение, а не как вкладку в браузере.

До сих пор очень немногие бета-версии браузера android поддерживают функцию WebAPK, что означает, что конвертация в формат APK все еще трудоемка и неудобна. В своем нынешнем виде установка APK не является таким уж мейнстримом. Но будущее распространение этой функции во всех основных браузерах вполне возможно. Несмотря на отсутствие функции установки, производительность PWA по-прежнему остается убедительной.

Вообще, любой прогресс в технологии браузеров и соответствующих рабочих служб имеет особое значение, поскольку позволяет разработать новый стиль веб-приложений. Уже сейчас описанные выше технологии PWA позволили создать несколько очень разных и впечатляющих приложений — однако они могут реализовать свой максимальный потенциал только в браузерах, поддерживающих service worker. Множество примеров прогрессивных веб-приложений можно найти в тематических исследованиях Google, а также на сайте pwa.rocks.

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

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

Сильные и слабые стороны PWA — обзор

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

Описанные выше характеристики дают хорошее представление о возможностях производительности прогрессивных веб-приложений — или, по крайней мере, по сравнению с последними версиями приложений для браузеров Google Chrome, Mozilla Firefox и Opera. Что касается возможности всесторонней и широкой поддержки формата PWA в будущем, то здесь есть некоторые позитивные признаки. В настоящее время Microsoft работает над интеграцией сервисных рабочих в браузер edge. И только Apple держит руки на замке в отношении поддержки формата PWA — на данный момент браузер Safari от Apple поддерживает PWA лишь в ограниченной степени. Например, PWA в Safari нельзя использовать в автономном режиме. Кроме того, до сих пор не было возможности интегрировать PWA в App Drawer устройств iOS.

Могут ли PWA заменить нативные приложения?

Исторически сложилось так, что новым форматам приложений приходится довольно трудно; как обычные веб-приложения, так и гибридные приложения не смогли достичь того уровня распространения на мобильных устройствах, которого достигли нативные приложения. Учитывая сложную техническую базу и многостороннюю поддержку формата, прогрессивные веб-приложения могут стать первыми, кому это удастся. На данный момент главный вопрос заключается в том, сделает ли Apple формат PWA более доступным. Это был бы самый быстрый способ превратить прогрессивные веб-приложения в серьезного конкурента нативным приложениям.

С точки зрения Apple, есть большой смысл сосредоточиться на развитии формата нативных приложений и одновременно препятствовать полной интеграции PWA в свою операционную систему. В конце концов, App Store — это огромный источник дохода для Apple, и он также привязывает множество пользователей к их сервисам. Если бы случилось так, что Apple поддержала PWA до такой степени, что многие приложения предпочли бы использовать прогрессивные веб-приложения вместо родных приложений для iOS и macOS, то это означало бы, что разработчики и пользователи Apple перестали бы так сильно зависеть от App Store. От этой корыстной связи с собственным магазином Apple откажется (если вообще откажется) только в том случае, если PWA превзойдут нативные приложения как по использованию, так и по распространению.

Но следует сказать, что даже без полной поддержки Apple рынок прогрессивных веб-приложений представляется достаточно большим и прибыльным. Для того чтобы формат был успешным, все основные браузеры должны предложить лучшую поддержку. Можно предположить, что дальнейшее развитие браузера Chrome приведет к улучшению совместимости с PWA, а также к упрощению интеграции PWA в Android. Наряду с Google, сторонниками формата PWA являются такие компании, как Mozilla, Opera и другие. Эти браузеры уже предлагают некоторую совместимость с PWA, и, несомненно, в будущем они будут уделять этому больше внимания. Сторонники прогрессивных веб-приложений — это в основном ключевые игроки интернет-индустрии и индустрии программного обеспечения, которые, как правило, получают прибыль от открытых компьютерных и информационных технологий.

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

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

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

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

Гораздо более проблематичным является отсутствие желания со стороны Apple предложить поддержку формата приложений. Большинство браузеров (Google, Mozilla, Microsoft, Opera) делают многое для того, чтобы наиболее совместимые форматы PWA могли быть быстро интегрированы в их продукты. Apple, с другой стороны, очень мало заинтересована в этом. В первую очередь потому, что компания получает огромную прибыль от изолированной системы приложений платформ iOS и macOS и магазина App Store, который их предоставляет.

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