WebViewベースのモバイルアプリ向けブリッジ連携

多くのモバイルアプリはWebViewをベースに構築されています。FlareLaneはこの点を踏まえ、WebViewベースのアプリ向けにさまざまな便利機能とブリッジコードを提供しています。

WebViewベースのモバイルアプリが抱える課題

WebViewベースのモバイルアプリでは、モバイルアプリとウェブサイトがそれぞれ別の環境で動作するため、アプリ側はウェブ上で発生したアクションを知るすべがありません。

これを解決するには、WebView内で行われたアクションをアプリ側にも伝えるブリッジコードが必要です。FlareLaneは、このブリッジコードを 自社で開発し提供している唯一のソリューション です。

ブリッジ連携の手順

1. Web SDKの連携

ウェブサイトはユーザーのアクションが発生する主要なプラットフォームであるため、まずWebViewに表示しているウェブサイトにFlareLaneのWeb SDKを連携します。

2. モバイル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を通じて呼び出した以下の関数は、ブリッジを介してアプリ側の対応するモバイルSDK関数も同時に呼び出します。

setUserId
setTags
trackEvent
setUserAttributes