Как получить обратный вызов из Angular WebApp через WebViewFlutter? и Проблемы с полифилами и синтаксическими ошибками

Вопрос или проблема

class AuthScreen extends StatefulWidget {
  const AuthScreen({super.key});

  @override
  State<AuthScreen> createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onPageFinished: (url) {
          debugPrint('Страница загружена: $url');
        },
      ))
      ..loadRequest(Uri.parse('url'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: WebViewWidget(controller: _webViewController)),
    );
  }
}

I/PlatformViewsController( 7630): Размещение представления в иерархии представлений для платформенного представления: 0
I/PlatformViewsController( 7630): PlatformView использует задний план SurfaceProducer
E/FrameEvents( 7630): updateAcquireFence: Не найден кадр.
I/chromium( 7630): [INFO:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token '{'", source: http://'url'/polyfills-FFHMD2TL.js (1)
I/chromium( 7630): [INFO:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token '='", source: http://'url'/main-QES4K2S4.js (1)
E/FrameEvents( 7630): updateAcquireFence: Не найден кадр.
W/ImageReaderSurfaceProducer( 7630): ImageTextureEntry не может ждать на ограждении на Android < 33
2
E/FrameEvents( 7630): updateAcquireFence: Не найден кадр.
I/chatty  ( 7630): uid=10154(com.example.pwa_flutter_3) RenderThread идентичные 3 строки
2
E/FrameEvents( 7630): updateAcquireFence: Не найден кадр.
I/chatty  ( 7630): uid=10154(com.example.pwa_flutter_3) RenderThread идентичные 3 строки
E/FrameEvents( 7630): updateAcquireFence: Не найден кадр.

Ответ или решение

Как получить обратный вызов из Angular WebApp через WebViewFlutter и решить проблемы с полифилами и синтаксическими ошибками

Разработка приложений с использованием Flutter и Angular может быть вызовом, особенно когда речь идет о взаимодействии между двумя платформами. В этой статье мы рассмотрим, как настроить обратный вызов между приложением Angular и Flutter через WebView, а также разберем проблемы с синтаксисом и полифилами, с которыми вы столкнулись.

1. Проблемы с синтаксисом и как их решить

Судя по ошибкам, которые вы видите в консоли (Unexpected token '{' и Unexpected token '='), можно предположить, что ваш JavaScript-код не совместим с версией движка, используемого в WebView. Это может произойти по следующим причинам:

• ES6/ESNext синтаксис: Если ваш Angular-приложение использует современные возможности JavaScript (arrow functions, destructuring, и т.д.), убедитесь, что все браузеры, на которых вы тестируете, поддерживают эти возможности. WebView может использовать старую версию движка, что приводит к синтаксическим ошибкам. Чтобы это исправить, добавьте полифилы или убедитесь, что ваш Angular-pроект транспилируется в совместимый с ES5 код.

• Отсутствие полифилов: Убедитесь, что вы корректно подключили полифилы в вашем Angular-приложении. Например, добавьте полифилы для поддержки Promise и других функций, которые могут отсутствовать в старых браузерах.

Пример добавления полифилов:

// Включите полифилы в polyfills.ts вашего Angular приложения
import 'core-js/stable';
import 'zone.js/dist/zone';  // Для Angular

2. Настройка обратного вызова между Angular и Flutter

Для реализации обратного вызова от Angular-приложения к Flutter, вы можете использовать метод evaluateJavascript в WebViewController. Предполагая, что Angular-приложение будет уведомлять о завершении формы с помощью JavaScript:

1. В Angular после успешного завершения формы вызовите функцию, которая передаст данные через window.flutter_inappwebview.callHandler (или аналогичный метод, в зависимости от используемого пакета для WebView).

Пример кода:

// После успешной отправки формы
const responseData = { success: true, message: 'Registration successful!' };
window.flutter_inappwebview.callHandler('onSignUpComplete', responseData);

2. В Flutter добавьте обработчик для этого вызова, используя метод setJavascriptChannel в контроллере WebViewController.

Пример реализации в вашем State классе:

@override
void initState() {
  super.initState();
  _webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(NavigationDelegate(
      onPageFinished: (url) {
        debugPrint('Page finished loading: $url');
      },
    ))
    ..setJavaScriptChannels(Set.from([
      JavaScriptChannel(
        name: 'Flutter',
        onMessageReceived: (message) {
          // Обработка сообщения от Angular
          debugPrint('Received message from Angular: ${message.message}');
        },
      ),
    ]))
    ..loadRequest(Uri.parse('url'));
}

Теперь после завершения формы в Angular будет вызван обработчик в Flutter, который сможе захватить данные.

Заключение

Синтаксические ошибки и проблемы с полифилами могут значительно затруднить интеграцию Angular и Flutter. Важно удостовериться, что код JavaScript совместим с версией движка, используемого в WebView, и правильно настроить обратные вызовы через JavaScript-каналы. С помощью приведенных примеров и рекомендаций вы сможете успешно настроить взаимодействие между вашими приложениями.

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