Мобільні застосунки: чат у WebView

Для застосунків немає нативного SDK. Натомість застосунок завантажує сторінку, створену спеціально для WebView:

https://reactive.chat/embed/SITE_KEY

Сторінка не має рамки, навігації чи кнопки чату: віджет займає екран і одразу відкритий. Це той самий чат, що й на сайті: той самий проєкт, оформлення й вхідні. Ключ сайту є в обліковому записі в розділі Проєкт → Встановлення.

Властивості сторінки:

• лише для активних проєктів; інакше 404,
• viewport-fit=cover і безпечна область — поле введення над панеллю нижнього краю,
• тло в кольорі бренду до готовності віджета,
• X-Robots-Tag: noindex і frame-ancestors 'none' — сторінка призначена для WebView, а не <iframe> на іншому сайті,
• мова відповідно до мови пристрою.

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

Розташуйте WebView на всій області, а не в safe area layout guide: сторінка сама враховує відступ.

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 не є необов’язковим: віджет зберігає ID у сховищі WebView. Без нього кожен запуск починає нову розмову.

Передавання користувача, який увійшов

Ніколи через адресу. Хеш у URL потрапляє до історії, журналів і заголовків Referer. Передавайте ідентифікацію через JavaScript після завантаження. Ваш сервер обчислює userHash (Ідентифікація відвідувачів); секрету не місце в пакеті застосунку, оскільки застосунки можна розібрати. Нехай застосунок отримує три значення з сервера під час входу.

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

Правильно екрануйте значення для JavaScript (найпростіше — серіалізувати їх як JSON у застосунку). Раніший виклик теж працює: черга ReactiveChat.q приймає його до завантаження віджета.

Що відрізняється у WebView

• Push-сповіщення не надходять із чату. Якщо застосунок має звертатися до користувача із закритим чатом, налаштуйте вебхук на message.created і надсилайте push самостійно.
• Завантаження файлів працює на Android лише після передавання вибору файлу застосунком (WebChromeClient.onShowFileChooser); iOS робить це сам.
• Кнопка «Назад» (Android): сторінка не має власної історії. Сприймайте чат як екран застосунку й закривайте його замість виклику web.goBack().
• Тло: не видаляйте WebView після переходу застосунку у фон. Віджет сам підключається після переривань і надсилає буферизовані повідомлення (Транспорт).
• Згода: на сторінці вбудовування немає платформи згоди; тому віджет починає без згоди й спочатку зберігає ID лише протягом існування WebView (Інтеграція конфіденційності). Перевірте у своєму застосунку, чи зберігається розмова після його перезапуску.

Передавання подій у застосунок

Події віджета можна передавати застосунку через міст JavaScript, наприклад для позначки непрочитаних повідомлень:

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

Далі: Smart Answer