Applications mobiles : le chat dans une WebView

Il n’existe aucun SDK natif pour les applications. Votre application charge à la place une page conçue spécialement pour une WebView :

https://reactive.chat/embed/SITE_KEY

Cette page n’a ni cadre, ni navigation, ni bouton du chat : le widget remplit l’écran et est immédiatement ouvert. C’est le même chat que sur votre site : même projet, même design, même boîte de réception. La clé de site se trouve dans votre compte sous Projet → Installation.

Propriétés de la page :

• uniquement pour les projets actifs ; sinon 404,
• viewport-fit=cover et zone de sécurité : le champ de saisie se place au-dessus de la barre en bas de l’écran,
• arrière-plan dans votre couleur de marque jusqu’à ce que le widget soit prêt,
• X-Robots-Tag: noindex et frame-ancestors 'none' : la page est destinée à une WebView, pas à un <iframe> sur un autre site,
• langue selon celle de l’appareil.

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

Placez la WebView sur toute la surface, pas dans le guide de mise en page de la zone de sécurité : la page gère elle-même les marges de sécurité.

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’est pas facultatif : le widget stocke ses identifiants dans le stockage de la WebView. Sans ce réglage, chaque lancement démarre une nouvelle conversation.

Transmettre l’utilisateur connecté

Jamais via l’adresse. Un hachage dans une URL se retrouve dans l’historique, les journaux et les en-têtes Referer. Transmettez l’identité par JavaScript après le chargement. Votre serveur calcule le userHash (Identifier les visiteurs) ; le secret ne doit pas figurer dans le paquet de l’application, car les applications peuvent être désassemblées. Faites récupérer les trois valeurs par votre application auprès de votre serveur lors de la connexion.

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

Veillez à échapper correctement les valeurs pour JavaScript (le plus simple est de les sérialiser en JSON dans votre application). Un appel plus précoce fonctionne aussi : la file ReactiveChat.q l’accepte avant le chargement du widget.

Ce qui change dans une WebView

• Les notifications push ne proviennent pas du chat. Si votre application doit joindre l’utilisateur lorsque le chat est fermé, configurez un webhook sur message.created et envoyez vous-même la notification push.
• Les envois de fichiers ne fonctionnent sur Android que lorsque votre application transmet la sélection de fichier (WebChromeClient.onShowFileChooser) ; iOS le fait lui-même.
• Bouton Retour (Android) : la page ne possède pas d’historique propre. Traitez le chat comme un écran de votre application et fermez-le au lieu d’appeler web.goBack().
• Arrière-plan : ne détruisez pas la WebView lorsque l’application passe en arrière-plan. Le widget se reconnecte lui-même après les interruptions et envoie ensuite les messages mis en tampon (Transport).
• Consentement : aucune plateforme de consentement n’est présente sur la page d’intégration ; le widget démarre donc sans consentement et stocke initialement ses identifiants uniquement pour la durée de vie de la WebView (Intégration de la confidentialité). Vérifiez dans votre application si une conversation se maintient après son redémarrage.

Transmettre les événements à l’application

Vous pouvez transmettre les événements du widget à votre application via un pont JavaScript, par exemple pour afficher un badge de messages non lus :

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

Suite : Smart Answer