Mobiele apps: de chat in een WebView

Voor apps is er geen native SDK. Uw app laadt in plaats daarvan een pagina die speciaal voor een WebView is gebouwd:

https://reactive.chat/embed/SITE_KEY

De pagina heeft geen kader, navigatie of chatknop: de widget vult het scherm en staat meteen open. Het is dezelfde chat als op uw website — hetzelfde project, hetzelfde ontwerp, dezelfde inbox. De sitesleutel vindt u in uw account onder Project → Installatie.

Eigenschappen van de pagina:

• alleen voor actieve projecten; anders 404,
• viewport-fit=cover en veilig gebied — het invoerveld staat boven de balk onderaan,
• achtergrond in uw merkkleur totdat de widget klaar is,
• X-Robots-Tag: noindex en frame-ancestors 'none' — de pagina hoort in een WebView, niet in een <iframe> op een andere website,
• taal volgens de apparaattaal.

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")!))

Leg de WebView over het hele gebied, niet binnen de safe area layout guide — de pagina houdt zelf rekening met de inset.

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 is niet optioneel: de widget slaat zijn ID’s op in de opslag van de WebView. Zonder die instelling begint elke start een nieuw gesprek.

De aangemelde gebruiker doorgeven

Nooit via het adres. Een hash in een URL belandt in de geschiedenis, in logboeken en in Referer-headers. Geef de identiteit na het laden via JavaScript door. Uw server berekent de userHash (Bezoekers identificeren) — het geheim hoort niet in een app-pakket, want apps kunnen uit elkaar worden gehaald. Laat uw app bij het aanmelden de drie waarden van uw server ophalen.

// 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)});")

Zorg dat u waarden correct voor JavaScript escapet (het eenvoudigst door ze in uw app als JSON te serialiseren). Een eerdere aanroep werkt ook: de wachtrij ReactiveChat.q accepteert deze voordat de widget geladen is.

Wat anders is in een WebView

• Pushnotificaties komen niet uit de chat. Als uw app de gebruiker moet bereiken terwijl de chat gesloten is, stelt u een webhook in voor message.created en verstuurt u de push zelf.
• Bestandsuploads werken op Android pas zodra uw app de bestandskiezer doorgeeft (WebChromeClient.onShowFileChooser); iOS doet dit zelf.
• Terugknop (Android): de pagina heeft geen eigen geschiedenis. Behandel de chat als een scherm van uw app en sluit dit in plaats van web.goBack() aan te roepen.
• Achtergrond: gooi de WebView niet weg wanneer de app naar de achtergrond gaat. De widget verbindt na onderbrekingen zelf opnieuw en verzendt daarna gebufferde berichten (Transport).
• Toestemming: op de insluitpagina is geen toestemmingsplatform; de widget start daarom zonder toestemming en slaat zijn ID’s aanvankelijk alleen voor de levensduur van de WebView op (Privacyintegratie). Controleer in uw app of een gesprek na het opnieuw starten van de app blijft bestaan.

Gebeurtenissen naar de app doorgeven

U kunt de gebeurtenissen van de widget via een JavaScript-bridge aan uw app doorgeven, bijvoorbeeld om een badge voor ongelezen berichten in te stellen:

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

Volgende: Smart Answer