Bridge Integration for WebView-Based Mobile Apps

Many mobile apps are built on top of a WebView. FlareLane accounts for this by providing a variety of convenience features and bridge code for WebView-based apps.

The Problem with WebView-Based Mobile Apps

In a WebView-based mobile app, the mobile app and the website run in separate environments, so the app has no way of knowing about actions that happen on the web.

To solve this, you need bridge code that propagates actions taken inside the WebView to the app as well. FlareLane is the only solution that builds and provides this bridge code itself.

Bridge Integration Steps

1. Integrate the Web SDK

Since the website is the primary platform where user actions occur, integrate the FlareLane Web SDK into the website currently displayed in the WebView.

2. Add the Bridge Code to the Mobile SDK

The bridge class is named FlareLaneJavascriptInterface across every SDK and exposes a static BRIDGE_NAME constant. Pick the section that matches the SDK your app uses.

webView.addJavascriptInterface(
  FlareLaneJavascriptInterface(context, webView),
  FlareLaneJavascriptInterface.BRIDGE_NAME
)

webView.addJavascriptInterface(
  new FlareLaneJavascriptInterface(context, webView),
  FlareLaneJavascriptInterface.BRIDGE_NAME
);

iOS

Swift
Objective-c

webView.configuration.userContentController.add(
  FlareLaneJavascriptInterface(webView),
  name: FlareLaneJavascriptInterface.BRIDGE_NAME
)

FlareLaneJavascriptInterface *interface =
  [[FlareLaneJavascriptInterface alloc] init:webView];
[webView.configuration.userContentController
  addScriptMessageHandler:interface
  name:FlareLaneJavascriptInterface.BRIDGE_NAME];

React Native

react-native-webview

import { useRef } from 'react';
import { WebView } from 'react-native-webview';
import { FlareLaneJavascriptInterface } from '@flarelane/react-native-sdk/adapters/react-native-webview';

const webViewRef = useRef<WebView>(null);
const injection = FlareLaneJavascriptInterface.injectedJavaScript;

<WebView
  ref={webViewRef}
  source={{ uri }}
  injectedJavaScript={injection}
  injectedJavaScriptBeforeContentLoaded={injection}
  onMessage={FlareLaneJavascriptInterface.onMessage(webViewRef)}
/>

Flutter

webview_flutter
flutter_inappwebview

import 'package:webview_flutter/webview_flutter.dart';
import 'package:flarelane_flutter/adapters/webview_flutter.dart';

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel(
    FlareLaneJavascriptInterface.BRIDGE_NAME,
    onMessageReceived:
      FlareLaneJavascriptInterface.onMessageReceived(controller),
  )
  ..setNavigationDelegate(NavigationDelegate(
    onPageStarted: FlareLaneJavascriptInterface.onPageStarted(controller),
  ));

import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flarelane_flutter/adapters/flutter_inappwebview.dart';

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri(url)),
  initialUserScripts: UnmodifiableListView([
    ...FlareLaneJavascriptInterface.initialUserScripts,
  ]),
  onWebViewCreated: (controller) {
    controller.addJavaScriptHandler(
      handlerName: FlareLaneJavascriptInterface.BRIDGE_NAME,
      callback: FlareLaneJavascriptInterface.handlerCallback(controller),
    );
  },
);

3. Integrate Customer Data via the Web SDK

Once the integration is complete, the following functions called via the Web SDK inside the WebView will, through the bridge, also invoke the corresponding Mobile SDK functions in the app.

setUserId
setTags
trackEvent
setUserAttributes