Особенности Qt WebEngine

Qt WebEngine поддерживает следующие функции:

• Аудио- и видеокодеки
• Инструменты разработчика Chromium
• Сертификаты клиента
• Пользовательские схемы
• Перетаскивание
• Полный экран
• DRM HTML5
• Геолокация HTML5
• Протокол HTTP/2
• Встроенные диалоговые окна
• API плагинов Pepper
• Просмотр PDF-файлов
• API жизненного цикла страницы
• Печать в PDF
• Модели процессов
• Проверка правописания
• Взаимодействие с сенсорным экраном
• Просмотр исходного кода
• WebRTC
• Веб-уведомления
• Обработка значков закладок

Аудио- и видеокодеки

Qt WebEngine поддерживает формат файлов MPEG-4 Part 14 (MP4) только в том случае, если были включены необходимые проприетарные аудио- и видеокодеки, такие как H.264 и MPEG Layer-3 (MP3). Проприетарные кодеки можно включить, передав следующую опцию инструменту configure при конфигурации Qt:

-webengine-proprietary-codecs

Например, следующая опция может быть передана при конфигурации Qt для сборки на верхнем уровне:

configure -webengine-proprietary-codecs

Дополнительную информацию см. в разделе Опции конфигурации Qt.

При использовании cmake для сборки только модуля Qt WebEngine можно использовать следующую команду для конфигурации и сборки (в данном примере исходный код Qt WebEngine расположен в C:\qt\qtwebengine):

qt-configure-module C:\qt\qtwebengine -webengine-proprietary-codecs
cmake --build . --parallel

FFmpeg — кроссплатформенное решение для записи, преобразования и потоковой передачи аудио и видео. Он может быть настроен для работы с несколькими кодеками, что вызывает вопросы лицензирования при распространении с библиотеками кодеков. Для некоторых кодеков доступны открытые реализации, такие как OpenH264.

Инструменты разработчика Chromium

Инструменты разработчика Chromium позволяют инспектировать и отлаживать проблемы с макетом и производительностью любого веб-контента.

Эту функцию можно протестировать, запустив приложение Qt WebEngine с опцией командной строки --remote-debugging-port=[your-port] или установив переменную окружения QTWEBENGINE_REMOTE_DEBUGGING, а затем используя браузер на основе Chromium (например, Простой браузер или Браузер Nano) для подключения к http://localhost:[your-port].

Страница инструментов разработчика Chromium также может быть показана внутри приложения. Для этого можно вызвать либо QWebEnginePage::setInspectedPage() для страницы, подлежащей инспектированию, что неявно загружает инструменты разработчика на страницу this , либо QWebEnginePage::setDevToolsPage() для того, чтобы страницу this можно было инспектировать.

Соответствующие свойства QML — WebEngineView.devToolsView и WebEngineView.inspectedView.

Дополнительную информацию см. в разделе Отладка и профилирование Qt WebEngine.

Сертификаты клиента

Некоторые веб-серверы, особенно многие сайты интрасети, требуют, чтобы клиент аутентифицировал себя с помощью сертификата, называемого сертификатом клиента. Qt WebEngine будет читать сертификаты клиента, установленные в системных настройках macOS и Windows, а на Linux — установленные в базе данных NSS. Сертификаты могут быть установлены в базе данных NSS с помощью инструмента pk12util.

По умолчанию Qt WebEngine не будет предлагать серверам сертификаты клиента, так как это однозначно идентифицирует пользователя и может нарушить ожидания конфиденциальности.

Чтобы активировать поддержку сертификатов клиента, приложение должно обрабатывать сигналы QWebEnginePage::selectClientCertificate или WebEngineView.selectClientCertificate и выбрать один из предложенных сертификатов. Для приложений, которые могут переходить по ссылкам на недоверенные веб-сайты, рекомендуется всегда предоставлять пользователю выбор перед однозначной идентификацией на удаленном сервере.

Пользовательские схемы

Qt WebEngine позволяет приложению определять свои собственные пользовательские схемы URL с специализированными политиками безопасности и механизмами транспорта.

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

Дополнительную информацию см. в разделах QWebEngineUrlScheme и QWebEngineUrlSchemeHandler.

Перетаскивание

Qt WebEngine поддерживает перетаскивание HTML5.

Эту функцию можно проверить, открыв демонстрацию перетаскивания HTML5, такую как HTML5 Demos - Перетаскивание, HTML5 Demos - Простое перетаскивание или HTML5 Demos - Перетаскивание с автоматической загрузкой, в Простом браузере или Браузере Nano.

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

Поддержка этой функции была добавлена в Qt 5.7.0.

Полный экран

Qt WebEngine поддерживает просмотр веб-контента в полноэкранном режиме. Дополнительную информацию см. в разделах WebEngineSettings.fullscreenSupportEnabled, WebEngineView.fullScreenRequested, QWebEngineSettings::FullScreenSupportEnabled и QWebEnginePage::fullScreenRequested.

Эту функцию можно проверить, воспроизведя видео с YouTube в Проигрывателе видео или Браузере Nano и нажав значок полноэкранного режима, чтобы перейти в полноэкранный режим.

Поддержка этой функции была добавлена в Qt 5.6.0.

DRM HTML5

Qt WebEngine поддерживает просмотр защищённых DRM видео, если плагин Widevine CDM установлен. Плагин CDM является заменой плагинам на основе Flash для отображения контента, защищённого DRM. Он предоставляется только в двоичном формате, поэтому может скрывать подробности реализации декодирования DRM. Его можно получить от сторонних разработчиков или из установки Google Chrome.

Qt WebEngine при запуске ищет плагин Widevine CDM в известных местах, таких как каталог установки Google Chrome по умолчанию или пути, специфичные для дистрибутива Linux. Однако расположение плагина также можно передать с помощью QTWEBENGINE_CHROMIUM_FLAGS с помощью widevine-path.

В Windows:

set QTWEBENGINE_CHROMIUM_FLAGS=--widevine-path="C:/some path/widevinecdm.dll"

В Linux:

export QTWEBENGINE_CHROMIUM_FLAGS=--widevine-path="/some path/libwidevinecdm.so"

В macOS:

export QTWEBENGINE_CHROMIUM_FLAGS=--widevine-path="/some path/libwidevinecdm.dylib"

Формат видео, наиболее часто используемый службами DRM, H.264, требует проприетарных аудио- и видеокодеков. Дополнительную информацию о включении кодеков см. в разделе Аудио- и видеокодеки.

Эту функцию можно проверить, воспроизведя видео в Простом браузере или Браузере Nano с сайтов castLabs, Swank Motion Pictures, Inc. или Bitmovin Player.

Поддержка этой функции была добавлена в Qt 5.7.0.

Геолокация HTML5

Qt WebEngine поддерживает JavaScript API геолокации с Qt Location в качестве бэкенда. Приложение должно явно разрешить функцию, используя QWebEnginePage::Geolocation или WebEngineView.Feature.

Если Qt Location был скомпилирован до Qt WebEngine, то эту функцию можно проверить, используя Карты и разрешение поиска текущего местоположения пользователя. Обратите внимание, что в Windows необходимо подключить внешний GPS-приёмник к приложению. Дополнительную информацию см. в разделе Qt Positioning.

Поддержка этой функции была добавлена в Qt 5.5.0.

Протокол HTTP/2

Qt WebEngine поддерживает реализацию Chromium протокола HTTP/2.

Эту функцию можно проверить, открыв демонстрацию HTTP/2, такую как Akamai HTTP/2 Demo, в Простом браузере или Браузере Nano.

Встроенные диалоговые окна

Веб-страница может запросить диалоговые окна для следующих функций:

• Ввод учетных данных пользователя для аутентификации HTTP и прокси
• Отображение JavaScript alert, confirmation и prompt
• Выбор цветов
• Выбор файлов
• Отображение сообщений об ошибках валидации формы

Qt WebEngine предоставляет стандартные диалоговые окна для этих функций. В приложениях на основе виджетов стандартные диалоговые окна основаны на QDialog, а в приложениях Qt Quick они могут быть основаны на Qt Quick Controls 1 или Qt Quick Controls 2 (с Qt 5.8). Последние используются только на платформах eglfs.

Для явного принудительного использования диалоговых окон на основе Qt Quick Controls 1 или Qt Quick Controls 2 установите переменную окружения QTWEBENGINE_DIALOG_SET в QtQuickControls1 или QtQuickControls2.

Диалоги Qt WebEngine Widgets могут быть настраиваемыми путём переопределения функций QWebEnginePage::chooseFiles(), QWebEnginePage::javaScriptAlert(), QWebEnginePage::javaScriptConfirm() и QWebEnginePage::javaScriptPrompt().

Начиная с Qt 5.8, диалоги Qt Quick могут быть настроены путём подключения к сигналам WebEngineView::authenticationDialogRequested(), WebEngineView::javaScriptDialogRequested(), WebEngineView::colorDialogRequested(), WebEngineView::fileDialogRequested() и WebEngineView::formValidationMessageRequested(). Пример см. в Примере настраиваемых диалогов Qt Quick для Qt WebEngine.

API плагинов Pepper

Qt WebEngine поддерживает загрузку плагинов API плагинов Pepper (PPAPI), если WebEngineSettings::pluginsEnabled или QWebEngineSettings::PluginsEnabled установлено.

Плагины необходимо загружать вручную, используя синтаксис командной строки Chromium с аргументом --register-pepper-plugins. Значение аргумента представляет собой список записей, разделённых запятыми, которые содержат путь к файлу и один или несколько MIME-типов, разделённых точкой с запятой:

<file-path-plugin1>;<mime-type-plugin1>,<file-path-plugin2>;<mime-type1-plugin2>;<mime-type2-plugin2>

Например:

--register-pepper-plugins="libppapi_example.so;application/x-ppapi-example"

MIME-тип важен, так как он определяет, для каких вложений используется плагин.

Поддержка этой функции была добавлена в Qt 5.6.0.

Просмотр PDF-файлов

Qt WebEngine поддерживает просмотр PDF-документов путём перехода к ним. Эта функция использует API расширений Chromium и плагин-просмотрщик PDF для отображения PDF-документов. Ее можно протестировать в Простом браузере или Браузере Nano.

Для использования этой функции необходимо включить загрузку плагинов с помощью QWebEngineSettings::PluginsEnabled или WebEngineSettings::pluginsEnabled.

Функцию можно включить (по умолчанию) или выключить с помощью параметра QWebEngineSettings::PdfViewerEnabled или WebEngineSettings::pdfViewerEnabled.

Поддержка этой функции была добавлена в Qt 5.13.0.

API жизненного цикла страницы

Qt WebEngine поддерживает спецификацию API жизненного цикла страницы, проект расширения HTML-стандарта, позволяющего агентам пользователя снизить потребление ресурсов путём заморозки или удаления фоновых страниц. Функция доступна как в API виджетов, так и в QML-API.

Пример использования QML-API см. в Примере жизненного цикла Qt WebEngine.

Поддержка этой функции была добавлена в Qt 5.14.0.

Обзор состояний жизненного цикла

Каждый элемент WebEngineView (или объект QWebEnginePage) может находиться в одном из трёх состояний жизненного цикла: активном, замороженном или удалённом. Эти состояния, подобно состояниям сна процессора, управляют использованием ресурсов веб-вью.

Активное состояние — это нормальное, без ограничений состояние веб-вью. Все видимые веб-вью всегда находятся в активном состоянии, как и все веб-вью, которые ещё не завершили загрузку. Только невидимые, неактивные веб-вью могут быть переведены в другие состояния жизненного цикла.

Замороженное состояние — это состояние с низким использованием ЦП. В этом состоянии большинство источников задач HTML приостановлены (заморожены), и, как следствие, большинство обработки событий DOM и выполнения JavaScript также приостановлены. Веб-вью должно быть невидимым, чтобы быть замороженным, так как отрисовка в этом состоянии невозможна.

Удалённое состояние — это состояние экстремальной экономии ресурсов. В этом состоянии контекст просмотра веб-вью будет удалён, а соответствующий подпроцесс рендерера будет остановлен. Потребление ЦП и памяти в этом состоянии практически равно нулю. При выходе из этого состояния веб-страница будет автоматически перезагружена. Процесс входа и выхода из состояния удаления похож на сериализацию истории просмотров веб-вью и уничтожение веб-вью, а затем создание нового веб-вью и восстановление его истории.

См. также WebEngineView::LifecycleState. Эквивалентом в API виджетов является QWebEnginePage::LifecycleState.

Свойства lifecycleState и recommendedState

Свойство lifecycleState типа WebEngineView — это свойство чтения и записи, которое управляет текущим состоянием жизненного цикла веб-вью. Это свойство разработано, чтобы свести к минимуму ограничения на то, в какие состояния можно перейти. Например, разрешается замораживать веб-вью, которое в данный момент воспроизводит музыку на заднем плане, останавливая воспроизведение. Для реализации менее агрессивной стратегии экономии ресурсов, которая избегает прерывания видимой пользователю фоновой активности, необходимо использовать свойство recommendedState.

Свойство recommendedState типа WebEngineView — это свойство только для чтения, которое вычисляет безопасное ограничение для свойства lifecycleState, учитывая текущую активность веб-вью. Таким образом, в примере веб-вью, воспроизводящего музыку на заднем плане, рекомендованное состояние будет Active, поскольку более агрессивное состояние остановит воспроизведение. Если приложение хочет избежать прерывания фоновой активности, то следует избегать перевода веб-вью в более агрессивное состояние экономии ресурсов, чем то, которое задано свойством recommendedState.

См. также WebEngineView::lifecycleState и WebEngineView::recommendedState. Эквивалентами в API виджетов являются QWebEnginePage::lifecycleState и QWebEnginePage::recommendedState.

Расширения DOM

Свойство lifecycleState связано со спецификацией API жизненного цикла страницы, которая определяет два новых события DOM, freeze и resume, и добавляет новое Document.wasDiscarded булево свойство. События freeze и resume срабатывают при переходе из состояния Active в Frozen state и наоборот. Свойство Document.wasDiscarded устанавливается в true при переходе из состояния Discarded в Active.

Печать на PDF

Qt WebEngine поддерживает печать веб-страницы в файл PDF. Более подробная информация доступна в QWebEnginePage::printToPdf() и WebEngineView.printToPdf.

Функцию можно протестировать с помощью Html2Pdf.

Поддержка этой функции была добавлена в Qt 5.7.0.

Модели процессов

Qt WebEngine использует несколько процессов ОС для изоляции веб-сайтов друг от друга и от клиентского приложения, улучшая безопасность и надёжность. Поддерживаются следующие модели процессов, или способы разделения веб-сайтов между процессами ОС:

• Процесс на экземпляр сайта
• Процесс на сайт
• Один процесс

Процесс на экземпляр сайта

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

Два веб-страницы считаются принадлежащими одному сайту, если они происходят с одного зарегистрированного доменного имени (например, wikipedia.org) и схемы (например, https). Это похоже на политику одного источника, но поддомены игнорируются. Например, как https://en.wikipedia.org/ так и https://de.wikipedia.org/ будут принадлежать одному сайту.

Экземпляр сайта — это набор веб-страниц, принадлежащих одному сайту. Когда приложение явно загружает URL в Qt WebEngine (например, через QWebEnginePage::setUrl), для страницы создаётся новый экземпляр сайта. Однако, когда пользователь щелкает по ссылкам на одном сайте, существующий экземпляр сайта просто расширяется новыми страницами.

Например, в примере Простой браузер, когда пользователь открывает две вкладки и явно вводит https://en.wikipedia.org/ в строках URL, обе вкладки будут иметь свои отдельные процессы ОС (потому что явное введение URL создаёт новый экземпляр сайта). Однако, когда пользователь затем щелкает средним кликом по ссылкам на одном сайте для открытия дополнительных вкладок, эти новые вкладки будут использовать один и тот же процесс ОС (потому что взаимодействие пользователя расширяет существующий экземпляр сайта).

Процесс на сайт

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

Преимущества этой модели заключаются в снижении потребления памяти, поскольку больше веб-страниц будут использовать один процесс. Недостатки включают снижение безопасности, надёжности и отзывчивости.

Для включения этой модели используйте аргумент командной строки --process-per-site. См. Использование аргументов командной строки.

Один процесс

Только для отладки, режим одного процесса может быть включён с помощью аргумента командной строки --single-process. См. Использование аргументов командной строки и Отладка и профилирование Qt WebEngine.

Проверка орфографии

Qt WebEngine поддерживает интеграцию проверки орфографии в HTML-формы, чтобы пользователи могли отправлять сообщения, проверенные на орфографические ошибки. При нажатии пользователем на подчеркнутое неправильное слово в контекстном меню отображается до четырёх предложений. Выбор одного из них заменит неправильное слово.

Для проверки орфографии требуется словарь. Поддерживаются словари из проекта Hunspell, но они должны быть скомпилированы в специальный двоичный формат. Словарь Hunspell состоит из двух файлов:

• Файл .dic, являющийся словарем, содержащим слова для языка
• Файл .aff, определяющий смысл специальных флагов в словаре

Эти два файла могут быть преобразованы в формат bdic с помощью инструмента qwebengine_convert_dict, поставляемого вместе с Qt. При инициализации проверки орфографии Qt WebEngine попытается загрузить словари bdict и проверить их на соответствие.

Если QTWEBENGINE_DICTIONARIES_PATH установлено, проверка орфографии использует словари в указанном каталоге, не ища их больше нигде. В противном случае используется каталог qtwebengine_dictionaries, относящийся к исполняемому файлу, если он существует. Если он не существует, будет произведён поиск в QT_INSTALL_PREFIX/qtwebengine_dictionaries.

В macOS, в зависимости от конфигурации Qt WebEngine во время сборки, существуют две возможности нахождения данных проверки орфографии:

• Словари Hunspell (по умолчанию) — используются словари .bdic, как и на других платформах
• Нативные словари — используются API проверки орфографии macOS (результаты зависят от установленных словарей ОС)

Таким образом, в случае использования Hunspell Qt WebEngine будет искать в подкаталоге qtwebengine_dictionaries, расположенном внутри пакета приложения Resources, а также в каталоге Resources , расположенном внутри пакета Qt.

Вкратце, в случае использования Hunspell, рассматриваются следующие пути:

• QTWEBENGINE_DICTIONARIES_PATH, если установлено
• QCoreApplication::applicationDirPath()/qtwebengine_dictionaries или QCoreApplication::applicationDirPath()/../Contents/Resources/qtwebengine_dictionaries (в macOS)
• [QLibraryInfo::DataPath]/qtwebengine_dictionaries или путь/к/QtWebEngineCore.framework/Resources/qtwebengine_dictionaries (пакет Qt в macOS)

Проверка орфографии по умолчанию отключена и может быть включена в каждом профиле с помощью метода QWebEngineProfile::setSpellCheckEnabled() в приложениях на основе виджетов и свойства WebEngineProfile.spellCheckEnabled в приложениях Qt Quick.

Текущий язык, используемый для проверки орфографии, определяется в каждом профиле и может быть задан с помощью метода QWebEngineProfile::setSpellCheckLanguages() или свойства WebEngineProfile.spellCheckLanguages.

Это свойство можно протестировать, собрав и запустив Пример проверки орфографии.

Поддержка этой функции была добавлена в Qt 5.8.0.

Осязание

Qt WebEngine поддерживает сенсорные устройства для навигации и взаимодействия с веб-страницами.

Приложения могут запретить использование сенсорных событий следующим образом:

• Передача флага --touch-events=disabled в командной строке отключит поддержку сенсорных событий в API JavaScript (что означает, что ontouchstart и связанные обработчики не будут присутствовать в объекте document.window). Сенсорные события по-прежнему будут доставляться на веб-страницы.
• Установка объекта фильтра событий с помощью QObject::installEventFilter на объекте-прокси фокуса представления WebEngine и отфильтровка всех сенсорных событий.

Просмотр источника

Qt WebEngine поддерживает просмотр исходного HTML-кода веб-страницы.

Эта функция может быть использована из пользовательских меню или назначена пользовательским событиям. Более подробную информацию см. в WebEngineView::WebAction и QWebEnginePage::WebAction.

Эту функцию можно протестировать, открыв веб-страницу в Простому браузере или Мини-браузере, а затем выбрав Page Source в контекстном меню. Элемент контекстного меню Page Source откроет просмотр исходного кода в новой вкладке.

Для открытия просмотра исходного кода в текущей вкладке также поддерживаются URL-адреса со схемой view-source URI. Например, вы можете ввести следующий URL-адрес в адресную строку, чтобы просмотреть исходный HTML-код веб-страницы qt.io:

view-source:https://www.qt.io/

Автозаполнение неполных URL-адресов со схемой view-source URI делает использование этой функции более удобным. Например, следующий неполный URL-адрес также загрузит просмотр исходного кода веб-страницы qt.io:

view-source:qt.io

Поддержка этой функции была добавлена в Qt 5.8.0.

WebRTC

WebRTC предоставляет браузерам возможности Real-Time Communications (RTC) через простые API. Более подробную информацию см. в WebEngineView.Feature и QWebEnginePage::Feature.

Эту функцию можно протестировать, настроив веб-камеру или микрофон, а затем открыв https://test.webrtc.org/ в Простому браузере или Мини-браузере.

Веб-уведомления

Qt WebEngine поддерживает JavaScript API веб-уведомлений. Приложение должно явно разрешить функцию, используя QWebEnginePage::Notifications или WebEngineView.Notifications.

Поддержка этой функции была добавлена в Qt 5.13.0.

Обработка значков

Для доступа к значкам зарегистрирован QQuickImageProvider. К этому поставщику можно получить доступ по специальному URL-адресу, где схема — "image:", а хост — "favicon". Например,

Image {
    source: "image://favicon/url"
}

url может быть URL-адресом значка favicon. Например,

Image {
    source: "image://favicon/https://www.qt.io/hubfs/2016_Qt_Logo/qt_logo_green_rgb_16x16.png"
}

url также может быть URL-адресом страницы для доступа к её значку. Например,

Image {
    source: "image://favicon/https://www.qt.io/"
}

Если доступно несколько значков, можно указать свойство Image::sourceSize, чтобы выбрать значок нужного размера. Если Image::sourceSize не указано или равно 0, будет выбран самый большой доступный значок.

Поставщик изображений ищет запрашиваемый значок в существующих экземплярах WebEngineView. Сначала он пытается сопоставить отображаемые в настоящее время значки. Если совпадений не найдено, он запрашивает значок из базы данных. Каждый профиль имеет свою собственную базу данных значков, которая хранится в постоянном хранилище, поэтому к сохранённым значкам можно получить доступ и без подключения к сети. Значок должен быть загружен предварительно, чтобы быть сохранённым в базе данных.