Обзор прогрессивных веб-приложений (PWA)

  • Статья

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

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

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

Преимущества PWA

Интерфейсы, подобные собственному коду

При установке на устройстве PWA работают так же, как и другие приложения. Пример

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

Расширенные возможности

PWA также имеют доступ к расширенным возможностям. Пример

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

Наконец, PWA могут работать в веб-браузерах, как и веб-сайты. Запуск как веб-сайты дает PWA с преимуществами, такими как:

  • PWA могут индексироваться поисковыми системами.
  • PWA можно совместно использовать и запускать по стандартной веб-ссылке.
  • PWA безопасны для пользователей, так как они используют безопасные конечные точки HTTPS и другие меры безопасности пользователей.
  • PWA адаптируются к размеру экрана или ориентации пользователя, а также методу ввода.
  • PWA могут использовать расширенные веб-API, такие как WebBluetooth, WebUSB, WebPayment, WebAuthn или WebAssembly.

Снижение затрат на разработку

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

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

Совместимость между устройствами

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

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

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

Преодоление разрыва между веб-сайтом и собственными

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

  • Обработка файлов.
  • Совместное использование содержимого с другими приложениями.
  • Получите доступ к буферу обмена.
  • Синхронизация данных и получение ресурсов в фоновом режиме.
  • Доступ к оборудованию устройства, такому как Bluetooth и USB.
  • Хранение содержимого в базах данных.
  • Воспользуйтесь преимуществами аппаратного ускорения графики.
  • Используйте макеты CSS, анимации и фильтры для создания расширенных проектов.
  • Запустите почти скомпилированный код производительности с помощью WebAssembly.

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

Примеры того, что могут делать PWA, см. в статье Myth Busting PWA.

The Microsoft Store

Поскольку прогрессивные веб-приложения (PWA) похожи на другие приложения в Microsoft Store, пользователи могут в полной мере взаимодействовать с ними — от обнаружения, установки до выполнения, — не открывая браузер.

Microsoft Store предоставляет пользователям надежный и знакомый интерфейс для установки приложения. Кроме того, вы можете просмотреть подробную статистику использования и диаграммы, которые позволяют узнать, как работают ваши приложения в Microsoft Store.

Узнайте, как опубликовать PWA в Microsoft Store.

Истории успеха

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

  • Starbucks PWA увеличил ежедневно активных пользователей в два раза. Заказы на настольных компьютерах почти такие же, как мобильные (исходные).
  • Trivago увидел увеличение на 150% для людей, которые добавляют его PWA на начальный экран. Увеличение вовлеченности привело к 97%-му увеличению часов ожидания для предложений отелей (источник).
  • Tinder сократил время загрузки с 11,91 секунды до 4,68 секунды с помощью PWA. Приложение на 90 % меньше, чем скомпилированное приложение Android (источник).

Дополнительные истории успеха см. на веб-сайте PWA Stats .

См. также