Syncing deviceUUID Between Flutter Mobile and JS SDKs in app Using a WebView

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:mindbox/mindbox.dart';
import '../push_info_page/push_info_page.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
static const String url = "https://your-site.com/";

// Timeout for retrieving the deviceUUID.
// The page will not start loading until this timeout expires.
// During the initial initialization, retrieval may take several seconds,
// while subsequent attempts usually take less than 250 ms.
static const fetchDeviceUuidTimeout = Duration(milliseconds: 4000);

late final WebViewController _controller;
String? deviceUUID;
bool _isWebViewInitialized = false;

@override
void initState() {
  super.initState();

  _initializeDeviceUUIDAndWebView();
  
// This call ensures that even if deviceUUID retrieval
// times out during the first page load,
// synchronization will occur on subsequent page loads
// or app launches.
  Mindbox.instance.getDeviceUUID((uuid) {
    deviceUUID = uuid;
  });
}

// Attempts to retrieve the device UUID within the specified timeout.
// The page starts loading either after the UUID is retrieved
// or when the timeout expires.
// If the UUID is not retrieved, synchronization will occur
// on the next app launch or page load.
Future<void> _initializeDeviceUUIDAndWebView() async {
  try {
    final uuid = await _fetchDeviceUUIDWithTimeout();
    deviceUUID = uuid;
    print('DeviceUUID initialized: $deviceUUID');
  } catch (e) {
    print('Failed to initialize DeviceUUID: $e');
  } finally {
    _initializeWebViewController();
    setState(() {
      _isWebViewInitialized = true;
    });
  }
}

// Initializes the WebView. Synchronization is performed in `onPageStarted`.
Future<void> _initializeWebViewController() async {
  _controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (String url) async {
          if (deviceUUID != null) {
            await _waitForJavaScriptReady(_controller);
            await _synchronizeDeviceUUID(_controller, deviceUUID!);
          }
        },
      ),
    )
    ..loadRequest(Uri.parse(url));
}

// Retrieves the deviceUUID within the specified timeout.
Future<String> _fetchDeviceUUIDWithTimeout() async {
  final completer = Completer<String>();

  if (fetchDeviceUuidTimeout.inMilliseconds < 250) {
    throw ArgumentError("Timeout must be at least 250 milliseconds.");
  }

  final timer = Timer(fetchDeviceUuidTimeout, () {
    if (!completer.isCompleted) {
      completer.completeError(
        TimeoutException("Timeout while fetching Device UUID."),
      );
    }
  });

  Mindbox.instance.getDeviceUUID((deviceUUID) {
    if (!completer.isCompleted) {
      if (deviceUUID.isNotEmpty) {
        completer.complete(deviceUUID);
      } else {
        completer.completeError(Exception("DeviceUUID is empty"));
      }
    }
  });

  return completer.future.whenComplete(() => timer.cancel());
}

void _handlePushNotification(String link, dynamic payload) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => PushInfoPage(link: link, payload: payload),
    ),
  );
}

// Debug method: logs cookies, localStorage, and the mobile UUID.
Future<void> _showData(WebViewController controller) async {
  try {
    final cookies =
        await controller.runJavaScriptReturningResult("document.cookie");
    print("Cookies: $cookies");
    print("Mobile device UUID is: $deviceUUID");

    final localStorageUUID = await controller.runJavaScriptReturningResult('''
      window.localStorage.getItem('mindboxDeviceUUID');
    ''');

    print("JS tracker device UUID: $localStorageUUID");
  } catch (e) {
    print("Failed to fetch cookies: $e");
  }
}

// Syncs the deviceUUID with the JS SDK.
Future<void> _synchronizeDeviceUUID(
  WebViewController controller,
  String uuid,
) async {
  await controller.runJavaScript('''
    document.cookie = "mindboxDeviceUUID=$uuid";
    window.localStorage.setItem('mindboxDeviceUUID', '$uuid');
  ''');

  Mindbox.instance.writeNativeLog(
    message: "Device UUID synchronized with deviceUUID: $uuid",
    logLevel: LogLevel.info,
  );
}

// Clears cookies.
Future<void> _clearAllCookies() async {
  final cookieManager = WebViewCookieManager();
  await cookieManager.clearCookies();
}

// Waits until the JavaScript context is available.
Future<void> _waitForJavaScriptReady(WebViewController controller) async {
  const int maxRetries = 10;
  int attempts = 0;
  const Duration retryInterval = Duration(milliseconds: 10);

  while (attempts < maxRetries) {
    await Future.delayed(retryInterval);

    try {
      final isReady = await controller.runJavaScriptReturningResult('''
        (function() {
          return typeof document.cookie !== "undefined" &&
                 typeof localStorage !== "undefined";
        })();
      ''');

      if (isReady == true) {
        print("JavaScript context is ready.");
        return;
      }

      print("JavaScript context not ready, retrying... [$attempts]");
    } catch (e) {
      print("Error during JavaScript readiness check: $e");
    }

    await Future.delayed(retryInterval);
    attempts++;
  }

  throw TimeoutException(
    "JavaScript context not ready after $maxRetries retries.",
  );
}

@override
Widget build(BuildContext context) {
  if (!_isWebViewInitialized) {
    return Scaffold(
      appBar: AppBar(title: const Text('WebView Example')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
          ],
        ),
      ),
    );
  }

  return Scaffold(
    appBar: AppBar(
      title: const Text('WebView Example'),
      actions: [
        IconButton(
          icon: const Icon(Icons.cookie),
          onPressed: () => _showData(_controller),
        ),
      ],
    ),
    body: WebViewWidget(controller: _controller),
  );
}

@override
void dispose() {
  _controller.clearCache();
  super.dispose();
}
}