5 secretos de WebView de Android que (probablemente) no sabías

Bienvenido, me llamo Luis y aquí les traigo otro nuevo tutorial.

Muestre el selector de archivos, llame al código JavaScript y más

WebViews son una parte indispensable de las aplicaciones hoy en día. Le permiten agregar rápidamente una pantalla de interfaz de usuario práctica sobre la marcha al aprovechar las habilidades de su equipo de desarrollo web.

Recientemente, estaba trabajando en una aplicación de navegador inteligente y descubrí que WebViews puede hacer mucho más que mostrar páginas web.

En las siguientes secciones, enumeraré algunos consejos y trucos menos conocidos para ayudar a los desarrolladores de Android a potenciar WebViews y tener un mayor control sobre el código JavaScript directamente desde sus bases de código Java / Kotlin nativas.

Saltemos de inmediato.

1. Interceptar URL

Al implementar el método shouldOverrideUrlLoading durante WebViewClient la inicialización, podemos interceptar la URL intermedia utilizando la coincidencia de patrones durante la navegación.

De esta manera, puede controlar si la URL debe cargarse o abrir una determinada actividad / servicio usando intenciones.

El siguiente fragmento de código muestra el método real que debe implementar:

2. Autenticación web básica

Muchas páginas web solicitan al usuario que ingrese sus credenciales de inicio de sesión. Cuando está configurando WebView en Android por primera vez, es posible que se pierda esto y termine con errores de autenticación 401 en las cargas de la página.

Afortunadamente, al implementar el siguiente método, puede realizar sin problemas la autenticación básica en un Android WebView:

override fun onReceivedHttpAuthRequest(
         view: WebView,
         handler: HttpAuthHandler,
         host: String,
         realm: String) {
         handler.proceed("username", "password")
  }

Alternativamente, para el inicio de sesión automático, puede pasar los datos de autorización adicionales como una estructura Map de datos en la función loadUrl.

3. Configurar oyentes para botones WebView y EditText

A veces, es posible que desee almacenar ciertos datos de formularios WebView de forma nativa en Android. O tal vez desee realizar una acción nativa cuando un botón dentro de Android WebView se hace clic.

Afortunadamente, podemos aprovechar la interoperabilidad de Android-JavaScript.

Si conoce el ID de la vista / widget en HTML, es bastante sencillo realizar la acción relevante en su código de Android según WebView interacciones.

Simplemente use el evaluateJavaScript y pasar el código JS como una cadena. Idealmente, esto debería hacerse en el método onPageLoadFinished:

Ahora el código anterior está destinado a capturar el WebView detalles del formulario cuando se hace clic en el botón y pasarlos al método Android.onWebBtnClick nativo.

Para que funcione completamente, debe crear una clase para la interfaz de JavaScript y configurarla en el WebView.

He aquí cómo hacerlo:

class WebAppInterface {
    Context mContext;WebAppInterface(Context c) {
        mContext = c;
    }@JavascriptInterface
    public void onWebBtnClick(String username, String password) {
       //handle the data captured from webview}
}

Ahora, póngalo en el WebView como se muestra abajo:

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

Genial, logramos construir un puente de interfaz entre Android y JavaScript. Esto es excelente para escuchar los cambios de la interfaz de usuario en la página web y, en consecuencia, activar métodos nativos de Android.

4. Activar mensajes de alerta de JavaScript desde Android

De forma predeterminada, las solicitudes de JavaScript no se muestran de forma nativa en Android.

Por lo tanto, tenemos que sobreescribir los onJsAlert, onJsPrompt y métodos onJsConfirm en la interfase WebChromeClient con el fin de mostrar JavaScript de alert() y otras funciones para la confirmación o la introducción de texto en mensajes.

webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new MyWebChromeClient());

Al implementar las siguientes funciones, puede proporcionar la ventana emergente de la IU de diálogo de Android para brindar al usuario una experiencia más nativa:

final class MyWebChromeClient extends WebChromeClient {
     @Override
     public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
          //implement AlertDialog here
          return true;
     }
}

5. Mostrar el selector de archivos de Android desde WebView

El código <input> JavaScript le permite cargar archivos. Ahora, esto es bastante sencillo en iOS, ya que no tiene que hacer nada.

Pero en Android, necesitamos implementar el método onShowFileChooser interno WebChromeClient en el que tendrías que configurar el selector de archivos nativo.

Esencialmente, necesitamos usar la interfaz ValueCallBack de WebKit que ayuda a pasar datos del selector de archivos de Android al código JavaScript.

Aquí hay un vistazo del método onShowFileChooser:

En aras de la brevedad, he omitido el código del cuadro de diálogo del selector de archivos.

En el onActivityResult, una vez que obtenga los datos de la imagen, simplemente páselos a la uploadFile instancia de la siguiente manera:

uploadMessage.onReceiveValue(results);

Impresionante, el código logra pasar la imagen seleccionada de Android al código JavaScript.

Eso es todo por esta vez. Gracias por leer.