Mobilappar: chatten i en WebView

För appar finns inget inbyggt SDK. I stället laddar appen en sida som är byggd särskilt för en WebView:

https://reactive.chat/embed/SITE_KEY

Sidan har ingen ram, ingen navigering och ingen chattknapp: widgeten fyller skärmen och är öppen direkt. Det är samma chatt som på webbplatsen – samma projekt, samma utseende, samma inkorg. Webbplatsnyckeln finns i kontot under Projekt → Installation.

Sidans egenskaper:

• bara för aktiva projekt; annars 404,
• viewport-fit=cover och säker yta – inmatningsfältet ligger ovanför fältet vid nederkanten,
• bakgrund i din profilfärg tills widgeten är redo,
• X-Robots-Tag: noindex och frame-ancestors 'none' – sidan hör hemma i en WebView, inte i en <iframe> på en annan webbplats,
• språk enligt enhetens språk.

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

Lägg WebView över hela ytan, inte i safe area layout guide – sidan tar själv hänsyn till indraget.

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 är inte valfritt: widgeten lagrar sina ID:n i WebView-lagringen. Utan det startar varje öppning en ny konversation.

Skicka med den inloggade användaren

Aldrig via adressen. En hash i en URL hamnar i historiken, i loggar och i Referer-huvuden. Skicka identiteten via JavaScript efter laddningen. Din server beräknar userHash (Identifiera besökare) – hemligheten hör inte hemma i appens installationspaket eftersom appar kan plockas isär. Låt appen hämta de tre värdena från servern vid inloggning.

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

Se till att värden kodas korrekt för JavaScript (enklast genom att serialisera dem som JSON i appen). Ett tidigare anrop fungerar också: kön ReactiveChat.q tar emot det innan widgeten har laddats.

Vad som är annorlunda i en WebView

• Pushaviseringar kommer inte från chatten. Om appen ska nå användaren när chatten är stängd ställer du in en webhook för message.created och skickar pushaviseringen själv.
• Filuppladdningar fungerar på Android först när appen förmedlar filväljaren (WebChromeClient.onShowFileChooser); iOS gör detta självt.
• Bakåtknapp (Android): sidan har ingen egen historik. Behandla chatten som en skärm i appen och stäng den i stället för att anropa web.goBack().
• Bakgrund: kasta inte bort WebView när appen går till bakgrunden. Widgeten återansluter själv efter avbrott och skickar buffrade meddelanden efteråt (Transport).
• Samtycke: det finns ingen samtyckesplattform på inbäddningssidan; widgeten startar därför utan samtycke och lagrar till en början sina ID:n bara under WebView-fönstrets livstid (Integrera integritetsskydd). Kontrollera i appen om en konversation finns kvar efter att appen startats om.

Föra in händelser i appen

Du kan förmedla widgetens händelser till appen via en JavaScript-brygga, till exempel för att visa en indikator för olästa meddelanden:

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

Nästa: Smart Answer