@tenqube/visual-reward-react-native 1.1.3

package/src/RewardWebView.tsx

@@ -0,0 +1,552 @@
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import {
+  AppState,
+  AppStateStatus,
+  Linking,
+  Platform,
+  StyleSheet,
+  View,
+} from "react-native";
+import WebView, { WebViewMessageEvent } from "react-native-webview";
+import type { WebViewNavigation } from "react-native-webview/lib/WebViewTypes";
+import DeviceInfo from "react-native-device-info";
+import AdvertisingIdAaid from "react-native-idfa-aaid";
+import NetInfo from "@react-native-community/netinfo";
+import Orientation from "react-native-orientation-locker";
+
+import type { RewardWebViewHandle, RewardWebViewProps } from "./types";
+import { isAllowedDomain, normalizeUrl } from "./utils";
+import {
+  attachAdBridges,
+  handleIntentScheme,
+  hasTrackingDescription,
+} from "./NativeVisualReward";
+
+// ─── ATT 요청 (iOS) ──────────────────────────────────────────────────────────
+// react-native-permissions로 ATT 권한 요청.
+// NSUserTrackingUsageDescription이 없으면 try/catch로 스킵.
+let requestTrackingPermission: (() => Promise<void>) | null = null;
+if (Platform.OS === "ios") {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { request, PERMISSIONS } = require("react-native-permissions") as {
+      request: (permission: string) => Promise<string>;
+      PERMISSIONS: { IOS: { APP_TRACKING_TRANSPARENCY: string } };
+    };
+    requestTrackingPermission = async () => {
+      await request(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY);
+    };
+  } catch (_) {
+    requestTrackingPermission = null;
+  }
+}
+
+// ─── 폴리필 스크립트 ──────────────────────────────────────────────────────────
+/**
+ * Android / iOS 양쪽 호출 방식을 통합하는 폴리필을 웹뷰에 주입합니다.
+ *
+ * Android 방식:
+ *   window.nativeBridge.openExternalBrowser(url)          ← url 직접 문자열
+ *   window.nativeBridge.pushUrl(JSON.stringify({url,replace}))
+ *   window.nativeBridge.<fncName>(JSON.stringify(params))
+ *
+ * iOS 방식:
+ *   window.webkit.messageHandlers.nativeBridge.postMessage(JSON.stringify({fncName, params}))
+ *
+ * 통합 후 내부적으로 ReactNativeWebView.postMessage({fncName, params}) 로 전달.
+ */
+const POLYFILL_SCRIPT = `
+(function() {
+  if (window.__rnBridgeInjected) return;
+  window.__rnBridgeInjected = true;
+
+  function _post(fncName, params) {
+    window.ReactNativeWebView.postMessage(JSON.stringify({ fncName: fncName, params: params || {} }));
+  }
+
+  // ── Android 방식: window.nativeBridge.xxx(...) ──
+  var _androidHandlers = [
+    'getAppVersion','getADID','getIDFA','getIDFV',
+    'getDeviceInfo','registerBackKeyListener','unregisterBackKeyListener',
+    'swipeBackEnabled','finish'
+  ];
+  var nativeBridgeObj = {};
+  _androidHandlers.forEach(function(name) {
+    nativeBridgeObj[name] = function(arg) {
+      var params = {};
+      if (typeof arg === 'string') {
+        try { params = JSON.parse(arg); } catch(_) { params = { value: arg }; }
+      } else if (arg && typeof arg === 'object') {
+        params = arg;
+      }
+      _post(name, params);
+    };
+  });
+  nativeBridgeObj['openTrackingSettings'] = function() {
+    _post('openTrackingSettings', {});
+  };
+  // openExternalBrowser: url이 직접 문자열 파라미터
+  nativeBridgeObj['openExternalBrowser'] = function(url) {
+    _post('openExternalBrowser', { url: url });
+  };
+  // pushUrl: JSON 문자열 파라미터
+  nativeBridgeObj['pushUrl'] = function(jsonStr) {
+    var params = {};
+    try { params = JSON.parse(jsonStr); } catch(_) {}
+    _post('pushUrl', params);
+  };
+  window.nativeBridge = nativeBridgeObj;
+
+  // ── iOS 방식: window.webkit.messageHandlers.nativeBridge.postMessage(...) ──
+  if (!window.webkit) window.webkit = {};
+  if (!window.webkit.messageHandlers) window.webkit.messageHandlers = {};
+  window.webkit.messageHandlers.nativeBridge = {
+    postMessage: function(jsonStr) {
+      var obj = {};
+      try { obj = JSON.parse(jsonStr); } catch(_) {}
+      _post(obj.fncName, obj.params);
+    }
+  };
+
+  // ── nativeCallback 객체 초기화 ──
+  if (!window.nativeCallback) window.nativeCallback = {};
+})();
+true;
+`;
+
+// ─── 컴포넌트 ─────────────────────────────────────────────────────────────────
+
+const RewardWebView = React.forwardRef<RewardWebViewHandle, RewardWebViewProps>(
+  function RewardWebView(
+    {
+      url,
+      allowedDomains,
+      debugEnabled = false,
+      onClose,
+    },
+    ref,
+  ) {
+    const webViewRef = useRef<WebView>(null);
+    const backKeyListenerRegisteredRef = useRef(false);
+    const canGoBackRef = useRef(false);
+    const [swipeBackEnabled, setSwipeBackEnabled] = useState(true);
+    // 로드 단계: (Android 전용) 먼저 about:blank 를 띄운 뒤 네이티브 브릿지(AdPopcorn/GMA)를
+    // 주입하고, 그 다음 실제 오퍼월 URL 을 로드한다. (Android addJavascriptInterface 가
+    // "다음 로드"부터 적용되는 특성 때문 — 리로드 없이 브릿지가 실제 페이지에 바인딩되게 한다.)
+    //
+    // iOS 는 about:blank 를 쓰지 않는다: react-native-webview(iOS) 는 host 가 없는 URL 을
+    // loadRequest 가 아닌 loadFileURL: 로 라우팅하는데, about:blank 은 file URL 이 아니라서
+    // NSInvalidArgumentException(SIGABRT) 로 앱이 죽는다. iOS 는 실제 URL 을 바로 로드하고
+    // 로드 완료(onLoadEnd) 후 WK 스크립트 핸들러(AdPopcorn)/GMA 를 부착한다.
+    const [loadPhase, setLoadPhase] = useState<"blank" | "real">(
+      Platform.OS === "android" ? "blank" : "real",
+    );
+    const attachStartedRef = useRef(false);
+
+    // 허용 도메인: url의 host도 자동 포함
+    const effectiveDomains = React.useMemo(() => {
+      const domains = allowedDomains.map((d) => d.toLowerCase());
+      try {
+        const host = new URL(normalizeUrl(url)).hostname;
+        if (
+          host &&
+          !domains.some((d) => host === d || host.endsWith(`.${d}`))
+        ) {
+          domains.push(host.toLowerCase());
+        }
+      } catch (_) {}
+      return domains;
+    }, [allowedDomains, url]);
+
+    // ── 세로 모드 고정 ──────────────────────────────────────────────────────────
+    useEffect(() => {
+      Orientation.lockToPortrait();
+      return () => {
+        Orientation.unlockAllOrientations();
+      };
+    }, []);
+
+    // ── 백그라운드 진입 시 미디어 중단 ─────────────────────────────────────────
+    useEffect(() => {
+      const handleAppStateChange = (nextState: AppStateStatus) => {
+        if (nextState === "background" || nextState === "inactive") {
+          // JS로 video/audio 일시정지
+          webViewRef.current?.injectJavaScript(
+            `(function(){
+            var els=document.querySelectorAll('video,audio');
+            for(var i=0;i<els.length;i++){try{els[i].pause();}catch(_){}}
+          })(); true;`,
+          );
+        }
+      };
+      const sub = AppState.addEventListener("change", handleAppStateChange);
+      return () => sub.remove();
+    }, []);
+
+    // ── Back 키 처리 (VisualRewardContainer에서 호출) ──────────────────────────────
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleBackPress: () => {
+          if (backKeyListenerRegisteredRef.current) {
+            webViewRef.current?.injectJavaScript(
+              `(function(){
+              if(window.nativeCallback&&typeof window.nativeCallback.onBackKeyPress==='function')
+                window.nativeCallback.onBackKeyPress();
+            })(); true;`,
+            );
+            return true;
+          }
+          if (canGoBackRef.current) {
+            webViewRef.current?.goBack();
+            return true;
+          }
+          return false;
+        },
+      }),
+      [],
+    );
+
+    // ── Native → JS 콜백 ────────────────────────────────────────────────────────
+    const callNativeCallback = useCallback(
+      (fnName: string, value: string, rawValue = false) => {
+        const jsValue = rawValue ? value : JSON.stringify(value);
+        const safeFnName = JSON.stringify(fnName);
+        webViewRef.current?.injectJavaScript(
+          `(function(){
+          var cb=window.nativeCallback&&window.nativeCallback[${safeFnName}];
+          if(typeof cb==='function')cb(${jsValue});
+        })(); true;`,
+        );
+      },
+      [],
+    );
+
+    // ── URL 정책 ────────────────────────────────────────────────────────────────
+    const shouldOpenExternally = useCallback(
+      (uri: string): boolean => {
+        try {
+          const parsed = new URL(uri);
+          const scheme = parsed.protocol.replace(":", "").toLowerCase();
+          if (scheme === "http" || scheme === "https") {
+            return !isAllowedDomain(parsed.hostname, effectiveDomains);
+          }
+          if (scheme === "about") return false;
+          return true;
+        } catch (_) {
+          return true;
+        }
+      },
+      [effectiveDomains],
+    );
+
+    const openExternally = useCallback(async (uri: string) => {
+      try {
+        // Android intent:// / market:// 은 네이티브에서 처리
+        // (Intent.parseUri + package 실행 + browser_fallback_url + Play Store 폴백).
+        if (Platform.OS === "android") {
+          const lower = uri.toLowerCase();
+          if (lower.startsWith("intent://") || lower.startsWith("market://")) {
+            const handled = await handleIntentScheme(uri);
+            if (handled) return;
+          }
+        }
+        await Linking.openURL(uri);
+      } catch (_) {}
+    }, []);
+
+    // ── JS 메시지 핸들러 ─────────────────────────────────────────────────────────
+    const handleMessage = useCallback(
+      async (event: WebViewMessageEvent) => {
+        let fncName = "";
+        let params: Record<string, unknown> = {};
+        try {
+          const data = JSON.parse(event.nativeEvent.data) as {
+            fncName: string;
+            params?: Record<string, unknown>;
+          };
+          fncName = data.fncName ?? "";
+          params = data.params ?? {};
+        } catch (_) {
+          return;
+        }
+
+        switch (fncName) {
+          // ── getAppVersion ──────────────────────────────────────────────────
+          case "getAppVersion": {
+            let version = "";
+            try {
+              version = DeviceInfo.getVersion();
+            } catch (_) {}
+            callNativeCallback("getAppVersion", version);
+            break;
+          }
+
+          // ── getADID (Android only) ─────────────────────────────────────────
+          case "getADID": {
+            let adId = "";
+            if (Platform.OS === "android") {
+              try {
+                const result = await AdvertisingIdAaid.getAdvertisingInfo();
+                const id = result.id ?? "";
+                if (id !== "00000000-0000-0000-0000-000000000000") adId = id;
+              } catch (_) {}
+            }
+            callNativeCallback("getADID", adId);
+            break;
+          }
+
+          // ── getIDFA (iOS only) ────────────────────────────────────────────
+          case "getIDFA": {
+            let idfa = "";
+            if (Platform.OS === "ios") {
+              try {
+                const result = await AdvertisingIdAaid.getAdvertisingInfo();
+                const id = result.id ?? "";
+                if (id !== "00000000-0000-0000-0000-000000000000") idfa = id;
+              } catch (_) {}
+            }
+            callNativeCallback("getIDFA", idfa);
+            break;
+          }
+
+          // ── getIDFV (iOS only) ────────────────────────────────────────────
+          case "getIDFV": {
+            let idfv = "";
+            if (Platform.OS === "ios") {
+              try {
+                idfv = await DeviceInfo.getUniqueId();
+              } catch (_) {}
+            }
+            callNativeCallback("getIDFV", idfv);
+            break;
+          }
+
+          // ── getDeviceInfo ─────────────────────────────────────────────────
+          case "getDeviceInfo": {
+            const info: Record<string, string> = {};
+            try {
+              const netState = await NetInfo.fetch();
+              if (netState.type === "wifi") info.network = "wifi";
+              else if (netState.type === "cellular") info.network = "mobile";
+            } catch (_) {}
+            try {
+              if (Platform.OS === "android") {
+                info.model = DeviceInfo.getModel();
+                info.manufacturer = await DeviceInfo.getManufacturer();
+                info.osVersion = DeviceInfo.getSystemVersion();
+              } else {
+                // iOS: hardware id (예: "iPhone16,1")
+                info.model = await DeviceInfo.getDeviceId();
+                info.manufacturer = "Apple";
+                info.osVersion = DeviceInfo.getSystemVersion();
+              }
+            } catch (_) {}
+            callNativeCallback("getDeviceInfo", JSON.stringify(info));
+            break;
+          }
+
+          // ── registerBackKeyListener (Android only) ────────────────────────
+          case "registerBackKeyListener": {
+            if (Platform.OS === "android") {
+              backKeyListenerRegisteredRef.current = true;
+              callNativeCallback("registerBackKeyListener", "1");
+            } else {
+              callNativeCallback("registerBackKeyListener", "0");
+            }
+            break;
+          }
+
+          // ── unregisterBackKeyListener (Android only) ──────────────────────
+          case "unregisterBackKeyListener": {
+            backKeyListenerRegisteredRef.current = false;
+            break;
+          }
+
+          // ── swipeBackEnabled (iOS only) ───────────────────────────────────
+          case "swipeBackEnabled": {
+            if (Platform.OS === "ios") {
+              const enabled = params.enabled !== false;
+              setSwipeBackEnabled(enabled);
+            }
+            break;
+          }
+
+          // ── finish ────────────────────────────────────────────────────────
+          case "finish": {
+            onClose?.();
+            break;
+          }
+
+          // ── openTrackingSettings ─────────────────────────────────────────
+          case "openTrackingSettings": {
+            try { await Linking.openSettings(); } catch (_) {}
+            break;
+          }
+
+          // ── openExternalBrowser ───────────────────────────────────────────
+          case "openExternalBrowser": {
+            const targetUrl = params.url as string | undefined;
+            if (targetUrl) {
+              await openExternally(normalizeUrl(targetUrl));
+            }
+            break;
+          }
+
+          // ── pushUrl ───────────────────────────────────────────────────────
+          case "pushUrl": {
+            const pushTarget = params.url as string | undefined;
+            const replace = params.replace === true;
+            if (pushTarget) {
+              const normalized = JSON.stringify(normalizeUrl(pushTarget));
+              if (replace) {
+                webViewRef.current?.injectJavaScript(
+                  `window.location.replace(${normalized}); true;`,
+                );
+              } else {
+                webViewRef.current?.injectJavaScript(
+                  `window.location.assign(${normalized}); true;`,
+                );
+              }
+            }
+            break;
+          }
+
+          default:
+            break;
+        }
+      },
+      [callNativeCallback, onClose, openExternally],
+    );
+
+    // ── URL 네비게이션 정책 ──────────────────────────────────────────────────────
+    const handleShouldStartLoadWithRequest = useCallback(
+      (request: WebViewNavigation): boolean => {
+        const uri = request.url;
+        if (!uri || uri === "about:blank") return true;
+
+        if (Platform.OS === "ios") {
+          // iOS(Swift SDK 와 동일): 메인 프레임은 항상 평가하고,
+          // 서브프레임(iframe)은 사용자가 직접 누른 링크(navigationType 'click')가
+          // 외부 대상일 때만 가로챈다 — 광고 iframe 자체 네비게이션이 깨지지 않도록.
+          const isTopFrame =
+            (request as { isTopFrame?: boolean }).isTopFrame !== false;
+          if (isTopFrame) {
+            if (shouldOpenExternally(uri)) {
+              openExternally(uri);
+              return false;
+            }
+            return true;
+          }
+          if (request.navigationType === "click" && shouldOpenExternally(uri)) {
+            openExternally(uri);
+            return false;
+          }
+          return true;
+        }
+
+        // Android(Kotlin SDK 와 동일): 모든 프레임 평가.
+        if (shouldOpenExternally(uri)) {
+          openExternally(uri);
+          return false;
+        }
+        return true;
+      },
+      [shouldOpenExternally, openExternally],
+    );
+
+    // 실제 오퍼월 URL (스킴 보정).
+    const realUrl = React.useMemo(() => normalizeUrl(url), [url]);
+
+    // about:blank 로드 완료 시 1회: (iOS) ATT 요청 → 네이티브 브릿지(AdPopcorn/GMA) 주입 →
+    // 실제 오퍼월 URL 로드. 실제 URL 은 브릿지가 바인딩된 뒤 로드되므로 리로드가 필요 없다.
+    const handleLoadEnd = useCallback(async () => {
+      if (attachStartedRef.current) return; // 실제 URL 로드 완료 시엔 재실행 안 함
+      attachStartedRef.current = true;
+      if (Platform.OS === "ios" && requestTrackingPermission) {
+        try {
+          if (await hasTrackingDescription()) {
+            await requestTrackingPermission();
+          }
+        } catch (_) {}
+      }
+      try {
+        await attachAdBridges();
+      } catch (_) {}
+      setLoadPhase("real");
+    }, []);
+
+    return (
+      <View style={styles.container}>
+        <WebView
+          ref={webViewRef}
+          source={loadPhase === "real" ? { uri: realUrl } : { uri: "about:blank" }}
+          style={styles.webView}
+          // ── JS / 저장소 ────────────────────────────────────────────────────
+          javaScriptEnabled
+          domStorageEnabled
+          // ── window.open 허용 (다른 플랫폼과 동일) ──────────────────────────
+          javaScriptCanOpenWindowsAutomatically
+          setSupportMultipleWindows
+          // ── WebView 내부 광고의 쿠키 기반 타게팅·빈도제한·전환측정 (Android) ──
+          thirdPartyCookiesEnabled
+          sharedCookiesEnabled
+          // ── 미디어 자동재생 ────────────────────────────────────────────────
+          mediaPlaybackRequiresUserAction={false}
+          allowsInlineMediaPlayback
+          bounces={false}
+          // allowsPictureInPictureMediaPlayback: react-native-webview 미지원
+          // ── Mixed Content (Android) ────────────────────────────────────────
+          mixedContentMode="always"
+          // ── iOS 스와이프 백 ─────────────────────────────────────────────────
+          allowsBackForwardNavigationGestures={swipeBackEnabled}
+          // ── 디버그 ─────────────────────────────────────────────────────────
+          webviewDebuggingEnabled={debugEnabled}
+          // ── window.open 처리 ───────────────────────────────────────────────
+          // react-native-webview: onOpenWindow으로 window.open 인터셉트
+          onOpenWindow={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            const targetUrl = nativeEvent.targetUrl;
+            if (!targetUrl) return;
+            if (shouldOpenExternally(targetUrl)) {
+              openExternally(targetUrl);
+            } else {
+              webViewRef.current?.injectJavaScript(
+                `window.location.assign(${JSON.stringify(targetUrl)}); true;`,
+              );
+            }
+          }}
+          // ── URL 로딩 정책 ─────────────────────────────────────────────────
+          onNavigationStateChange={(navState) => {
+            canGoBackRef.current = navState.canGoBack;
+          }}
+          // ── about:blank 로드 완료 → 네이티브 브릿지 주입 → 실제 URL 로드 ──
+          onLoadEnd={handleLoadEnd}
+          onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
+          // ── JS 폴리필 주입 ─────────────────────────────────────────────────
+          injectedJavaScriptBeforeContentLoaded={POLYFILL_SCRIPT}
+          // ── JS → Native 메시지 ────────────────────────────────────────────
+          onMessage={handleMessage}
+        />
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#ffffff",
+  },
+  webView: {
+    flex: 1,
+  },
+});
+
+export default RewardWebView;