CSS Styles not getting loaded only plain HTML loading for Mobile and Chrome browser for Salesforce chat UI

Question

Html page content on being load Webview using LoadDataWithBaseURL and it displays a page which I need. In this page when I click a button, it takes me to second page. Only second page having problem, this is just displaying plain html controls, there is no CSS.

Left screenshot is coming and right one is expected

Below is the Webview sample code

Control.SetWebViewClient(new JavascriptWebViewClient(this, $"javascript: {JavascriptFunction}"));
Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
Control.Settings.AllowFileAccess = true;
Control.Settings.JavaScriptEnabled = true;
Control.Settings.AllowFileAccessFromFileURLs = true;
Control.Settings.AllowUniversalAccessFromFileURLs = true;
Control.Settings.AllowContentAccess = true;
Control.Settings.DomStorageEnabled = true;
Control.SetWebChromeClient(new WebChromeClient());
Control.LoadDataWithBaseURL("https://service.force.com/embeddedservice/5.0/esw.min.js", content1, "text/html; charset=utf-8", "UTF-8", null);

here the content loading on Webview initially which has html and JavaScript.

How can I fix this issue ?

Edit 1 : This is how I am trying to load styles inside head tag of above mentioned html content file. I tried many combination using rel type also. Nothing seem to be working.

//1
<base href="/">
<link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css"/>

//2
<base href="/">
<link href="salesforce-lightning-design-system_touch-demo.css" type="text/css"/>

//3
<base href="/">
<link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css" crossorigin="anonymous" />


//4
<link href="salesforce-lightning-design-system_touch-demo.css" type="text/css" />

//5
<link href="/salesforce-lightning-design-system_touch-demo.css" type="text/css">

//6
<link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css"  />

When I tried <link rel="stylesheet" href="test.css" />, its working in chrome browser but not working in mobile application.

Answer 1

You can use an alternative way by injecting css styles. I am proud to share an example usage with you. You can use it in Activity or fragment. Converting to Kotlin will be easy.

For Sample Java code

        mWebView = new WebView(MainActivity.this);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDomStorageEnabled(true);
        
       mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
        mWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

        final Activity activity = this;
        mWebView.setWebChromeClient(new WebChromeClient() {

            public void onProgressChanged(WebView view, int progress) {
                // Activities and WebViews measure progress with different scales.
                // The progress meter will automatically disappear when we reach 100%
                activity.setProgress(progress * 1000);
            }

            @Override
            public void onPermissionRequest(final PermissionRequest request) {
//                Log.d(TAG, "onPermissionRequest");
                // As we are targeting Android 21, there's no need to prompt for permission.
                // Just go ahead and grant the permission here.
                request.grant(request.getResources());
            }
        });

        mWebView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view,
                                        int errorCode,
                                        String description,
                                        String failingUrl) {
                Toast.makeText(activity, "Oh! " + description, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                handler.proceed();
                // Ignore SSL certificate errors - DANGEROUS, JUST FOR NOW
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                // Clear out speech hooks, etc. when the page is loaded
//                Log.i(TAG, "onPageStarted: Clearing user handlers!");
//                if (mSrec != null) mSrec.clearUserHandlers();
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                injectCSS(); // TODO < YOUR INJECT CSS
                super.onPageFinished(view, url);
            }
        });

        mWebView.setId(View.generateViewId());
        layout.addView(mWebView, 0);
    }

    private void injectCSS() {
        try {
            mWebView.evaluateJavascript(
                "javascript:(function() {" +
                "   console.log('Injecting code');" +
                "   let style = document.createElement('style');" +
                "   style.type = 'text/css';" +

                "   style.innerHTML = '" +
                "   head {" +
                "       -webkit-transform: translate3d(0, 0, 0);" +
                "       transform: translate3d(0, 0, 0);" +
                "   };" +
                "   body {" +
                "       -webkit-transform: translate3d(0, 0, 0);" +
                "       transform: translate3d(0, 0, 0);" +
                "   };';" +

                "   document.head.appendChild(style);" +
                "   document.body.appendChild(style);" +
                "})()",
                null
            );
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

Or

SalesForce Documents

embedded_svc.settings.externalStyles = ["...", “...”]

Specify your resources using the static resource name, not the file name itself. For example, if you upload CustomEvent.css and give it the name CustomEventCSS, enter CustomEventCSS.

For Javascripts

embedded_svc.settings.externalScripts = ["...", “...”]

Link

Answer 2

Try loading CSS files like this or use internal css.

embedded_svc.settings.externalStyles = ["...", “...”]

Source link