Перейти к содержанию

Возможности

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

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

Вы можете использовать What Web Can Do Today, чтобы узнать, что возможно на каждой платформе. Для получения информации об отдельных API или возможностях можно использовать Can I Use или таблицы совместимости браузеров на MDN.

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

Первая буква в слове PWA означает progressive (прогрессивный), и это происходит от идеи progressive enhancement и feature detection. Не стоит ожидать, что ваше приложение будет работать одинаково на всех устройствах. Разнообразие контекстов и возможностей на миллиардах устройств в разных странах делает PWA отличной платформой, благодаря их прогрессивности.

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

Перед использованием необходимо проверить с помощью JavaScript, существует ли API, или запросить API, доступен ли сервис на данном устройстве.

Мощный веб

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

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

Несмотря на то, что в Интернете существует множество возможностей, в них все еще есть пробелы, и именно здесь на помощь приходит проект web capabilities project. Проект описывает группу API-интерфейсов для расширения возможностей Интернета. Мы обсудили этот проект и то, как вы можете принять в нем участие, в главе Experimental chapter.

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

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

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

Некоторые возможности требуют разрешения пользователя: в большинстве случаев диалог разрешения появляется при первом использовании. Сегодня можно запросить одно разрешение за раз, но в будущем на некоторых платформах можно будет запрашивать множество разрешений в одном диалоге, используя Permissions API.

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

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

Основы

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

Оборудование и датчики

  • Геолокация получает данные о местоположении пользователя через различных провайдеров, таких как спутник или Wi-Fi, через интерфейс Geolocation API.
  • Камера и микрофон получают медиапотоки от камер и микрофонов с помощью интерфейса Media devices.
  • Датчики собирают информацию в реальном времени с акселерометра, гироскопа, магнитометра и других устройств с помощью Sensors API или более старых интерфейсов, таких как DeviceMotionEvent и DeviceOrientationEvent. В Safari для их использования необходимо использовать запрос диалога нестандартных разрешений.
  • Тач и указатель получают доступ к информации обо всех касаниях и нажатиях на указатель пальцем, мышью, трекпадом или пером, благодаря событиям Pointer events и Touch events.

Safari также поддерживает Gesture events, нестандартный API для обнаружения жестов вращения и щипка, который следует использовать с осторожностью.

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

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

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

Вы можете интегрировать свой PWA со многими приложениями для конкретной платформы, используя схемы URI и универсальные URL, как я показал в главе Интеграция с ОС.

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

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

Основы

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

Оборудование и датчики

Доступ к аппаратным устройствам через Интернет предлагает полное руководство по пониманию того, как различные аппаратные API взаимодействуют друг с другом.

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

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

  • Чтение и запись файлов на устройстве благодаря File System Access API, как вы видели в главе Интеграция ОС.
  • Получать содержимое из других приложений благодаря Web Share Target, как было показано в главе Интеграция ОС.
  • Получение контактных данных с помощью Contact Picker API, как показано в главе Интеграция с ОС.
  • Синхронизация в фоновом режиме, пока PWA не используется, благодаря Background Synchronization API.
  • Планирование задач в то время, когда PWA не используется, благодаря Web Periodic Background Synchronization API.
  • Отправка уведомлений с помощью Web Push и Web Notifications API.
  • Передавать файлы в фоновом режиме, пока пользователь не использует PWA, благодаря Background Fetch API.
  • Интегрируйте воспроизведение мультимедиа с операционной системой с помощью Media Session API.
  • Управление платежами в PWA благодаря Payment Request API. Apple также предлагает библиотеку Apple Pay JS поверх Payment Request API.
  • Запрашивать состояние сети, например тип соединения (4G, WiFi) и флаг экономии данных, можно с помощью Network Information API.
  • Захват экрана пользователя для создания скринкастов или общего доступа к экрану с помощью Screen Capture API.
  • Обнаружение фигур с помощью аппаратно-ускоренных детекторов на устройстве, включая штрихкоды (человеческие лица и текстовый OCR пока находятся в разработке) с помощью Shape Detection API.
  • Запрос памяти устройства с помощью интерфейса Device Memory interface.
  • Одноразовые пароли через SMS позволяют автоматически получать код через SMS, отправленный с вашего сервера, используя WebOTP API. В Safari реализовано подмножество решений на основе элемента <input>. Подробнее об этом можно прочитать в WebKit's blog.
  • Управление виртуальной клавиатурой, отображаемой на экранах мобильных устройств, осуществляется с помощью Virtual Keyboard API.

Если вы публикуете PWA в некоторых каталогах и магазинах приложений, то можете получить доступ к дополнительным API. Например, если опубликовать PWA в Google Play с помощью Trusted Web Activity, то можно использовать Digital Goods API для взимания платы с пользователей за подписку и премиум-контент.

Если у вас есть законный сценарий использования, который невозможно реализовать с помощью существующего набора API, вы можете отправить запрос на анализ сценария использования для возможного будущего веб-интерфейса, как мы увидим в главе Experimental chapter.

Ресурсы

Источник — Capabilities

Комментарии