基于 WebView 的移动应用桥接集成

许多移动应用都是基于 WebView 构建的。FlareLane 充分考虑了这一点，为基于 WebView 的应用提供了多种便捷功能和桥接代码。

基于 WebView 的移动应用存在的问题

在基于 WebView 的移动应用中，移动应用与网站运行在彼此独立的环境里，因此应用无法感知网页上发生的操作。

为解决这一问题，您需要桥接代码，把 WebView 内部发生的操作同步传递给应用。FlareLane 是唯一一家自行构建并提供该桥接代码的解决方案。

桥接集成步骤

1. 接入 Web SDK

由于网站是用户操作发生的主要平台，因此请将 FlareLane Web SDK 接入到当前显示在 WebView 中的网站。

2. 在 Mobile SDK 中添加桥接代码

所有 SDK 中桥接类的名称统一为 FlareLaneJavascriptInterface，频道名称通过静态常量 BRIDGE_NAME 暴露。请根据您应用使用的 SDK 选择对应章节进行集成。

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. 通过 Web SDK 集成客户数据

接入完成后，在 WebView 内通过 Web SDK 调用的以下函数，将通过桥接同时触发应用中对应的 Mobile SDK 函数。

setUserId
setTags
trackEvent
setUserAttributes