Хотя некоторые возможности PWA широко известны, например, API уведомлений , позволяющий веб-приложению получать и публиковать уведомления платформы, в интернете появляется множество новых и перспективных функций, которые значительно расширят возможности ваших приложений. Проект Chromium Web Capabilities , также известный как Project Fugu 🐡, направлен на внедрение новых, мощных веб-стандартов, сохраняя при этом уникальные особенности интернета: ориентированную на пользователя безопасность, простоту использования и кроссплатформенную совместимость.
Преодоление разрыва между приложениями и приложениями
Большинство этих возможностей направлены на преодоление разрыва между традиционными настольными или мобильными приложениями и веб-приложениями. Первые основные функции, которые были реализованы, позволяют веб-приложениям получать доступ к средствам выбора контактов и функциям обмена данными платформы, а установленным PWA — регистрироваться в качестве целевого объекта для обмена данными на платформе и отображать значки-уведомления , и это лишь некоторые примеры .
Каждая функция проходит обширный процесс стандартизации с целью получения отзывов от сообщества, которые помогают формировать API и гарантировать, что окончательный дизайн будет безопасным, конфиденциальным и заслуживающим доверия. Новые функции отслеживаются в открытом трекере и могут быть разделены на пять категорий:
ОТПРАВЛЕННЫЙ
Доступно для использования в последней стабильной версии Chrome. Может надежно использоваться при условии корректного определения его функциональности.
В ИСКЕ ПРОИСХОЖДЕНИЯ
Доступна в виде пробной версии Chrome Origin (OT), позволяющей команде Chrome проверить экспериментальные функции и API в реальных условиях и предоставить обратную связь об удобстве использования и эффективности API. Пробные версии являются добровольными и позволяют вам тестировать бета-версию этой функциональности с вашими пользователями без необходимости включать какие-либо специальные параметры в их браузере. API могут измениться после пробной версии, и гарантируется, что пробные версии будут недоступны в течение определенного периода времени до запуска, поэтому их не следует рассматривать как механизм раннего запуска новых API.
В ПРОЦЕССЕ РАЗРАБОТКИ
Доступно через флаг в Chrome. Эти API являются экспериментальными и все еще находятся в активной разработке. Они не готовы к использованию в производственной среде, и существует большая вероятность наличия ошибок, а также изменений в API. Хотя разработчики могут использовать это время для самостоятельного тестирования экспериментальных функций, им не следует рекомендовать пользователям включать флаги для использования этих функций.
НАЧАЛО
Разработка началась, но работоспособного API пока нет.
НА РАССМОТРЕ
API, к которым пользователи проявили интерес, но реализация которых еще не началась. Если работа над API еще не начата, пожалуйста, отметьте его звездочкой или добавьте свои варианты использования в соответствующую задачу, чтобы помочь команде Chromium определить приоритетность.
Улучшение вашего PWA
При разработке вашего PWA рассмотрите возможность внедрения следующих API и лучших практик, чтобы значительно улучшить пользовательский опыт. В зависимости от общего сценария использования, вашему приложению может быть полезен один или несколько API для улучшения общего пользовательского опыта. API, отмеченные 🔮, находятся на стадии пробного запуска, отмеченные 🚩 — на стадии пробного запуска для разработчиков, отмеченные 📱 — в настоящее время стабильны на мобильных устройствах, а их реализация на настольных компьютерах уже началась; любые другие упомянутые API также являются стабильными (хотя могут быть недоступны на всех платформах). В список включены только API, доступные в текущих стабильных, бета- (отмечены β ) или канареечных (отмечены α ) версиях Chrome; ожидайте, что этот список будет регулярно обновляться, чтобы отражать выпуск новых API.
установка приложения
Если вы хотите, чтобы ваше веб-приложение было доступно наряду с другими установленными приложениями, например, на панели задач, в панели запуска, на рабочем столе и в переключателе приложений, рассмотрите возможность реализации следующих API , чтобы ваше PWA можно было установить . При желании можно воспользоваться этим практическим заданием .
- Манифест веб-приложения — предоставляет браузеру и операционной системе информацию о вашем веб-приложении, например, название, логотип, URL-адрес для запуска приложения и способ отображения вашего веб-приложения.
- API для Service Workers и Cache Storage — позволяет вашему веб-приложению создавать прокси-сервер и управлять обработкой кэша браузера. Для установки приложения необходим Service Worker, который реагирует на событие fetch браузера и может отвечать на запрос fetch для начального URL, указанного в манифесте веб-приложения, с содержимым в автономном режиме.
- Запуск при входе в систему 🚩β - Позволяет настроить ваш PWA таким образом, чтобы он запускался автоматически при входе пользователя в систему.
- Ярлыки значков приложений — Создавайте ярлыки для определенных URL-адресов в вашем веб-приложении (например, для начала чата, загрузки фотографии и т. д.) из контекстного меню значка установленного приложения (например, удерживание на мобильных устройствах, щелчок правой кнопкой мыши на компьютерах) на поддерживаемых платформах.
- getInstalledRelatedApps — позволяет вашему веб-приложению проверить, установлено ли уже ваше PWA, приложение для Android или приложение для Windows (UWP).
Адаптируемый и доступный
Если вы хотите, чтобы ваше веб-приложение было удобно для пользователей с различными устройствами и различными физическими и/или психическими потребностями, вам следует рассмотреть возможность реализации следующего:
- Адаптивный дизайн — убедитесь, что ваше веб-приложение обеспечивает удобство использования, или, по крайней мере, корректную работу, на экранах от маленьких до больших размеров, чтобы пользователи разных устройств и с разным расположением окон могли использовать ваше приложение.
- Рекомендации WCAG 2.0 — Убедитесь, что ваше веб-приложение доступно для использования людьми с различными физическими и умственными способностями, а не только нейротипичными и здоровыми людьми. См. также рекомендации правительства Великобритании по проектированию с учетом требований доступности .
Монетизация и распространение
- Веб-платежи — гибкий, стандартный интерфейс для онлайн-платежей, предназначенный для работы в любом браузере или на любом устройстве и с любым поставщиком платежных услуг.
- API цифровых товаров 🔮 — гибкий стандартный интерфейс для запросов и управления внутриигровыми покупками из веб-приложений, включая поддержку распространенных типов покупок, таких как разовые покупки, повторяющиеся покупки (например, внутриигровые самоцветы/валюта) и подписки. Работает совместно с веб-платежами.
- Trusted Web Activity — Создайте Android-приложение для вашего PWA, чтобы оно было доступно для загрузки в совместимых магазинах, например, в Google Play.
доступ к буферу обмена
- Асинхронный буфер обмена — чтение и запись текста и изображений в буфер обмена пользователя, а также отслеживание событий копирования и вставки от пользователя.
Уведомления
Если вашему веб-приложению необходимо уведомлять пользователей, например, если это чат-приложение или приложение для фонового кодирования, вам может быть полезно реализовать следующие API:
- Веб-push-уведомления — после того, как пользователь дал согласие, ваше веб-приложение разрешит ему отправлять push-уведомления.
- API для создания значков — позволяет установленному веб-приложению устанавливать общесистемный значок на иконке приложения, при необходимости добавляя число.
- Триггеры уведомлений 🔮 — Отправка уведомлений пользователям при выполнении определенного условия, например, по времени или местоположению (например, уведомления о событиях календаря).
Обмен намерениями и обработка протокола
- Регистрация протокола URL 🚩α - Позволяет веб-приложениям регистрироваться в качестве обработчиков пользовательских протоколов/схем URL с помощью манифеста установки.
- Web Share — используйте встроенный пользовательский интерфейс общего доступа на поддерживаемых устройствах для обмена URL-адресами, текстом и файлами с другими установленными приложениями на их устройстве. Ваше приложение устанавливать не обязательно.
- Web Share Target — Сделайте так, чтобы ваше установленное PWA было доступно во встроенном системном интерфейсе обмена данными на поддерживаемых устройствах, позволяя пользователям обмениваться текстом и файлами с вашим приложением из других приложений.
Открытие и сохранение файлов
- API для обработки файлов 🚩 — Настройте установленное веб-приложение так, чтобы оно регистрировало в операционной системе возможность обработки (чтения/потоковой передачи/редактирования) файлов с заданными MIME-типами и/или расширениями, что позволит, например, добавить их в список «Открыть с помощью приложения…» в контекстном меню.
- API доступа к файловой системе — надежный доступ к файловой системе пользователя в течение каждой сессии, позволяющий осуществлять следующие взаимодействия (в зависимости от потребностей вашего приложения):
- Чтение файлов из локальной файловой системы — отображает окно выбора файлов и позволяет пользователю выбрать один или, при необходимости, несколько файлов для открытия, включая ограничение разрешенных типов файлов по MIME-типу и расширению.
- Сохранение изменений в открытом файле — сохранение изменений в файле, открытом с помощью FSA, напрямую, без запроса у пользователя места сохранения файла или загрузки его копии.
- Создание нового файла в локальной файловой системе — Позволяет пользователю создать новый файл, при желании с расширением по умолчанию, в своей локальной файловой системе, к сохранению которого ваше приложение получит доступ.
- Недавно открытые файлы — обработчики файлов, созданные с помощью FSA, могут храниться в IndexedDB, что позволяет отображать список недавно использованных файлов между сеансами пользователя (хотя права на редактирование по-прежнему не сохраняются между сеансами).
- Чтение, запись и манипулирование каталогом — позвольте пользователю выбрать каталог в своей локальной файловой системе, содержимое которого ваше приложение сможет читать, создавать, читать и удалять файлы и подкаталоги, а также определять относительные пути к файлам внутри него.
- Потоки сжатия — сжатие или распаковка с использованием алгоритмов сжатия gzip и deflate .
Управление окнами
- API полноэкранного режима — позволяет пользователю сделать так, чтобы элемент в вашем веб-приложении, например видео, занимал весь экран.
- API для размещения окон на разных экранах 🔮 — позволяет вашему веб-приложению получать информацию о подключенных дисплеях и позиционировать окна относительно этих дисплеев, что обеспечивает возможность создания многооконных веб-приложений для работы на нескольких дисплеях.
- Режим отображения приложений во вкладках 🚩 — Позволяет отображать установленное веб-приложение в одной или нескольких вкладках, а не только в одном окне.
Более глубокая интеграция с ОС
- API локальных шрифтов 🔮 — позволяет вашему веб-приложению получать список локально установленных шрифтов и запрашивать низкоуровневый (байтовый) доступ к контейнеру SFNT, включающий полные данные шрифта, что позволяет вашему приложению настраивать отображение локально установленных шрифтов.
- Функция Wake Lock позволяет вашему веб-приложению предотвращать переход экрана в спящий режим, что дает возможность выполнять длительные задачи без риска прерывания (например, перекодирование файлов или поддержание работы рецепта во время приготовления пищи).
- Обнаружение бездействия 🔮 — позволяет вашему веб-приложению определять, когда пользователь не использует свое устройство активно.
Расширенная поддержка работы в автономном режиме.
Если вы хотите, чтобы ваше веб-приложение работало еще лучше в автономном режиме, вам следует рассмотреть возможность внедрения следующих API:
- Фоновая синхронизация — в автономном режиме запросы, требующие подключения к сети, ставятся в очередь, а затем синхронизируются в фоновом режиме, когда сеть становится доступной, вместо того, чтобы вообще не обрабатывать запросы в автономном режиме. Например, это позволяет отправлять сообщения или синхронизировать пошаговые изменения в документе после восстановления подключения к сети.
- Периодическая фоновая синхронизация — разрешите вашему установленному и часто используемому веб-приложению периодически запускать сервис-воркер по истечении минимального промежутка времени, например, для обновления кэша, чтобы контент был актуальным к моменту открытия приложения пользователем.
- API индексирования контента — позволяет вашему веб-приложению сообщать браузеру, какой контент доступен в автономном режиме, чтобы браузер мог отображать его пользователям.
- Фоновая загрузка — позволяет выполнять длительные фоновые операции загрузки, такие как скачивание фильмов или загрузка видео и изображений, без риска завершения работы сервисного работника.
Потоковая передача, кодирование и декодирование мультимедиа
Если ваше веб-приложение воспроизводит медиафайлы, такие как видео или аудиофайлы, вам может быть полезно реализовать следующие API:
- Адаптивная потоковая передача — позволяет видеопотокам переключаться между битрейтами в зависимости от производительности сети.
- «Картинка в картинке» — позволяет пользователю выводить видео из вашего веб-приложения в постоянно открытое окно, которое затем можно перемещать и изменять размер независимо друг от друга.
- API медиасессий — позволяет пользователю управлять воспроизведением мультимедиа в вашем веб-приложении, используя аппаратные средства и программные функции операционной системы (например, кнопки воспроизведения/паузы/остановки на клавиатуре или на экранах блокировки), а также управлять уведомлениями о воспроизведении на уровне ОС (например, название, исполнитель, альбом и обложка).
- API Chromecast — позволяет пользователю транслировать медиаконтент на доступный приемник Chromecast, например, для воспроизведения видео из вашего веб-приложения на своем телевизоре.
- Веб-кодеки 🔮 — доступ к встроенным аппаратным и программным медиакодекам и декодерам, полезным как для сценариев использования в реальном времени, таких как потоковая передача с низкой задержкой, так и для кодирования, декодирования и перекодирования файлов.
Расширенная поддержка ввода
- События указателя — реагируйте на события касания, стилуса и мыши с помощью единого API, предоставляя пользователям больше возможностей ввода. См. также рекомендации по созданию удобных для сенсорного управления пользовательских интерфейсов и элементов управления .
- API для геймпадов — позволяет вашему веб-приложению реагировать на ввод с распространенных геймпадов.
- Web HID 🚩 — позволяет вашему веб-приложению получать доступ к нестандартным устройствам ввода (например, к пользовательским контроллерам).
Расширенная поддержка периферийных устройств
- Web USB — позволяет вашему веб-приложению получать доступ к нестандартным USB-устройствам (например, клавиатурам и мышам) из вашего приложения.
- Serial API 🔮 — Добавляет API для связи с аппаратными устройствами через физический или виртуальный последовательный порт.
Ваш контрольный список для PWA
Готовы начать улучшать ваше PWA с помощью этих новых мощных API? Выберите один из вариантов использования ниже, чтобы увидеть рекомендуемый набор API для использования, или составьте свой собственный контрольный список и постепенно выполняйте его!