์›น์•ฑ ์—ฐ๋™

๐Ÿ“˜

์ง€์› SDK ๋ฒ„์ „

Flutter SDK 2.13.0 ์ด์ƒ ๋ฒ„์ „์—์„œ ์ง€์›ํ•˜๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.
JavaScript SDK 11.24.1 ์ด์ƒ ๋ฒ„์ „์—์„œ ์ง€์›ํ•˜๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

WebView๋ฅผ ํ†ตํ•ด ์ž์‚ฌ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋žœ๋”๋งํ•˜๋Š” ๊ฒฝ์šฐ, ๋‹ค์Œ ๊ฐ™์€ ์„ค์ •์„ ํ†ตํ•ด ์›น์‚ฌ์ดํŠธ์— ํฌํ•จ๋œ ํ•ตํด 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);
    }
  },
);

๐Ÿšง

ํ•ตํด Flutter ์›น๋ทฐ ์„ค์ •์€ ์•ˆ๋“œ๋กœ์ด๋“œ Javascript Userscript ๋“ฑ์„ ์ด์šฉํ•˜์—ฌ ํ•ตํด JavaScript SDK์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

initialUserScripts์˜ ๊ฒฝ์šฐ ์•ˆ๋“œ๋กœ์ด๋“œ ํ™˜๊ฒฝ์—์„œ ์›นํŽ˜์ด์ง€ ๋กœ๋“œ ์ „์— ํ˜ธ์ถœ๋จ์— ๋ณด์žฅ๋˜์ง€ ์•Š์•„ ๋ฐ˜๋“œ์‹œ onWebViewCreated์—์„œ ๋ฐ˜ํ™˜๋œ controller์—์„œ ํŽ˜์ด์ง€๋ฅผ ๋กœ๋“œํ•ด์ฃผ์„ธ์š”.

๐Ÿšง

ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” JavaScript ์›นํŽ˜์ด์ง€์—์„œ ๋™์ผํ•œ App SDK ํ‚ค๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

(Optional) Webview Wrapper App ์—ฐ๋™

๋งŒ์•ฝ ํ•ตํด ์ด๋ฒคํŠธ๋ฅผ Flutter SDK๊ฐ€ ์•„๋‹Œ JavaScript SDK๋ฅผ ํ†ตํ•ด ์ˆ˜์ง‘ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํ•ตํด SDK๋ฅผ ์ดˆ๊ธฐํ™” ํ•  ๋•Œ HackleAppMode๋ฅผ webViewWrapper๋กœ ์„ค์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

import "package:hackle/hackle.dart";

HackleConfig config = HackleConfigBuilder()
  .hackleAppMode(HackleAppMode.webViewWrappe)
  .build();

await HackleApp.initialize(YOUT_APP_SDK_KEY, hackleConfig: config);