Фреймворк WebView

Фреймворк WebView обеспечивает простой и гибкий способ предоставления доступа к веб-страницам и веб-сайтам в приложение.

Компонент WebView использует движок браузера ОС Аврора, созданный с помощью Mozilla gecko.

Использование фреймворка WebView

Для работы PkgConfig нужно в pro-файле указать или

 CONFIG += auroraapp

или

 CONFIG += link_pkgconfig

QT API

QT API состоит из следующих классов:

• класс WebEngine;
• класс WebEngineSettings.

QML API

API QML предоставляется через импорт модуля Sailfish.WebView

В нём содержатся следующие типы QML:

• WebView
• WebViewFlickable
• WebViewPage
• WebEngine
• WebEngineSettings

Пример

Генератор обёрток доступен на GitLab omprussia/tools/WebAppGenerator.

Следующие примеры демонстрируют, как компонент WebView может быть интегрирован в QML-код существующего приложения.

Пример:

 import QtQuick 2.0
 import Sailfish.Silica 1.0
 import Sailfish.WebView 1.0

 ApplicationWindow {
     initialPage: Component {
         WebViewPage {
             WebView {
                 anchors.fill: parent
                 url: "https://auroraos.ru/"
             }
         }
     }
 }

Настройка всплывающего окна

Внешний вид и поведение некоторых аспектов WebView (например, всплывающих окон и других диалогов взаимодействия с пользователем) можно настроить с помощью QML API. Для этого клиенты должны реализовать соответствующий тип интерфейса и зарегистрировать свои реализации в WebView через PopupProvider, который затем привязывается к свойству popupProvider у WebView.

WebView в настоящее время поддерживает настройку через следующие интерфейсы:

• UserPromptInterface
• PromptPopupInterface
• ContextMenuInterface
• AlertPopupInterface
• ConfirmPopupInterface
• AuthPopupInterface
• PasswordManagerPopupInterface
• LocationPopupInterface
• WebrtcPermissionInterface
• BlockedTabPopupInterface
• SelectorPopupInterface

Загрузка и использование локальных ресурсов

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

Если нет возможности настроить веб-сервис и необходимо загрузить ресурсы с файловой схемой uri, можно установить для параметра security.disable_cors_checks значение true, чтобы обойти проверки совместного использования ресурсов из разных источников. Эту настройку следует устанавливать перед загрузкой любых ресурсов и только в том случае, если известно, какие запросы отправляются.

При отладке приложения можно запускать его с переменной среды EMBED_CONSOLE=1. Если нужны сделанные запросы, следует использовать переменную среды EMBED_CONSOLE=network. Когда EMBED_CONSOLE включена, сообщения консоли выводятся на терминал.

Пример отказа может выглядеть так:

 [JavaScript Error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote
 resource at file:///path-to-resource/myfile.js. (Reason: CORS request not http)."]

См. также WebEngineSettings.

Общие ограничения

• Отсутствие поддержки Notifications API и Push API.
• Поле для ввода пароля не отключает возможность копирования из него введённого текста.
• WebView может кэшировать веб-приложение и отображать старую версию даже после внесения изменений в код. Решением служит очистка кэша ~/.cache/<app_name>, где app_name — имя приложения.
• CSS стили поддерживаются на уровне движка gecko 78.
• Отсутствует поддержка всплывающих окон.
• Приложение с WebView может «падать» при переходе в состояние Qt::ApplicationHidden.

Ограничения по фреймворкам

Flutter:

• Нужно долгое нажатие по кнопкам для их срабатывания.

Vue:

• Не работает скроллинг таблиц.