Aplicativos móveis: o chat em uma WebView

Para aplicativos, não há SDK nativo. Em vez disso, seu aplicativo carrega uma página criada especificamente para uma WebView:

https://reactive.chat/embed/SITE_KEY

A página não tem moldura, navegação nem botão do chat: o widget preenche a tela e já começa aberto. É o mesmo chat do seu site: mesmo projeto, mesmo design, mesma caixa de entrada. A chave do site está na conta, em Projeto → Instalação.

Propriedades da página:

• somente para projetos ativos; caso contrário, 404,
• viewport-fit=cover e área segura – o campo de entrada fica acima da barra na borda inferior,
• fundo na cor da sua marca até o widget ficar pronto,
• X-Robots-Tag: noindex e frame-ancestors 'none' – a página deve ficar em uma WebView, não em um <iframe> em outro site,
• idioma conforme o idioma do dispositivo.

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

Posicione a WebView sobre a área inteira, não dentro do guia de layout da área segura: a página já considera os recuos por conta própria.

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 não é opcional: o widget armazena seus IDs no armazenamento da WebView. Sem isso, cada abertura inicia uma nova conversa.

Passar o usuário conectado

Nunca pelo endereço. Um hash em uma URL acaba no histórico, em logs e em cabeçalhos Referer. Passe a identidade por JavaScript depois do carregamento. Seu servidor calcula o userHash (Identificar visitantes); o segredo não deve ficar no pacote do aplicativo, pois aplicativos podem ser desmontados. Faça seu aplicativo buscar os três valores no servidor ao entrar.

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

Garanta o escape correto dos valores para JavaScript (a forma mais simples é serializá-los como JSON no aplicativo). Uma chamada anterior também funciona: a fila ReactiveChat.q a aceita antes de o widget carregar.

O que muda em uma WebView

• Notificações push não vêm do chat. Se o aplicativo precisar alcançar o usuário enquanto o chat estiver fechado, configure um webhook para message.created e envie a notificação por conta própria.
• Uploads de arquivos só funcionam no Android depois que seu aplicativo repassa o seletor de arquivos (WebChromeClient.onShowFileChooser); o iOS faz isso sozinho.
• Botão Voltar (Android): a página não tem histórico próprio. Trate o chat como uma tela do aplicativo e feche-o em vez de chamar web.goBack().
• Segundo plano: não descarte a WebView quando o aplicativo for para segundo plano. O widget se reconecta sozinho após interrupções e envia depois as mensagens armazenadas em buffer (Transporte).
• Consentimento: não há plataforma de consentimento na página de incorporação; por isso, o widget começa sem consentimento e inicialmente armazena seus IDs apenas durante a vida útil da WebView (Integração de privacidade). Verifique no aplicativo se uma conversa sobrevive ao reinício do aplicativo.

Receber eventos no aplicativo

Você pode repassar os eventos do widget ao aplicativo por uma ponte JavaScript, por exemplo, para definir um indicador de mensagens não lidas:

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

A seguir: Smart Answer