블로그·사이트·앱에 냥게임즈 넣기

<iframe id="nyang" src="https://nyang.games/kids/?partner=myapp"
        style="width:100%;height:100%;border:0" allow="autoplay"></iframe>
<script>
  addEventListener('message', (e) => {
    if (e.origin !== 'https://nyang.games') return;
    const m = e.data;
    if (!m || m.source !== 'nyang.games') return;
    if (m.type === 'end') console.log('점수', m.game, m.score, m.scoreText);
    if (m.type === 'close') document.getElementById('nyang').remove(); // 게임 창 닫기
  });
</script>

// Kotlin · 이름은 꼭 "NyangBridge"
class NyangBridge(private val activity: Activity) {
    @JavascriptInterface
    fun postMessage(json: String) {
        val m = JSONObject(json)
        if (m.optString("source") != "nyang.games") return
        when (m.optString("type")) {
            "end" -> Log.d("nyang", "score=${m.optInt("score")}")
            "close" -> activity.runOnUiThread { activity.finish() }
        }
    }
}

webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true   // 게임 저장(최고 기록)
webView.settings.mediaPlaybackRequiresUserGesture = false
webView.addJavascriptInterface(NyangBridge(this), "NyangBridge")
webView.loadUrl("https://nyang.games/kids/?partner=myapp")

// Swift · 핸들러 이름은 꼭 "nyang"
final class GameVC: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "nyang")
        config.allowsInlineMediaPlayback = true
        config.mediaTypesRequiringUserActionForPlayback = []
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        webView.load(URLRequest(url: URL(string: "https://nyang.games/kids/?partner=myapp")!))
    }
    func userContentController(_ c: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let m = message.body as? [String: Any], m["source"] as? String == "nyang.games" else { return }
        switch m["type"] as? String {
        case "end": print("score", m["score"] ?? 0)
        case "close": dismiss(animated: true)
        default: break
        }
    }
}

// react-native-webview
<WebView
  source={{ uri: 'https://nyang.games/kids/?partner=myapp' }}
  mediaPlaybackRequiresUserAction={false}
  onMessage={(e) => {
    const m = JSON.parse(e.nativeEvent.data);
    if (m.source !== 'nyang.games') return;
    if (m.type === 'end') console.log('score', m.score);
    if (m.type === 'close') navigation.goBack();
  }}
/>

// webview_flutter · 채널 이름은 꼭 "NyangBridge"
final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel('NyangBridge', onMessageReceived: (msg) {
    final m = jsonDecode(msg.message);
    if (m['source'] != 'nyang.games') return;
    if (m['type'] == 'end') debugPrint('score ${m['score']}');
    if (m['type'] == 'close') Navigator.of(context).pop();
  })
  ..loadRequest(Uri.parse('https://nyang.games/kids/?partner=myapp'));

www 폴더를 app/src/main/assets/nyang/에 넣고, WebViewAssetLoader로 열어요. 앱 안 파일이 https://appassets.androidplatform.net/ 주소로 열려서 사용 허가 확인까지 제대로 동작해요.

// build.gradle: implementation "androidx.webkit:webkit:1.11.0"
val loader = WebViewAssetLoader.Builder()
    .addPathHandler("/assets/", WebViewAssetLoader.AssetsPathHandler(this))
    .build()

webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true            // 최고 기록 저장
webView.settings.mediaPlaybackRequiresUserGesture = false
webView.webViewClient = object : WebViewClientCompat() {
    override fun shouldInterceptRequest(v: WebView, r: WebResourceRequest) =
        loader.shouldInterceptRequest(r.url)
}
webView.addJavascriptInterface(NyangBridge(this), "NyangBridge")   // 이름은 꼭 "NyangBridge"
webView.loadUrl("https://appassets.androidplatform.net/assets/nyang/kids/index.html")

class NyangBridge(private val activity: Activity) {
    @JavascriptInterface
    fun postMessage(json: String) {
        val m = JSONObject(json)
        if (m.optString("source") != "nyang.games") return
        when (m.optString("type")) {
            "end" -> Log.d("nyang", "score=${m.optInt("score")}")
            "close" -> activity.runOnUiThread { activity.finish() }
        }
    }
}

www 폴더를 Xcode에 폴더 참조(파란 폴더)로 넣고 이름을 nyang으로 해요.

// Swift · 핸들러 이름은 꼭 "nyang"
final class GameVC: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "nyang")
        config.allowsInlineMediaPlayback = true
        config.mediaTypesRequiringUserActionForPlayback = []
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        let dir = Bundle.main.url(forResource: "nyang", withExtension: nil)!
        webView.loadFileURL(dir.appendingPathComponent("kids/index.html"), allowingReadAccessTo: dir)
    }
    func userContentController(_ c: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let m = message.body as? [String: Any], m["source"] as? String == "nyang.games" else { return }
        switch m["type"] as? String {
        case "end": print("score", m["score"] ?? 0)
        case "close": dismiss(animated: true)
        default: break
        }
    }
}

www 폴더를 앱 번들에 넣어요 (Android는 android/app/src/main/assets/nyang/, iOS는 번들 폴더 참조).

// react-native-webview
const uri = Platform.OS === 'android'
  ? 'file:///android_asset/nyang/kids/index.html'
  : 'nyang/kids/index.html';   // iOS: 번들 안 경로

<WebView
  source={{ uri }}
  originWhitelist={['*']}
  allowFileAccess
  allowingReadAccessToURL="nyang"
  mediaPlaybackRequiresUserAction={false}
  onMessage={(e) => {
    const m = JSON.parse(e.nativeEvent.data);
    if (m.source !== 'nyang.games') return;
    if (m.type === 'end') console.log('score', m.score);
    if (m.type === 'close') navigation.goBack();
  }}
/>

www 폴더를 assets/nyang/에 넣고 pubspec.yaml의 assets에 폴더들을 적어요.

// webview_flutter · 채널 이름은 꼭 "NyangBridge"
final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel('NyangBridge', onMessageReceived: (msg) {
    final m = jsonDecode(msg.message);
    if (m['source'] != 'nyang.games') return;
    if (m['type'] == 'end') debugPrint('score ${m['score']}');
    if (m['type'] == 'close') Navigator.of(context).pop();
  })
  ..loadFlutterAsset('assets/nyang/kids/index.html');