Android(JavaScript)

Using JavaScript SDK within the Android WebView requires some extra steps.

🚧
JavaScript SDK does not provide a push notification.
Use Android SDK instead of the JavaScript SDK to support a push notification. See the instructions of Android(SDK) section to follow the best practices.

Allow new tab

To allow new tab in an Android WebView, some additional configurations are required.

webChromeClient = object : WebChromeClient() {
    override fun onCreateWindow(
        view: WebView?,
        isDialog: Boolean,
        isUserGesture: Boolean,
        resultMsg: Message?
    ): Boolean {
        // intercept new window
        val transport = resultMsg?.obj as? WebView.WebViewTransport
        val newWebView = WebView(this@WebViewActivity)

        view?.addView(newWebView)
        transport?.webView = newWebView
        resultMsg?.sendToTarget()

        newWebView.webViewClient = object : WebViewClient() {
            // handle url navigating and create new activity
            override fun shouldOverrideUrlLoading(
                    view: WebView,
                    url: String
            ): Boolean {
                return when {
                    url.startsWith("tel:") -> {
                        val intent = Intent(Intent.ACTION_DIAL, Uri.parse(url))
                        startActivity(intent)
                        true
                    }
                    url.startsWith("mailto:") -> {
                        val intent = Intent(Intent.ACTION_SENDTO, Uri.parse(url))
                        startActivity(intent)
                        true
                    }
                    else -> {
                        Intent(view.context, WebViewActivity::class.java)
                            .apply { putExtra("url", url) }
                            .also { intent -> startActivity(intent) }
                        true
                    }
                }
            }
        }

        return true
    }
}

Uploading files

If you are using Android WebView, users will not be able to launch a file chooser when they click the attachment button to send files. The problem is that WebView does not implement default file choosing behavior, so we must manually define how we handle the users' actions. With our simple solution and snippets, you will only take a minimal effort on integrating JavaScript SDK with your mobile application.

📘
We highly recommend using the Android SDK for those who are looking for effortless and straightforward experiences on mobile devices.

Allow WebView to access files and set WebChromeClient to get notified when the user wants to open the file chooser.

yourWebViewInstance.apply {
    settings.apply {
        // -- your other WebView options --

        // add this line to make WebView to access file system
        allowFileAccess = true
    }

    webChromeClient = object : WebChromeClient() {
        override fun onShowFileChooser(
                webView: WebView,
                filePathCallback: ValueCallback<Array<Uri>>,
                fileChooserParams: FileChooserParams
        ): Boolean {
                // -- snip --
        }
}

Copy our code of WebViewAttachmentModule class that is responsible for handling file chooser callbacks. Note that you may change the snippet as it is provided to help you write code faster.

🚧
Make sure to return true from onShowFileChooser
The WebChromeClient does not allow filePathCallback to be invoked if onShowFileChooser returns false. As the module always calls the callback when an intent for a file chooser is created, make sure to call getIntentChooser only if onShowFileChooser returns true.

class WebViewAttachmentModule {

    private var filePathCallback: ValueCallback<Array<Uri>>? = null

    fun getIntentChooser(filePathCallback: ValueCallback<Array<Uri>>, acceptTypes: Array<String>): Intent {
        // init filePathCallback
        this.filePathCallback?.onReceiveValue(null)
        this.filePathCallback = filePathCallback

        return Intent(Intent.ACTION_GET_CONTENT).apply {
            addCategory(Intent.CATEGORY_OPENABLE)
            type = "*/*"
            putExtra(Intent.EXTRA_MIME_TYPES, getMimeTypesFromAcceptTypes(acceptTypes))
        }
    }

    // handle onActivityResult process in activity
    fun handleResult(requestCode: Int, resultCode: Int, data: Intent?) {
        val uri = data?.data
        if (requestCode == WEB_VIEW_FILE_UPLOAD_REQUEST_CODE && resultCode == AppCompatActivity.RESULT_OK && uri != null) {
            filePathCallback?.onReceiveValue(arrayOf(uri))
        } else {
            filePathCallback?.onReceiveValue(null)
        }
        filePathCallback = null
    }

    private fun getMimeTypesFromAcceptTypes(acceptTypes: Array<String>): Array<String> {
        return (acceptTypes
                .mapNotNull { acceptType ->
                    when {
                        // Seperate case of extensions and MIME Type
                        acceptType.startsWith(".") -> MimeTypeMap.getSingleton().getMimeTypeFromExtension(acceptType.substring(1))
                        else -> acceptType
                    }
                }
                // setting "*/*" when acceptType is not exist
                .filter { it.isNotBlank() }
                .takeIf { it.isNotEmpty() }
                ?: listOf("*/*"))
                .toTypedArray()
    }
}

Usage sample

🚧
Please change the following sample code to fit your requirements.

class WebViewActivity : AppCompatActivity() {
  
    private val attachmentModule = WebViewAttachmentModule()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web_view)

        webview.webViewClient = WebViewClient()

        val url = intent.getStringExtra("url") ?: SOME_DEFAULT_URL

        webview.apply {
            settings.apply {
                // WebView settings
                javaScriptEnabled = true
                domStorageEnabled = true
                useWideViewPort = true
                allowFileAccess = true

                setSupportMultipleWindows(true)
                javaScriptCanOpenWindowsAutomatically = true
            }

            webChromeClient = object : WebChromeClient() {
                // handle file uploads
                override fun onShowFileChooser(
                        webView: WebView,
                        filePathCallback: ValueCallback<Array<Uri>>,
                        fileChooserParams: FileChooserParams
                ): Boolean {
                    startActivityForResult(
                            attachmentModule.getIntentChooser(
                                    filePathCallback,
                                    fileChooserParams.acceptTypes,
                            ),
                            Const.WEB_VIEW_FILE_UPLOAD_REQUEST_CODE,
                    ) // Call getIntentChooser() only if the function returns true.
                    return true
                }
              
                override fun onCreateWindow(
                    view: WebView?,
                    isDialog: Boolean,
                    isUserGesture: Boolean,
                    resultMsg: Message?
                ): Boolean {
                    // intercept new window
                    val transport = resultMsg?.obj as? WebView.WebViewTransport
                    val newWebView = WebView(this@WebViewActivity)

                    view?.addView(newWebView)
                    transport?.webView = newWebView
                    resultMsg?.sendToTarget()

                    newWebView.webViewClient = object : WebViewClient() {
                        // handle URL navigation
                        override fun shouldOverrideUrlLoading(
                                view: WebView,
                                url: String
                        ): Boolean {
                            return when {
                                url.startsWith("tel:") -> {
                                    val intent = Intent(Intent.ACTION_DIAL, Uri.parse(url))
                                    startActivity(intent)
                                    true
                                }
                                url.startsWith("mailto:") -> {
                                    val intent = Intent(Intent.ACTION_SENDTO, Uri.parse(url))
                                    startActivity(intent)
                                    true
                                }
                                else -> {
                                    Intent(view.context, WebViewActivity::class.java)
                                        .apply { putExtra("url", url) }
                                        .also { intent -> startActivity(intent) }
                                    true
                                }
                            }
                        }
                    }

                    return true
                }
            }
        }

        webview.loadUrl(url)
    }
  
    // handle file upload
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        attachmentModule.handleResult(requestCode, resultCode, data)

        super.onActivityResult(requestCode, resultCode, data)
    }
}

Android(SDK)

Instead of embedding JavaScript SDK to the WebView, you might decide to use Android SDK along with the WebView. A major reason for the decision is when you need to send a push notification. See how to get started with the Android SDK and enabling the push notification.

❗️
Hide redundant Channel SDK UI.
When using both JavaScript SDK and Android SDK, set hideChannelButtonOnBoot and hidePopup=true in Boot Option of JavaScript SDK to hide the Channel button and popups. Android SDK and JavaScript SDK might duplicate Channel SDK UI.

To allow Android SDK to know the current URL of the WebView, call setPage with appropriate data. Event tracking and support bot targeting will work smoothly with the information.

webChromeClient = object : WebChromeClient() {
    override fun onCreateWindow(
        view: WebView?,
        isDialog: Boolean,
        isUserGesture: Boolean,
        resultMsg: Message?
    ): Boolean {
        // intercept new window
        val transport = resultMsg?.obj as? WebView.WebViewTransport
        val newWebView = WebView(this@WebViewActivity)

        view?.addView(newWebView)
        transport?.webView = newWebView
        resultMsg?.sendToTarget()

        newWebView.webViewClient = object : WebViewClient() {
            // handle url navigating and create new activity
            override fun shouldOverrideUrlLoading(
                    view: WebView,
                    url: String
            ): Boolean {
                return when {
                    url.startsWith("tel:") -> {
                        val intent = Intent(Intent.ACTION_DIAL, Uri.parse(url))
                        startActivity(intent)
                        true
                    }
                    url.startsWith("mailto:") -> {
                        val intent = Intent(Intent.ACTION_SENDTO, Uri.parse(url))
                        startActivity(intent)
                        true
                    }
                    else -> {
                        Intent(view.context, WebViewActivity::class.java)
                            .apply { putExtra("url", url) }
                            .also { intent -> startActivity(intent) }
                        true
                    }
                }
            }
        }

        return true
    }
}

iOS

This section describes how to use the JavaScript SDK installed on the mobile web in an iOS WebView environment.

🚧
Push Notification doesn’t work if you are using only JavaScript.
To use the push notification, Refers ChannelIO iOS SDK

The Following Example loads a page with a URL in your YOUR_WEB_URL on any WebView ViewController.

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
  
  var webView: WKWebView!
  var url: String = "YOUR_WEB_URL"
  override func loadView() {
    let config = WKWebViewConfiguration()
    config.allowsInlineMediaPlayback = true  // #1. modify to true inlineMediaPlay option
    
    webView = WKWebView(frame: .zero, configuration: config)
    webView.uiDelegate = self
    view = webView  }
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    let myURL = URL(string:self.url)
    let myRequest = URLRequest(url: myURL!)
    webView.load(myRequest)
  }
  
  // #2. target blank handleing
  func webView(
    _ webView: WKWebView, 
    createWebViewWith configuration: WKWebViewConfiguration, 
    for navigationAction: WKNavigationAction, 
    windowFeatures: WKWindowFeatures) -> WKWebView? {
    if navigationAction.targetFrame == nil {
      webView.load(navigationAction.request)
    }
    return nil
  }
}

Additional Requirements

These requirements are already described above. each are marked as #1 and #2.

# 1. allowsInlineMediaPlayback

allowsInlineMediaPlayback is a configuration option for whether HTML5 video plays as inline or as full screen. The default value is false. Therefore, If there is a video in the SDK, It will play as full screen automatically.

To fix this, you should modify the allowsInlineMediaPlayback to true.

# 2. Target black handling

All of the link property of the Channel.io JavaScript SDK is target="_blank". Thus, It will open with a new tap.
However, WKWebView can't handle target="_blank" automatically, you should add this code example to deal with.

This example is If the link action is from target="_blank", retrieve the link from action and load the URL on the WebView.