콘텐츠사(Web -> WebView)

import { initBridge, getBridge } from '@blomics/added-bridge';

// 부팅 시 1회. 매체 slug 를 알면 넘기고(KBANK · MONIMO …), 모르면 생략한다 — 주입된 브릿지 형태로 판별한다.
const bridge = initBridge({ publisherSlug: 'KBANK' });

bridge.onBackKey(() => confirmExit());          // 시스템 백 · 제스처 · 앱바 백 단일 진입 (해제 함수 반환)
bridge.openExternal('https://added.blomics.net/cs/inquiry');
bridge.exit();                                   // 웹뷰 종료 — 매체 앱의 이전 화면으로 복귀

const version = await bridge.getAppVersion();   // 미지원 · 무응답이면 null
if (bridge.supports('deviceInfo')) {
  const info = await bridge.getDeviceInfo();     // { network, model, manufacturer, osVersion, raw }
}

// 이후에는 어디서든 같은 인스턴스를 얻는다
getBridge().setTitle('게임');

<!-- 번들러가 없는 엔진(Unity WebGL, Godot …): 게임 로더보다 먼저 읽는다 -->
<script src="added-bridge.iife.js"></script>
<script>
  var bridge = window.AddedBridge.initBridge({ publisherSlug: null });
</script>

bridge.ads.init({
  test: false,
  networks: [{ key: 'admob', surface: 'bridge', app: { appId: 'ca-app-pub-XXXX~YYYY' } }],
});

// 보상형
const ad = await bridge.ads.load({ format: 'rewarded', ids: { adUnitId: 'ca-app-pub-XXXX/ZZZZ' } });
if (!ad) return;                       // no-fill · 로드 상한(5초) 초과 → 다음 후보로

const result = await ad.show();        // { shown, rewarded, clicked, error? } — 노출 상한(10초)으로 항상 종결
if (result.rewarded) {
  requestServerReward();               // ⚠️ 클라이언트 신호일 뿐 — 실제 지급은 서버 검증 후
}

// 전면형 — 보상 없이 노출만. show() 가 끝나면(광고 닫힘) 콘텐츠 흐름을 재개한다
const inter = await bridge.ads.load({ format: 'interstitial', ids: { adUnitId: 'ca-app-pub-XXXX/WWWW' } });
if (inter) await inter.show();         // rewarded 는 항상 false
resumeContent();

// 네이티브 요청 함수 — UA 가 아니라 "주입된 객체의 형태"로 판별한다
function callNative(method, message) {
  var msg = message == null ? '' : String(message);
  var bridge = window.addedBridge;
  var ios = window.webkit && window.webkit.messageHandlers
    && window.webkit.messageHandlers.addedBridge;

  // 1) Android — @JavascriptInterface 로 메서드가 객체에 직접 주입된다.
  //    반드시 주입 객체의 메서드로 호출한다(함수를 변수에 꺼내 부르면 거절된다).
  if (bridge && typeof bridge[method] === 'function') {
    bridge[method](msg);
    return true;
  }

  // 2) Flutter — JavaScriptChannel 은 문자열 1개만 받는다.
  //    iOS 의 webview_flutter 는 window.addedBridge 를 messageHandler 와 "같은 객체"로 심으므로
  //    iOS 보다 먼저 검사해야 한다(객체를 보내면 Dart 에서 해석에 실패해 호출이 유실된다).
  if (bridge && typeof bridge.postMessage === 'function' && (!ios || bridge === ios)) {
    bridge.postMessage(JSON.stringify({ method: method, message: msg }));
    return true;
  }

  // 3) iOS — 단일 messageHandler 에 { method, message } 객체로 보낸다.
  if (ios && typeof ios.postMessage === 'function') {
    ios.postMessage({ method: method, message: msg });
    return true;
  }

  return false; // 브릿지 미주입(일반 브라우저)
}

callNative('interfaceName', 'value');

// 요청 데이터 받기 — 광고·백키 등 다른 기능도 같은 객체를 쓰므로 덮어쓰지 말고 병합한다
window.addedBridgeCallback = window.addedBridgeCallback || {};

addedBridgeCallback.interfaceName = function (data) {
  console.log('addedBridgeCallback :: ' + data);
};

// 콜백 payload 는 객체 또는 JSON 문자열로 올 수 있다 — 둘 다 받는다
function parsePayload(data) {
  if (data == null || data === '') return {};
  if (typeof data !== 'string') return data;
  try { return JSON.parse(data); } catch (e) { return {}; }
}

// 조회 헬퍼 — 응답에 requestId 가 없으므로 메서드별 대기열(FIFO)로 도착 순서대로 매칭하고,
// 응답을 보내지 않는 호스트(미구현 · 브라우저)에 대비해 상한을 둔다.
var pendingGetters = {};

function requestNative(method, timeoutMs) {
  return new Promise(function (resolve) {
    var queue = pendingGetters[method];
    if (!queue) {
      queue = pendingGetters[method] = [];
      addedBridgeCallback[method] = function (data) {
        var next = queue.shift();
        if (!next) return;               // 요청 없이 온 응답(중복 · 지연 도착)은 버린다
        clearTimeout(next.timer);
        next.resolve(data);
      };
    }
    var entry = { resolve: resolve };
    entry.timer = setTimeout(function () {
      var i = queue.indexOf(entry);
      if (i >= 0) queue.splice(i, 1);
      resolve(null);                     // 응답 없음
    }, timeoutMs || 3000);
    queue.push(entry);

    if (!callNative(method)) {           // 브릿지 미주입
      clearTimeout(entry.timer);
      queue.splice(queue.indexOf(entry), 1);
      resolve(null);
    }
  });
}

callNative('openExternalBrowser', 'https://...');

callNative('finish');

// 콜백을 먼저 등록하고, 그다음 호스트에 등록을 알린다 — 문서(페이지)마다 1회
addedBridgeCallback.onBackKeyListener = function () {
  // 게임 안의 팝업 · 하위 화면은 웹이 직접 닫는다
  if (closeTopLayer()) return;
  callNative('finish'); // 필수연동 finish()
};
callNative('registerBackKey', 'true');

addedBridgeCallback.onBackButtonListener = function () {
  if (closeTopLayer()) return;
  callNative('finish'); // 필수연동 finish()
};
callNative('registerBackButton', 'true');

// 호출 → 콜백 addedBridgeCallback.getAppVersion(version)
const version = await requestNative('getAppVersion');
// ex) "3.12.0" — 응답이 없으면 null

// 호출 → 콜백 addedBridgeCallback.getADID(adId)
const adId = await requestNative('getADID');
// ex) "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
// iOS 는 추적 허용(ATT)을 받지 못하면 "00000000-0000-0000-0000-000000000000"

// 호출 → 콜백 addedBridgeCallback.getIsAgeUnder14(isUnder14)
const raw = await requestNative('getIsAgeUnder14');
const isUnder14 = raw === 'true' ? true : raw === 'false' ? false : null; // 알 수 없으면 null

// 호출 → 콜백 addedBridgeCallback.getDeviceInfo(deviceInfoJson)
const raw = await requestNative('getDeviceInfo');
const info = raw == null ? null : parsePayload(raw);
// ex) { network: "wifi", model: "SM-S911N", manufacturer: "samsung", osVersion: "14" }

callNative('pushUrl', JSON.stringify({
  url: 'https://...',
  replace: false
}));
// 새 문서가 열리면 그 페이지에서 콜백과 registerBackKey / registerBackButton 을 다시 등록한다

callNative('openInternalBrowser', 'https://...');

callNative('setTitle', '제목');

// 부팅 시 1회 — 호스트 광고 SDK 초기화
callNative('adInit', JSON.stringify({
  test: false,
  networks: [
    { key: 'admob', surface: 'bridge', app: { appId: 'ca-app-pub-XXXX~YYYY' } }
  ]
}));

// 광고 1개 로드 (아직 화면에 표시하지 않음)
callNative('adLoad', JSON.stringify({
  requestId: 'ad_1',
  network: 'admob',
  format: 'rewarded',                          // 'rewarded' | 'interstitial'
  ids: { adUnitId: 'ca-app-pub-XXXX/ZZZZ' }   // 비우면 매체 앱의 기본 유닛
}));

// 로드 결과 (호스트 → 웹) — 5초 안에 둘 다 오지 않으면 no-fill 로 처리한다
addedBridgeCallback.onAdLoaded = function (data) {
  const { requestId } = parsePayload(data);
  // fill 성공 → 이어서 형식에 맞는 표시 메서드 호출
};
addedBridgeCallback.onAdFailed = function (data) {
  const { requestId, stage, code } = parsePayload(data);
  // stage:'load' → 다음 후보로 / stage:'show' → 노출 실패로 종결
};

// 로드된 광고를 표시 — 보상형은 adShowRewarded, 전면형은 adShow.
// 결과 콜백은 형식과 무관하게 같은 이름으로 오므로 requestId 로 어느 광고인지 가른다.
const showing = {};   // requestId → { format, rewarded }

function showAd(requestId, format) {
  showing[requestId] = { format: format, rewarded: false };
  callNative(format === 'rewarded' ? 'adShowRewarded' : 'adShow', JSON.stringify({ requestId }));
}

addedBridgeCallback.onAdShown = function (data) { /* 노출(impression) */ };
addedBridgeCallback.onAdClicked = function (data) { /* 클릭 */ };
addedBridgeCallback.onAdRewarded = function (data) {
  const { requestId, type, amount } = parsePayload(data);
  const ad = showing[requestId];
  // 보상 조건 충족(예: 영상 끝까지 시청) — onAdClosed 보다 먼저 온다. 전면형에 온 신호는 무시한다.
  if (ad && ad.format === 'rewarded') ad.rewarded = true;
};
addedBridgeCallback.onAdClosed = function (data) {
  const { requestId } = parsePayload(data);
  const ad = showing[requestId];
  delete showing[requestId];
  if (!ad) return;
  // 광고 종료 = 노출 후 닫힘. 보상 여부는 이 시점까지 onAdRewarded 를 받았는지로 판정한다.
  // ⚠️ 클라이언트 신호일 뿐입니다 — 실제 보상 지급은 서버(S2S) 검증 후 처리하세요.
  if (ad.rewarded) requestServerReward();
  resumeContent();     // 전면형은 닫힘이 곧 종료 — 보상 없이 흐름만 재개한다
};

// 로드만 하고 표시하지 않을 광고 정리
callNative('adDestroy', JSON.stringify({ requestId: 'ad_1' }));