Hướng dẫn triển khai Webview Android cho chăm sóc khách hàng đa kênh

Hướng dẫn chi tiết cách triển khai Webview Android để tích hợp chăm sóc khách hàng đa kênh, bao gồm cấu hình cơ bản, xử lý tải file và giải quyết các vấn đề thường gặp.

1. Hướng dẫn triển khai Webview trên Android

Bạn có thể sử dụng webview trên thiết bị Android. Tải xuống demo Webview Android của SaleSmartly tại đây

1.1 Các quyền cần thiết trong App Manifest

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<br>

1.2 Cài đặt cơ bản cho Webview

// Bật JavaScript
webView.settings.javaScriptEnabled = true

// Bật localStorage
webView.settings.domStorageEnabled = true

1.3 Xử lý tải tệp lên trong Webview

Xem chi tiết code trong demo:

webView.webChromeClient = object : WebChromeClient() {
    override fun onShowFileChooser(
        webView: WebView,
        filePathCallback: ValueCallback<Array<Uri>>,
        fileChooserParams: FileChooserParams
    ): Boolean {
        println("onShowFileChooser")
        mUploadMessageAboveL = filePathCallback
        val intent = Intent(fileChooserParams.createIntent())
        intent.addCategory(Intent.CATEGORY_OPENABLE)
        intent.type = "*/*"
        intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true) // Cho phép chọn nhiều tệp
        register.launch(Intent.createChooser(intent, "Chọn tệp"))

        return true
    }

    override fun onShowCustomView(view: View, callback: CustomViewCallback) {
        // Khi video yêu cầu toàn màn hình, hiển thị view tùy chỉnh
        if (customView != null) {
            callback.onCustomViewHidden()
            return
        }

        customView = view
        customViewContainer.visibility = View.VISIBLE
        customViewContainer.addView(customView)
        customViewCallback = callback
        webView.visibility = View.GONE
        customViewContainer.bringToFront()
    }

    override fun onHideCustomView() {
        // Khi thoát chế độ toàn màn hình, khôi phục view mặc định
        customView?.let {
            customViewContainer.removeView(it)
            customView = null
            customViewContainer.visibility = View.GONE
            customViewCallback?.onCustomViewHidden()
            webView.visibility = View.VISIBLE
        }
    }

    override fun getDefaultVideoPoster(): Bitmap {
        return Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888)
    }
}

2. Câu hỏi thường gặp

2.1 Không có phản hồi khi nhấn tải ảnh hoặc tệp lên

Bạn cần ghi đè phương thức "onShowFileChooser" của webview, vui lòng tham khảo demo để biết chi tiết.

2.2 Video không thể phát toàn màn hình hoặc gặp lỗi sau khi thoát chế độ toàn màn hình

Sử dụng view tùy chỉnh khi phát toàn màn hình, ẩn nó sau khi thoát và hiển thị view gốc. Vui lòng tham khảo demo để biết chi tiết.

2.3 Không thể tải hoặc hiển thị

Vui lòng kiểm tra:

  • Quyền truy cập mạng
  • Trạng thái kết nối mạng
  • JS nhập vào trang có chính xác không
  • Plugin đã được bật chưa

Nên chạy thử trên trình duyệt trước khi tích hợp vào app.

2.4 Không phản hồi khi nhấn vào liên kết

Kiểm tra xem App có chặn hoặc xử lý liên kết mở theo cách khác không.

2.5 Sau khi nhấn liên kết, trình duyệt mở ra và trả về trang trắng

Kiểm tra cách App xử lý chuyển hướng liên kết.