Aplicaciones móviles: el chat en una WebView

No hay un SDK nativo para aplicaciones. En su lugar, su aplicación carga una página diseñada específicamente para una WebView:

https://reactive.chat/embed/SITE_KEY

La página no tiene marco, navegación ni botón del chat: el widget ocupa la pantalla y está abierto desde el principio. Es el mismo chat que en su sitio web: el mismo proyecto, el mismo diseño y la misma bandeja de entrada. Encontrará la clave del sitio en Proyecto → Instalación de su cuenta.

Propiedades de la página:

• solo para proyectos activos; en caso contrario, 404,
• viewport-fit=cover y área segura: el campo de entrada queda por encima de la barra del borde inferior,
• fondo del color de su marca hasta que el widget esté listo,
• X-Robots-Tag: noindex y frame-ancestors 'none': la página debe utilizarse en una WebView, no en un <iframe> de otro sitio web,
• idioma según el idioma del 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")!))

Extienda la WebView sobre toda el área, no dentro de la guía de diseño del área segura: la página ya tiene en cuenta el margen por sí misma.

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 no es opcional: el widget guarda sus ID en el almacenamiento de la WebView. Sin él, cada inicio crea una conversación nueva.

Transmitir el usuario con sesión iniciada

Nunca mediante la dirección. Un hash en una URL acaba en el historial, en registros y en cabeceras Referer. Transmita la identidad mediante JavaScript después de cargar. Su servidor calcula userHash (Identificar visitantes); el secreto no debe incluirse en el paquete de la aplicación, porque las aplicaciones se pueden desensamblar. Haga que su aplicación obtenga los tres valores de su servidor al iniciar sesión.

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

Asegúrese de escapar correctamente los valores para JavaScript (lo más sencillo es serializarlos como JSON en su aplicación). También funciona una llamada anterior: la cola ReactiveChat.q la acepta antes de que se haya cargado el widget.

Qué cambia en una WebView

• Las notificaciones push no proceden del chat. Si su aplicación debe avisar al usuario mientras el chat esté cerrado, configure un webhook para message.created y envíe usted la notificación push.
• Las cargas de archivos solo funcionan en Android cuando su aplicación gestiona el selector de archivos (WebChromeClient.onShowFileChooser); iOS lo hace por sí mismo.
• Botón de retroceso (Android): la página no tiene historial propio. Trate el chat como una pantalla de su aplicación y ciérrelo en lugar de llamar a web.goBack().
• Segundo plano: no descarte la WebView cuando la aplicación pase a segundo plano. El widget se reconecta por sí solo tras las interrupciones y envía después los mensajes almacenados en búfer (Transporte).
• Consentimiento: no hay una plataforma de consentimiento en la página de inserción; por tanto, el widget se inicia sin consentimiento y, al principio, solo guarda sus ID durante la vida de la WebView (Integración de privacidad). Compruebe en su aplicación si una conversación se conserva tras reiniciar la aplicación.

Llevar eventos a la aplicación

Puede transmitir los eventos del widget a su aplicación mediante un puente de JavaScript, por ejemplo para mostrar un indicador de mensajes sin leer:

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

Siguiente: Smart Answer