웹뷰 기반 모바일 앱 브릿지 연동

한국에서는 웹뷰 기반으로 구성된 모바일 앱이 많습니다. 플레어레인은 그러한 특성을 반영하여 웹뷰 기반 앱을 위한 다양한 편의 기능과 브릿지 코드를 제공합니다.

웹뷰 기반 모바일 앱의 문제점

웹뷰 기반 모바일 앱에서는, 모바일 앱과 웹사이트가 분리된 환경이기 때문에 웹에서 일어난 행동을 앱에서 알 수 없다는 단점이 있습니다.

이를 해결하기 위해 웹뷰 내 일어난 행동이 앱에도 동일하게 전파될 수 있도록 브릿지 코드가 필요합니다. 그리고 플레어레인은 이러한 브릿지 코드를 직접 개발하여 제공하는 유일한 솔루션입니다.

브릿지 코드 연동 순서

1. Web SDK 연동

유저 행동이 일어나는 주된 플랫폼이 웹사이트이므로, 웹뷰에서 현재 띄우고 있는 웹사이트에 플레어레인 Web SDK인 Web SDK 를 연동합니다.

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로 고객 데이터 연동

모든 연동이 완료되었다면 웹뷰 내 Web SDK로 실행된 다음 함수들은 브릿지를 통해 앱 상에서 Mobile SDK 함수를 실행시킵니다.

setUserId
setTags
trackEvent
setUserAttributes