Mobilní aplikace: chat ve WebView

Pro aplikace neexistuje nativní SDK. Vaše aplikace místo něj načte stránku vytvořenou speciálně pro WebView:

https://reactive.chat/embed/SITE_KEY

Stránka nemá rám, navigaci ani tlačítko chatu: widget vyplní obrazovku a rovnou se otevře. Je to stejný chat jako na vašem webu – stejný projekt, stejný design, stejná schránka. Klíč webu najdete v účtu v části Projekt → Instalace.

Vlastnosti stránky:

• pouze pro aktivní projekty; jinak 404,
• viewport-fit=cover a bezpečná oblast – vstupní pole leží nad lištou u spodního okraje,
• pozadí v barvě vaší značky, dokud widget není připravený,
• X-Robots-Tag: noindex a frame-ancestors 'none' – stránka patří do WebView, nikoli do <iframe> na jiném webu,
• jazyk podle jazyka zařízení.

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

Umístěte WebView přes celou plochu, nikoli do oblasti vymezené safe area layout guide – stránka zohledňuje odsazení sama.

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 není volitelné: widget ukládá svá ID do úložiště WebView. Bez něj každé spuštění zahájí novou konverzaci.

Předání přihlášeného uživatele

Nikdy přes adresu. Hash v URL se dostane do historie, protokolů a hlaviček Referer. Identitu předejte po načtení přes JavaScript. userHash vypočítá váš server (Identifikace návštěvníků) – tajný klíč nepatří do balíčku aplikace, protože aplikace lze rozebrat. Při přihlášení nechte aplikaci načíst tři hodnoty z vašeho serveru.

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

Dbejte na správné escapování hodnot pro JavaScript (nejsnáze jejich serializací do JSON v aplikaci). Funguje i dřívější volání: fronta ReactiveChat.q ho přijme před načtením widgetu.

Co je ve WebView jiné

• Push oznámení nepřicházejí z chatu. Pokud má vaše aplikace oslovit uživatele, když je chat zavřený, nastavte webhook na message.created a push odešlete sami.
• Nahrávání souborů funguje na Androidu teprve tehdy, když vaše aplikace předá výběr souborů (WebChromeClient.onShowFileChooser); iOS to dělá sám.
• Tlačítko Zpět (Android): stránka nemá vlastní historii. Zacházejte s chatem jako s obrazovkou aplikace a zavřete ho místo volání web.goBack().
• Pozadí: nezahazujte WebView, když aplikace přejde na pozadí. Widget se po přerušení sám znovu připojí a následně odešle zprávy uložené ve vyrovnávací paměti (Přenos).
• Souhlas: na stránce pro vložení není platforma pro správu souhlasu; widget se proto spouští bez souhlasu a svá ID zpočátku ukládá jen po dobu existence WebView (Integrace ochrany soukromí). Ověřte ve své aplikaci, zda konverzace přetrvá po restartu aplikace.

Předání událostí do aplikace

Události widgetu můžete předávat své aplikaci přes JavaScriptový most, například pro nastavení odznaku nepřečtených zpráv:

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

Dále: Smart Answer