Прогрессивные веб-приложения могут делать больше, чем просто отображать контент на экране или подключаться к веб-сервисам. 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 .
Аппаратное обеспечение и датчики
- Геолокация получает местоположение пользователя через разных поставщиков, таких как спутник или Wi-Fi, через API геолокации .
- Камера и микрофон получают медиапотоки от камер и микрофонов с помощью интерфейса мультимедийных устройств .
- Датчики собирают информацию в реальном времени от акселерометра, гироскопа, магнитометра и других устройств с помощью API датчиков или более старых интерфейсов, таких как DeviceMotionEvent и DeviceOrientationEvent . В Safari вам необходимо использовать нестандартный запрос разрешения в диалоговом окне, чтобы использовать их.
- Доступ к информации касания и указателя обо всех касаниях и щелчках указателя, выполняемых пальцем, мышью, трекпадом или пером, благодаря событиям указателя и событиям касания .
- Геймпады для чтения информации, поступающей со стандартных геймпадов и джойстиков, подключенных к устройству с помощью 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 веб-кодеков .
Аппаратное обеспечение и датчики
- Расширенные элементы управления камерой для доступа к элементам управления панорамированием, наклоном и масштабированием в дополнение к API мультимедиа.
- Bluetooth LE для связи с Bluetooth-устройствами с низким энергопотреблением рядом с пользователем с помощью Web Bluetooth API . Для получения дополнительной информации ознакомьтесь с информацией об общении с устройствами Bluetooth через JavaScript .
- Связь ближнего радиуса действия для обмена данными через NFC с помощью сообщений облегченного формата обмена данными NFC (NDEF), таких как метка или карта NFC, с использованием API WebNFC . Вы также можете прочитать статью «Взаимодействие с устройствами NFC в Chrome для Android» для получения более подробной информации.
Последовательное периферийное устройство для низкоуровневого доступа к устройствам, подключенным к устройству с помощью последовательного порта, USB или последовательного порта через Bluetooth с помощью Web Serial WPI . По следующей ссылке вы можете узнать, как читать и писать в последовательный порт .
Доступ к USB-устройствам для связи с устройствами, подключенными через USB WebUSB API . Для получения дополнительной информации проверьте доступ к USB-устройствам в Интернете .
Устройства пользовательского интерфейса позволяют вашему PWA взаимодействовать с любыми устройствами, подготовленными для необычного взаимодействия с человеком, используя WebHID API . Ознакомьтесь с этим руководством по подключению к необычным устройствам HID .
- 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 .
Интеграция операционной системы
- Чтение и запись файлов на устройстве благодаря API доступа к файловой системе , как вы видели в главе «Интеграция ОС» .
- Получайте контент из других приложений благодаря Web Share Target , как я показал в главе об интеграции ОС .
- Получите контактные данные с помощью API Contact Picker , как показано в главе «Интеграция с ОС» .
- Синхронизация в фоновом режиме, пока PWA не используется, благодаря API фоновой синхронизации .
- Планирование задач , когда PWA не используется, благодаря API веб-периодической фоновой синхронизации .
- Отправляйте уведомления с помощью API Web Push и Web Notifications .
- Передавайте файлы в фоновом режиме , пока пользователь не использует ваше PWA, благодаря API фоновой выборки .
- Интегрируйте воспроизведение мультимедиа с операционной системой с помощью API сеанса мультимедиа .
- Управляйте платежами в PWA благодаря API запроса платежей . Apple также предлагает библиотеку Apple Pay JS поверх API запроса платежа.
- Запросите состояние сети , например тип подключения (4G, Wi-Fi) и флаг сохранения данных, с помощью API сетевой информации .
- Сделайте снимок экрана пользователя для скринкаста или совместного использования экрана с помощью API захвата экрана .
- Обнаруживайте фигуры с помощью встроенных в устройство детекторов с аппаратным ускорением, включая штрих-коды (человеческие лица и распознавание текста все еще находятся в разработке), используя API-интерфейс Shape Detection API .
- Опросите память устройства с помощью интерфейса памяти устройства .
- Одноразовые пароли по SMS позволяют вам автоматически получать код по SMS, отправленный с вашего сервера с использованием API WebOTP . Safari реализует подмножество решений на основе элемента
<input>
. Подробнее об этом читайте в блоге WebKit . - Управляйте виртуальной клавиатурой , которая появляется на экранах мобильных устройств, с помощью Virtual Keyboard API .