110 lines
No EOL
4.9 KiB
Markdown
110 lines
No EOL
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-хост даёт координаты |