Бөлісу құралы:

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

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

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

Чтобы приступить к созданию PWA, см. статью Начало разработки PWA.

Видео: Ignite | Март 2021 г. | Ignite: история веб-приложений

Эскиз видео

Преимущества 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 можно использовать единую базу кода, используемую веб-сайтом, мобильным приложением и настольным приложением (в разных операционных системах).

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

Progressive Web Apps (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 New Edge Edition.

Microsoft Store

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

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

См . статью Публикация PWA в Microsoft Store.

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

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

  • Starbucks PWA увеличило ежедневное количество активных пользователей в два раза. Заказы на настольных компьютерах почти такие же, как мобильные (исходные).

  • В Trivago зафиксировали прирост на 150 % среди людей, добавляющих PWA на главный экран. Увеличение задействования привело к увеличению числа посещений для предложений гостиниц на 97% (источник).

  • Благодаря PWA Tinder сократил время загрузки с 11,91 секунды до 4,68 секунды. Это приложение на 90 % меньше, чем скомпилированное приложение для Android (источник).

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

См. также

MDN:

Википедия:

Блог:

YouTube:

Статистика:

  • Last updated on