App mobili: la chat in una WebView

Per le app non esiste un SDK nativo. La Sua app carica invece una pagina realizzata appositamente per una WebView:

https://reactive.chat/embed/SITE_KEY

La pagina non ha cornice, navigazione né pulsante della chat: il widget riempie lo schermo ed è subito aperto. È la stessa chat del Suo sito web: stesso progetto, stesso aspetto, stessa posta in arrivo. Trova la chiave del sito nell’account in Progetto → Installazione.

Proprietà della pagina:

• solo per progetti attivi; altrimenti 404,
• viewport-fit=cover e area sicura: il campo di input si trova sopra la barra sul bordo inferiore,
• sfondo nel colore del Suo marchio finché il widget non è pronto,
• X-Robots-Tag: noindex e frame-ancestors 'none': la pagina è destinata a una WebView, non a un <iframe> su un altro sito web,
• lingua secondo quella 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")!))

Estenda la WebView sull’intera area, senza limitarla alla guida di layout dell’area sicura: la pagina tiene già conto dei margini.

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 non è facoltativo: il widget memorizza i propri ID nello spazio di archiviazione della WebView. Senza questa impostazione, ogni avvio inizia una nuova conversazione.

Trasmettere l’utente che ha effettuato l’accesso

Mai tramite l’indirizzo. Un hash in un URL finisce nella cronologia, nei registri e negli header Referer. Trasmetta l’identità tramite JavaScript dopo il caricamento. È il Suo server a calcolare userHash (Identificare i visitatori): il segreto non deve stare nel pacchetto dell’app, perché le app possono essere analizzate. Faccia recuperare all’app i tre valori dal Suo server al momento dell’accesso.

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

Si assicuri di eseguire correttamente l’escape dei valori per JavaScript (il modo più semplice è serializzarli come JSON nell’app). Funziona anche una chiamata precedente: la coda ReactiveChat.q la accetta prima che il widget sia caricato.

Che cosa cambia in una WebView

• Le notifiche push non provengono dalla chat. Se la Sua app deve raggiungere l’utente mentre la chat è chiusa, configuri un webhook su message.created e invii Lei stesso la notifica push.
• Il caricamento dei file funziona su Android solo quando l’app gestisce il selettore di file (WebChromeClient.onShowFileChooser); iOS lo fa autonomamente.
• Pulsante Indietro (Android): la pagina non ha una cronologia propria. Tratti la chat come una schermata dell’app e la chiuda invece di chiamare web.goBack().
• In background: non elimini la WebView quando l’app passa in background. Il widget si riconnette autonomamente dopo le interruzioni e invia poi i messaggi in attesa (Trasporto).
• Consenso: nella pagina di incorporamento non c’è una piattaforma di consenso; il widget si avvia quindi senza consenso e inizialmente memorizza i propri ID solo per la durata della WebView (Integrazione della protezione dei dati). Verifichi nella Sua app se una conversazione sopravvive al riavvio dell’app.

Trasmettere gli eventi all’app

Può inoltrare gli eventi del widget alla Sua app tramite un bridge JavaScript, ad esempio per impostare un badge per i messaggi non letti:

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

Prosegua: Smart Answer