トップページへ

モバイルアプリ：WebView内のチャット

iOS・Androidアプリへのreactive.chatの組み込み：WKWebViewやWebViewで/embed/SITE_KEYを開き、JavaScriptの本人情報、アップロード、戻るボタン、Webhook経由のプッシュを扱います。

アプリ用のネイティブSDKはありません。代わりに、WebView専用のページをアプリで読み込みます。

https://reactive.chat/embed/SITE_KEY

このページには枠、ナビゲーション、チャットボタンがなく、ウィジェットが画面全体に広がり、すぐに開きます。Webサイトと同じプロジェクト、デザイン、受信トレイのチャットです。サイトキーは、アカウントのプロジェクト → インストールにあります。

ページの特性：

有効なプロジェクトのみ。無効なら404。
viewport-fit=coverとセーフエリアに対応し、入力欄を下端のバーの上に配置します。
ウィジェットの準備ができるまで、背景をブランドの色で表示します。
X-Robots-Tag: noindexとframe-ancestors 'none'を設定。別のWebサイトの<iframe>ではなく、WebView用のページです。
言語は端末の言語に従います。

iOS（WKWebView）

import WebKit

let konf = WKWebViewConfiguration()
konf.allowsInlineMediaPlayback = true          // otherwise the full-screen player pulls the chat away

let web = WKWebView(frame: .zero, configuration: konf)
web.scrollView.bounces = false
web.scrollView.contentInsetAdjustmentBehavior = .never
web.load(URLRequest(url: URL(string: "https://reactive.chat/embed/SITE_KEY")!))

WebViewをセーフエリアのレイアウトガイド内ではなく、領域全体に配置します。余白はページ自体が処理します。

Android（WebView）

val web = findViewById<WebView>(R.id.chat)
web.settings.javaScriptEnabled = true
web.settings.domStorageEnabled = true            // required: no session without it
web.settings.mediaPlaybackRequiresUserGesture = false
web.webViewClient = WebViewClient()              // otherwise the system browser opens
web.loadUrl("https://reactive.chat/embed/SITE_KEY")

domStorageEnabledは必須です。ウィジェットはWebViewのストレージにIDを保存します。無効だと、起動のたびに新しい会話になります。

ログイン済みユーザーを渡す

アドレスでは絶対に渡さないでください。 URLのハッシュは、履歴、ログ、Refererヘッダーに残ります。読み込み後にJavaScriptで本人情報を渡します。userHashは運営側のサーバーが計算します（訪問者の本人確認参照）。アプリは解析できるため、シークレットをアプリのパッケージに含めてはいけません。ログイン時に、アプリがサーバーから3つの値を取得するようにしてください。

// Android, in onPageFinished
web.evaluateJavascript(
    """ReactiveChat("identify",{userId:"$id",name:"$name",userHash:"$hash",exp:$exp});""",
    null)

// iOS, in webView(_:didFinish:)
web.evaluateJavaScript(
    "ReactiveChat(\"identify\",{userId:\"\(id)\",name:\"\(name)\",userHash:\"\(hash)\",exp:\(exp)});")

値はJavaScript用に正しくエスケープしてください。アプリ内でJSONにシリアライズするのが簡単です。ウィジェットの読み込み前でも、ReactiveChat.qキューが受け付けるため、早い段階での呼び出しも機能します。

WebViewで異なる点

プッシュ通知はチャットからは送りません。閉じている間も利用者に通知するには、message.createdのWebhookを設定し、自分でプッシュを送信してください。
Androidのファイルアップロードには、アプリからのファイル選択の受け渡し（WebChromeClient.onShowFileChooser）が必要です。iOSは自動で処理します。
戻るボタン（Android）： ページ独自の履歴はありません。アプリの1画面として扱い、web.goBack()を呼ぶ代わりに閉じてください。
バックグラウンド： アプリがバックグラウンドに移っても、WebViewを破棄しないでください。ウィジェットは中断後に自動で再接続し、保持したメッセージを送信します（通信）。
同意： 埋め込みページに同意管理プラットフォームはないため、同意なしで起動し、最初はWebViewが存続する間だけIDを保存します（プライバシーの連携）。アプリの再起動後も会話が残るか、アプリ内で確認してください。

アプリにイベントを渡す

JavaScriptブリッジを通して、ウィジェットのイベントをアプリに渡せます。たとえば未読メッセージのバッジに使えます。

// Android: register web.addJavascriptInterface(Bruecke(), "App") beforehand
web.evaluateJavascript(
    "ReactiveChat('on','unread',function(e){ App.ungelesen(e.count); });", null)

次：Smart Answer

最終更新: 2026-10-25