Прогрессивные веб-приложения¶

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

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

• У него есть значок на главном экране, в программе запуска приложений, на панели запуска или в меню "Пуск".
• Оно появляется при поиске приложений на устройстве.
• Оно открывается в отдельном окне, полностью отделенном от пользовательского интерфейса браузера.
• Он имеет доступ к более высоким уровням интеграции с ОС, например, к обработке URL-адресов или настройке строки заголовка.
• Работает в автономном режиме.

Веб-платформа¶

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

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

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

Приложения для конкретных платформ¶

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

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

Лучшее из двух миров¶

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

Внедрение имеет свои преимущества¶

Компания 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 раза выше по сравнению с другими платформами и опциями установки.

Потоковая передача данных¶

Отличным примером возможностей 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 и совместимости, то, как правило, имеем в виду возможности преодоления границ браузера и контекста "только онлайн": установку иконок и поддержку офлайн.

В дополнение к классической поддержке веб-платформы проверим поддержку основных функций приложения, таких как установка значков и возможность работы в автономном режиме:

• 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 из браузера на настольном компьютере, а затем обращается к нему, как к любому другому приложению, с помощью отдельного окна.

Мобильные устройства¶

Если говорить о мобильных телефонах и планшетах, то 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 для корпоративного распространения.

В следующем видеоролике пользователь устанавливает 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

Комментарии