웹앱 연동

Flutter SDK 2.13.0 이상, JavaScript SDK 11.25.1 이상 버전에서 지원하는 기능입니다.
📘

웹앱에 대해서는 문서를 참고해주세요.

InAppWebView를 통해 자사 웹사이트를 랜더링하는 경우, 다음 같은 설정을 통해 웹사이트에 포함된 핵클 JavaScript SDK를 웹사이트 코드 변경없이 핵클 Flutter SDK 기능과 동일하게 사용할 수 있습니다.

이 경우 모든 핵클 이벤트는 Futter SDK를 통해 수집됩니다.

import 'dart:collection';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:hackle/hackle.dart';

InAppWebView(
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
  ),
  initialUserScripts: UnmodifiableListView<UserScript>([
    UserScript(
      source: HackleApp.getWebBridgeScript(),
      injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START,
      forMainFrameOnly: true
    )]),
  onWebViewCreated: (controller) {
    controller.loadUrl(urlRequest: URLRequest(url: WebUri('YOUR_WEB_URL')));
  },
  onJsPrompt: (controller, jsPromptRequest) async {
    if(HackleApp.isInvocableCommandInWebView(jsPromptRequest.message)) {
      var result = await HackleApp.handleWebInterfaceCommand(jsPromptRequest.message);
      return JsPromptResponse(action: JsPromptResponseAction.CONFIRM, handledByClient: true, value: result);
    } else {
      return JsPromptResponse(handledByClient: false);
    }
  },
);
🚧

해당 기능을 사용하기 위해서는 JavaScript 웹페이지에서 동일한 App SDK 키를 사용해야 합니다.

핵클 Flutter 웹뷰 설정은 안드로이드 Javascript Userscript 등을 이용하여 핵클 JavaScript SDK와 상호작용하게 됩니다.

initialUserScripts의 경우 안드로이드 환경에서 웹페이지 로드 전에 호출됨에 보장되지 않아 반드시 onWebViewCreated에서 반환된 controller에서 페이지를 로드해주세요.