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

Прогрессивное веб-приложение (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 в качестве варианта установки для пользователей пользователи PWA стали на 24 % более активными, на PWA приходится на 31 % больше повторных пользователей, а пользователи PWA в 2,5 раза чаще приобретают Gravit Designer PRO по сравнению с их другие платформы и варианты установки.

Потоковое вещание меняет правила игры

Отличным примером мощи Progressive Web Apps является индустрия потоковых платформ, включая облачные игры и удаленные вычисления. С 2021 года большинство поставщиков облачных игр запустили Progressive Web Apps, позволяющие играть в консольные игры с любого устройства, просто через браузер или с установленным PWA: iPhone, Android, iPad, ноутбуки, Mac или ПК. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now и BlueStacks X предлагают решения для облачных игр через браузер в виде PWA. Все они обеспечивают отличное качество работы с производительностью, близкой к исходной на всех платформах, благодаря веб-технологиям, таким как WebRTC, WebAssembly и API GamePad.

Проблемы

Рассмотрев преимущества использования веб-платформы для публикации 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 или имеют неправильное представление о возможностях и проблемах Progressive Web Apps.

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

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

Совместимость

Вы должны помнить, что прогрессивное веб-приложение — это просто веб-приложение, поэтому контент и сервисы работают поверх стандартных спецификаций и протоколов. Таким образом, технически 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, с некоторыми ограничениями), мобильная конфигурация для корпоративного распространения.
Андроид
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, браузер Huawei, Baidu, UCWeb, Play Store (начиная с версии 72 с установленным Google Chrome или браузерами, совместимыми с TWA), Galaxy Store, iframe Managed Play для корпоративного распространения.

В следующем видео пользователь устанавливает PWA из браузера на мобильное устройство с помощью диалогового окна браузера, а также с помощью меню «Добавить на главный экран» .

Другие устройства

Некоторые другие небольшие устройства поддерживают PWA, например игровые консоли (Xbox с Microsoft Store) или устройства XR (Microsoft Hololens, планы для Facebook Oculus). Однако остальные устройства с браузером обычно не принимают PWA, в том числе:

  • Игровые приставки
  • Смарт-телевизоры
  • Умные часы
  • Легковые автомобили

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

Ресурсы