Прогрессивные веб-приложения¶
Прогрессивные веб-приложения (PWA) — это веб-приложения, созданные и усовершенствованные с помощью современных API-интерфейсов, обеспечивающие расширенные возможности, надежность и удобство установки, позволяющие работать с любым человеком, в любом месте, на любом устройстве, и все это на единой кодовой базе.
Прогрессивное веб-приложение (PWA) — это веб-приложение, которое использует прогрессивные улучшения для обеспечения более надежной работы пользователей, использует новые возможности для обеспечения более интегрированного опыта и может быть установлено. А поскольку это веб-приложение, оно может быть доступно любому человеку, в любом месте, на любом устройстве, и все это с единой кодовой базой. После установки PWA выглядит как любое другое приложение:
- У него есть значок на главном экране, в программе запуска приложений, на панели запуска или в меню "Пуск".
- Оно появляется при поиске приложений на устройстве.
- Оно открывается в отдельном окне, полностью отделенном от пользовательского интерфейса браузера.
- Он имеет доступ к более высоким уровням интеграции с ОС, например, к обработке URL-адресов или настройке строки заголовка.
- Работает в автономном режиме.
Веб-платформа¶
Веб — это невероятная платформа. Сочетание универсальности для различных устройств и операционных систем, ориентированная на пользователя модель безопасности, а также тот факт, что ни одна компания не контролирует ее спецификацию или реализацию, делают ее мощной платформой для создания программного обеспечения.
В сочетании с присущей Интернету связностью можно осуществлять поиск по всему Интернету и делиться найденным с кем угодно и где угодно. Всякий раз, когда вы заходите на сайт, это последняя версия, выпущенная издателем, и ваш опыт работы с этим сайтом может быть как временным, так и постоянным, как вы того пожелаете.
Веб-приложения могут быть доступны любому человеку, в любом месте, на любом устройстве с единой кодовой базой. Для разработчиков веб также предлагает прозрачный и простой механизм развертывания. Нет необходимости в упаковке, дополнительной проверке содержимого или задержке обновлений. Пользователи всегда получают последнюю версию при посещении вашего приложения. Благодаря новым возможностям и технологиям веб-приложения теперь позволяют взаимодействовать и просматривать содержимое даже в автономном режиме, что еще несколько лет назад было невозможно.
Приложения для конкретных платформ¶
Приложения для конкретных платформ, как на мобильных, так и на настольных компьютерах, известны своей насыщенностью и надежностью. Они постоянно присутствуют на домашних экранах, доках и панелях задач. Они работают независимо от сетевого подключения и запускаются в автономном режиме. Они могут читать и записывать файлы из локальной файловой системы, обращаться к аппаратным средствам, подключенным через USB, последовательный порт или Bluetooth, и взаимодействовать с данными, хранящимися на устройствах, например, с контактами и событиями календаря. В приложениях, ориентированных на конкретную платформу, можно делать снимки, воспроизводить композиции, перечисленные на главном экране, или управлять воспроизведением мультимедиа, находясь в другом приложении. Эти приложения ощущаются как часть устройства, на котором они работают.
В современных мобильных операционных системах платформоспецифичные приложения устанавливаются в основном из магазинов приложений, где действуют правила и ограничения на то, кто и что может публиковать для своих пользователей. Эти приложения обычно поставляются в виде большого неделимого пакета, и каждое обновление требует повторной упаковки, повторного подписания, повторного утверждения и повторной установки на устройство.
Проблема платформозависимых приложений заключается в том, что они не совместимы с несколькими платформами и устройствами, поэтому нелегко, да и невозможно, перенести приложение для Android на iOS или iOS на Windows или ChromeOS, не создавая новое приложение с нуля.
Лучшее из двух миров¶
Если рассматривать платформенные и веб-приложения с точки зрения возможностей и охвата, то платформенные приложения представляют собой лучшие возможности, в то время как веб-приложения — лучшие возможности. Прогрессивные веб-приложения находятся на пересечении возможностей платформенных приложений и возможностей веб-приложений. Прогрессивное веб-приложение включает в себя функции из обоих миров.
-
Web
- Связность
- Доступность по умолчанию
- Повсеместно
- Простота развертывания
- Легко обновлять
- Каждый может опубликовать
-
Платформенные приложения
- Возможность работы в автономном режиме
- Высокая производительность
- Интеграция устройств
- Автономная работа
- Установленный значок
- Богатая и надежная
Прогрессивные веб-приложения обычно рассматриваются как приложения, которые пользователь может установить из браузера, а не из магазина приложений. Однако сегодня PWA может быть размещено во многих магазинах приложений в качестве дополнительного канала распространения, включая Google Play Store (для Android и ChromeOS), Microsoft Store (для Windows 10 и 11) и Apple AppStore (для iOS, iPadOS и macOS). В этих случаях необходимо соблюдать все правила и требования магазина, но при этом вы получаете некоторые преимущества PWA.
Внедрение имеет свои преимущества¶
Компания Hulu, американский сервис потокового видео, создала версию Progressive Web App для замены своих настольных приложений, которые имели плохие отзывы пользователей и плохо использовались. Как было показано на конференции Google I/O 2019, один разработчик мог изучить и внедрить этот опыт на базе существующего веб-приложения за две недели.
В течение пяти месяцев 96% пользователей их старых приложений перешли на PWA, что привело к увеличению числа повторных посещений на 27% и росту вовлеченности на 5,5%. Поскольку PWA находятся в пусковой установке и на панели задач, к ним легче вернуться, чем если бы они просто жили на вкладке".
JD.ID, платформа электронной коммерции в Индонезии, предоставляющая услуги по доставке многих товаров, хотела расширить свое присутствие в Интернете, сосредоточившись на производительности и независимом от сети удобстве работы с PWA. Благодаря этому улучшению они увеличили общий коэффициент конверсии на 53%, 200% для установленных пользователей и на 26% увеличили количество ежедневных активных пользователей.
Clipchamp — браузерный онлайн-видеоредактор настольного класса, позволяющий любому человеку рассказывать истории, которыми стоит поделиться с помощью видео. По сравнению с пользователями обычного десктопного приложения, число удержанных пользователей PWA увеличилось на 9%, а за первые пять месяцев работы PWA-установки росли на 97% каждый месяц.
Gravit Designer от Corel Corporation — это мощный инструмент векторного дизайна настольного класса, который ежедневно обслуживает десятки тысяч активных пользователей, нуждающихся в доступном и недорогом программном обеспечении для создания векторных иллюстраций. После добавления PWA в качестве опции установки пользователи стали на 24% активнее, на 31% больше повторных пользователей, а вероятность приобретения Gravit Designer PRO у пользователей PWA в 2,5 раза выше по сравнению с другими платформами и опциями установки.
Многие другие компании уже внедрили PWA и убедились в их преимуществах. Крупные компании уже опубликовали PWA на различных продуктах, включая Apple (AppStore Connect, Feedback Assistant), Microsoft (Office 365, Windows 365), Google (Duo, YouTube Music, Drive), Amazon (Luna), Facebook (Instagram Lite, Gaming).
Потоковая передача данных¶
Отличным примером возможностей Progressive Web Apps является индустрия стриминговых платформ, в том числе облачных игр и удаленных вычислений. С 2021 года большинство провайдеров облачных игр запустили Progressive Web Apps, позволяющие играть в консольные игры с любого устройства и только через браузер или установку PWA: iPhone, Android, iPad, ноутбуки, Mac или PC. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now и BlueStacks X предлагают облачные игровые решения через браузер в виде PWA. Все они обеспечивают отличную работу с производительностью, близкой к "родной", на всех платформах благодаря таким веб-технологиям, как WebRTC, WebAssembly и GamePad API.
Проблемы¶
Рассмотрев преимущества использования веб-платформы для публикации PWA, важно также знать о проблемах, с которыми вы можете столкнуться.
Кросс-браузерная совместимость¶
Компания Apple является ключевой компанией в мире мультидевайсов, владея iOS, iPadOS, macOS и Safari. Хотя компания Apple никогда не использовала термин PWA публично, с 2018 года она поддерживает технологии, позволяющие сделать PWA устанавливаемым и поддерживаемым в автономном режиме в Safari для iPhone и iPad.
Однако в реализации Apple спецификации PWA не хватает многих функций, которыми обладают другие браузеры, в частности браузеры на движке Chromium.
В середине также находится Firefox с его движком Gecko, в котором реализовано больше PWA-спецификаций на Android и меньше возможностей установки на десктопе.
К недостаткам можно отнести отсутствие push-уведомлений, интеграционных API (таких как Web Bluetooth или WebNFC), а также методов продвижения установки, которые помогают пользователям узнать, что они могут установить текущий сайт, чтобы получить опыт работы с приложением. Кроме того, есть несколько ошибок в реализованных функциях.
Как и при любой другой веб-разработке, тестирование работы на всех платформах является обязательным при выпуске PWA, а также при выходе новой версии браузера или ОС. Всегда следует предусмотреть запасные варианты или альтернативные возможности, когда та или иная функция недоступна.
Осведомленность о PWA¶
Будучи разработчиком PWA, вы, скорее всего, столкнетесь с проблемой осведомленности как со стороны бизнеса, так и со стороны пользователей. Некоторые владельцы компаний не знают о PWA или имеют неверные представления о возможностях и проблемах прогрессивных веб-приложений.
Когда вы публикуете PWA, ваша следующая задача — убедиться в том, что пользователи понимают, что сайт можно установить, что приведет к появлению возможности установки приложения.
Проблема установки более актуальна для некоторых платформ, например iOS и iPadOS, поэтому иногда UX-дизайнеры включают экраны, объясняющие пользователю, как установить приложение.
Совместимость¶
Необходимо помнить, что Progressive Web App — это всего лишь веб-приложение, поэтому контент и сервисы работают поверх стандартных спецификаций и протоколов. Поэтому PWA технически работает везде, где работает веб; вам не нужно, чтобы платформа была совместима с какой-либо "спецификацией PWA".
Однако когда мы говорим о PWA и совместимости, то, как правило, имеем в виду возможности преодоления границ браузера и контекста "только онлайн": установку иконок и поддержку офлайн.
PWA должен работать везде, даже если установка иконок или поддержка офлайн недоступны. Всегда планируйте работу PWA при отсутствии таких возможностей, проверяя поддержку и предлагая запасные варианты.
В дополнение к классической поддержке веб-платформы проверим поддержку основных функций приложения, таких как установка значков и возможность работы в автономном режиме:
- 97% — Браузеры, готовые к работе в автономном режиме
- 88% — Веб-пользователи могут установить PWA
Данные взяты из StatCounter и Can I Use.
Настольные компьютеры и ноутбуки¶
В мире многофакторных устройств уже сложно определить, что такое настольный компьютер. Тем не менее, по крайней мере с точки зрения операционной системы, эти браузеры и магазины совместимы с установкой PWA и возможностью работы в автономном режиме:
- Windows 10 и 11
-
Google Chrome (с версии 73), Microsoft Edge (с версии 79), Microsoft Store
- ChromeOS
-
встроенный браузер Chrome (с версии 72), Play Store (с версии 85)
- macOS, Linux и Windows 7 и 8.x
-
Google Chrome (с версии 73), Microsoft Edge
В следующем видеоролике пользователь устанавливает PWA из браузера на настольном компьютере, а затем обращается к нему, как к любому другому приложению, с помощью отдельного окна.
На настольных компьютерах Safari и Firefox не поддерживают установку PWA. Они поддерживают возможность работы в автономном режиме, но работа всегда будет начинаться в пользовательском интерфейсе браузера. Он может стать полноэкранным, но никогда не будет отдельным окном на настольном компьютере.
Мобильные устройства¶
Если говорить о мобильных телефонах и планшетах, то Progressive Web App можно установить с возможностью работы в автономном режиме с помощью следующих браузеров и магазинов приложений:
- iOS и iPadOS
-
Safari (начиная с iOS 11.3), AppStore (начиная с iOS/iPadOS 14, с некоторыми ограничениями), мобильная конфигурация для корпоративного распространения.
- Android
-
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (начиная с версии 72 с установленным Google Chrome или браузерами, совместимыми с TWA), Galaxy Store, Managed Play iframe для корпоративного распространения.
На iOS и iPadOS PWA могут быть установлены только в том случае, если пользователь использует Safari. Это означает, что пользователи не смогут установить PWA, если они используют другие браузеры, такие как Google Chrome, Firefox или Microsoft Edge. Как на Android, так и на iOS пользователи не могут установить PWA из многих встроенных браузеров, таких как Facebook Mobile Browser, Instagram, Google Search App или Gmail.
В следующем видеоролике пользователь устанавливает PWA из браузера на мобильном устройстве с помощью диалогового окна браузера, а также с помощью меню Добавить на главный экран.
Другие устройства¶
Некоторые другие небольшие устройства поддерживают PWA, например, игровые консоли (Xbox с Microsoft Store) или XR-устройства (Microsoft Hololens, планы Oculus от Facebook). Однако остальные устройства с браузером, как правило, не поддерживают PWA, в том числе:
- Игровые консоли
- интеллектуальные телевизоры
- Смарт-часы
- Автомобили
Ваш PWA всегда будет работать в браузере всех устройств с их специфическими ограничениями. Эта способность работать на многих устройствах позволяет создавать путешествия с использованием нескольких устройств, когда пользователь может начать выполнение задачи на одном устройстве и завершить ее на другом, при этом данные синхронизируются между ними с помощью одного и того же развернутого приложения.
Ресурсы¶
- Введение в прогрессивные веб-приложения на MDN
- Список совместимости прогрессивных веб-приложений
- Как прогрессивные веб-приложения могут способствовать успеху бизнеса
- Число установок PWA-видеоредактора Clipchamp выросло на 97% в месяц
- Пользователи PWA в 2,5 раза чаще приобретают Gravit Designer PRO
Источник — Progressive Web Apps