Возможности, Возможности

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

Вы можете использовать «Что может сделать Интернет сегодня», чтобы узнать, что возможно на каждой платформе. Для отдельных API или возможностей вы можете использовать Can I Use или таблицы совместимости браузеров на MDN .

Всегда проверяйте поддержку функций

Первая буква в PWA означает «прогрессивный» и происходит от идеи прогрессивного улучшения и обнаружения функций . Не следует ожидать, что ваше приложение будет работать одинаково на всех устройствах. Разнообразие контекстов и возможностей на миллиардах устройств в разных странах делает PWA отличной платформой благодаря своей прогрессивности.

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

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

Мощная сеть

Интернет сегодня очень мощный. Например:

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

Расширение возможностей вашего PWA

Давайте разделим API-интерфейсы возможностей PWA на четыре группы:

  • Зеленый: API доступны в каждом браузере на любой платформе, если это технически возможно. Большинство из них поставляются уже много лет, считаются зрелыми, и вы можете ими смело пользоваться. Примером API из этой группы является API геолокации.
  • Светло-зеленый: API доступны только в некоторых браузерах. Учитывая отсутствие поддержки на некоторых платформах, они доработаны в рамках поддерживаемой подгруппы браузеров, так что вы можете уверенно использовать эту возможность на них. Пример API из этой группы — WebUSB.
  • Желтый: экспериментальные API. Эти API еще не доработаны; они доступны только в некоторых браузерах, а также в рамках тестов или пробных версий. Мы немного рассказали об этих возможностях в экспериментальной главе .
  • Красный: группа API, которые нельзя использовать в PWA, и планы по их добавлению пока носят долгосрочный характер. Пример API из этой группы — геозоны.

Зеленые возможности

Ниже приведен список наиболее важных возможностей, которые вы можете использовать в своем PWA.

Основы

  • Кэширование файлов локально с помощью Cache API, как показано в главе «Кэширование» .
  • Выполнение задач в потоках с использованием веб-воркеров, как мы видели в главе «Управление сложностью» .
  • Управление сетевыми запросами с помощью различных стратегий в сервис-воркере, как показано в главе «Служебные работники» .
  • 2D Canvas для рендеринга 2D-графики на экране с помощью Canvas API .
  • Высокопроизводительный 2D и 3D Canvas , или WebGL , для рендеринга 3D-графики.
  • WebAssembly или WASM для выполнения низкоуровневого скомпилированного кода для повышения производительности.
  • Связь в реальном времени с использованием WebRTC API .
  • API-интерфейсы веб-производительности для измерения и улучшения качества работы. Дополнительную информацию см. в руководстве Performance API .
  • Храните данные локально с помощью IndexedDB и управления хранилищем для запроса квоты и запроса постоянного хранилища, как показано в главе «Автономные данные» .
  • Низкоуровневый звук благодаря API веб-аудио .
  • Обнаружение переднего плана с помощью API видимости страницы .
  • Сетевая связь с использованием Fetch API и WebSocket API .

Аппаратное обеспечение и датчики

  • Геймпады для чтения информации, поступающей со стандартных геймпадов и джойстиков, подключенных к устройству с помощью Gamepad API .
  • Биометрическая аутентификация (например, распознавание лица или отпечатка пальца) с использованием веб-аутентификации или WebAuthn .

Интеграция операционной системы

  • Синтез речи и распознавание голоса используют установленные на платформе голоса, чтобы разговаривать с пользователем и распознавать, что он говорит, благодаря API Web Speech .
  • Делитесь контентом из вашего PWA с другими приложениями и местами на устройстве благодаря API Web Share , как мы увидим в главе «Интеграция ОС» .
  • Доступ к буферу обмена для сохранения и извлечения содержимого из буфера обмена в различных форматах благодаря API буфера обмена , как я показал в главе «Интеграция с ОС» .
  • Управляйте учетными данными и паролями пользователей с помощью API управления учетными данными .
  • Включите воспроизведение видео «картинка в картинке» в ОС с помощью API «картинка в картинке» .
  • Рендеринг контента в полноэкранном режиме благодаря Fullscreen API , как я показал в главе Windows .

Светло-зеленые возможности

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

Основы

  • WebGL 2.0 — новая версия спецификации WebGL, соответствующая OpenGL 3.0.
  • Кодеки , низкоуровневый доступ к отдельным кадрам видеопотока и фрагментам аудио; полезно для веб-приложений, которым требуется полный контроль над способом обработки мультимедиа через API веб-кодеков .

Аппаратное обеспечение и датчики

  • Ambient Light считывает текущий уровень освещенности или освещенность окружающего света вокруг устройства в дополнение к API датчиков .
  • Вибрация дает пользователю тактильную обратную связь, когда что-то происходит, если устройство ее поддерживает, через Vibration API .
  • Носитель записи захватывает данные, сгенерированные объектом MediaStream или HTMLMediaElement (например, тегом <video> ), для анализа, обработки или сохранения на диск благодаря API MediaRecorder .
  • Применение блокировки пробуждения к экрану предотвращает затемнение устройства или блокировку экрана, когда PWA необходимо продолжать работу, с помощью API Screen Wake Lock .
  • Виртуальная реальность позволяет вам использовать гарнитуру и другие устройства в вашем PWA благодаря API устройств WebXR .
  • Дополненная реальность может быть достигнута в вашем PWA разными способами, например, с помощью API устройства WebXR или приложения Safari Quick Look для контента AR .
  • Обнаруживайте неактивных пользователей с помощью API Idle Detection .
  • Блокировка ориентации фиксирует книжную или альбомную ориентацию, когда PWA находится на экране, благодаря API ориентации экрана или свойству orientation манифеста веб-приложения для установленных приложений.
  • Демонстрируйте контент на проекторах и дополнительных дисплеях благодаря Presentation API .
  • Заблокируйте указатель , чтобы получать от указателей (мышей, трекпадов и указателей) информацию о смещении вместо значений положения (что полезно для некоторых игр) благодаря API Pointer Lock .

Интеграция операционной системы

Ресурсы