110 lines
4.9 KiB
Markdown
110 lines
4.9 KiB
Markdown
|
Ты хочешь реализовать взаимодействие между Flutter-приложением, отображающим WebView, и вложенными Flutter-приложениями, которые запускаются внутри WebView.
|
|||
|
|
Это можно организовать через мост Flutter ↔ Web (JavaScript) ↔ WebView ↔ Flutter.
|
|||
|
|
Вот план реализации:
|
|||
|
|
|
|||
|
|
💡 Что делает JS
|
|||
|
|
JS только: перенаправляет события между WebView и Flutter Web. Он не содержит логики, не парсит JSON, не делает маршрутизацию.
|
|||
|
|
|
|||
|
|
🔄 Поток сообщений
|
|||
|
|
Flutter Web вызывает Dart-метод sendToHost(payload)
|
|||
|
|
Он через dart:js вызывает JS-функцию window.sendToFlutterHost(json)
|
|||
|
|
JS вызывает window.flutter_inappwebview.callHandler('fromWebApp', json)
|
|||
|
|
Flutter Host получает JSON в Dart, обрабатывает
|
|||
|
|
Если нужно ответить — Flutter Host делает evaluateJavascript() с window.dispatchEvent(...)
|
|||
|
|
JS ловит и вызывает flutterApp.receiveFromHost(json) через interop
|
|||
|
|
Вложенное Flutter Web-приложение обрабатывает всё в Dart
|
|||
|
|
|
|||
|
|
✅ Что реализовать в Dart (на обеих сторонах)
|
|||
|
|
sendMessage(type, payload) → сериализация
|
|||
|
|
onMessage(type) → маршрутизация
|
|||
|
|
поддержка Completer / callback’ов (для "awaitable" запросов)
|
|||
|
|
стримы (StreamController) для подписки на обновления очередь сообщений, если WebView не готов (например, при инициализации)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
✅ ЭТАП 1: Архитектура и формат сообщений
|
|||
|
|
📋 Задачи:
|
|||
|
|
Выбрать схему общения:
|
|||
|
|
Flutter Host ↔ JS Bridge ↔ Flutter Web
|
|||
|
|
|
|||
|
|
Определим формат сообщений:
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
"type": "event_name", <- optional
|
|||
|
|
"id": "uuid-123", <- optional
|
|||
|
|
"data": { ... } <- optional
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Поддерживать request-response и event-notify модели
|
|||
|
|
|
|||
|
|
✅ ЭТАП 2: Настройка WebView в Flutter-хосте
|
|||
|
|
📋 Задачи:
|
|||
|
|
Добавить flutter_inappwebview
|
|||
|
|
Открыть локальный или удалённый URL с Web-приложением
|
|||
|
|
Зарегистрировать обработчик addJavaScriptHandler(name: 'fromWebApp')
|
|||
|
|
Готовить метод evaluateJavascript() для отправки сообщений в Web
|
|||
|
|
|
|||
|
|
✅ ЭТАП 3: JS Bridge в HTML/Web оболочке
|
|||
|
|
📋 Задачи:
|
|||
|
|
JS-оболочка подписывается на события от Flutter-хоста:
|
|||
|
|
|
|||
|
|
window.addEventListener("fromFlutterHost", (e) => {
|
|||
|
|
handleFlutterMessage(e.detail);
|
|||
|
|
});
|
|||
|
|
Отправка сообщений в Flutter-хост:
|
|||
|
|
|
|||
|
|
window.flutter_inappwebview.callHandler('fromWebApp', { type, id, payload });
|
|||
|
|
JS → Dart вызов и обратно через dart:js или package:js
|
|||
|
|
|
|||
|
|
✅ ЭТАП 4: Flutter Web приложение внутри WebView
|
|||
|
|
📋 Задачи:
|
|||
|
|
Использовать dart:js или js пакеты для общения с JS
|
|||
|
|
Создать глобальный объект flutterApp, например:
|
|||
|
|
|
|||
|
|
js.context['flutterApp'] = {
|
|||
|
|
'sendFromHost': (data) {
|
|||
|
|
// handle message
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
Для отправки сообщений:
|
|||
|
|
|
|||
|
|
js.context.callMethod('sendMessageToFlutterHost', [messageJson]);
|
|||
|
|
✅ ЭТАП 5: Обработка сообщений в Flutter-хосте
|
|||
|
|
📋 Задачи:
|
|||
|
|
Обрабатывать входящие сообщения в JavaScriptHandler
|
|||
|
|
|
|||
|
|
Вызывать нужные методы или бизнес-логику
|
|||
|
|
|
|||
|
|
Отправлять обратно данные через evaluateJavascript():
|
|||
|
|
|
|||
|
|
window.dispatchEvent(new CustomEvent("fromFlutterHost", { detail: ... }));
|
|||
|
|
✅ ЭТАП 6: Поддержка ответа и callback'ов
|
|||
|
|
📋 Задачи:
|
|||
|
|
Для каждого сообщения включать поле "id" (UUID)
|
|||
|
|
|
|||
|
|
В Web-приложении вести словарь pendingCallbacks[id] = completer
|
|||
|
|
|
|||
|
|
При получении ответа – вызывать соответствующий callback
|
|||
|
|
|
|||
|
|
✅ ЭТАП 7: Логирование и отладка
|
|||
|
|
📋 Задачи:
|
|||
|
|
Логировать каждое сообщение на всех уровнях:
|
|||
|
|
|
|||
|
|
Внутри Flutter-хоста
|
|||
|
|
|
|||
|
|
В JS-оболочке
|
|||
|
|
|
|||
|
|
Во Flutter Web
|
|||
|
|
|
|||
|
|
Добавить утилиту типа log(type, from, data)
|
|||
|
|
|
|||
|
|
🧩 Примеры типов взаимодействий
|
|||
|
|
getAppVersion → вернуть версию хост-приложения
|
|||
|
|
|
|||
|
|
selectFile → открыть файловый диалог
|
|||
|
|
|
|||
|
|
vibrate → вызвать HapticFeedback.vibrate()
|
|||
|
|
|
|||
|
|
sendTelemetry → Flutter Web отправляет аналитические данные
|
|||
|
|
|
|||
|
|
requestLocation → Flutter-хост даёт координаты
|