Usa WebView
para entregar una aplicación web
o una página web como parte de una aplicación cliente. La clase WebView
es un
de la clase View
de Android que permite
muestras páginas web como parte del diseño de tu actividad. No incluye el
funciones de un navegador web completamente desarrollado, como los controles de navegación o un
en la barra de direcciones. De forma predeterminada, todo lo que WebView
muestra es una página web.
WebView
puede ayudarte a proporcionar en tu app la información que tal vez debas
actualización, como un acuerdo de usuario final o una guía del usuario. Dentro de la app para Android,
puedes crear un Activity
que contenga un
WebView
y, luego, úsalo para mostrar el documento que está alojado en línea.
WebView
también puede ser útil cuando tu app proporciona datos al usuario que requieran un
conexión a Internet para recuperar datos, como el correo electrónico. En este caso, puedes
descubre que es más fácil compilar un WebView
en tu app para Android que muestre un
con todos los datos del usuario, en lugar de realizar una solicitud de red, entonces
el análisis de los datos y su renderización en un diseño de Android. En cambio, puedes diseñar
una página web adaptada para dispositivos con tecnología Android e implementará una
WebView
en tu app para Android que carga la página web
En este documento, se describe cómo comenzar a usar WebView
y cómo vincular
JavaScript desde tu página web al código del cliente en tu app para Android, cómo
controlar la navegación de páginas y cómo administrar ventanas cuando se usa WebView
Cómo trabajar con WebView en versiones anteriores de Android
Para usar de forma segura las funciones más recientes de WebView
en el dispositivo en el que se ejecuta tu app, haz lo siguiente:
agrega la interfaz de usuario AndroidX
Webkit. Esta es una imagen estática
que puedes agregar a tu aplicación para usar APIs de android.webkit
que no sean
disponibles para versiones anteriores de la plataforma.
Agrégala a tu archivo build.gradle
de la siguiente manera:
Kotlin
dependencies { implementation("androidx.webkit:webkit:1.8.0") }
Groovy
dependencies { implementation ("androidx.webkit:webkit:1.8.0") }
Explora WebView
ejemplo
en GitHub para obtener más información.
Cómo agregar una WebView a tu app
Para agregar un WebView
a tu app, puedes incluir el elemento <WebView>
en tu
diseño de la actividad o establecer toda la ventana de Activity
como una WebView
en
onCreate()
Cómo agregar una WebView en el diseño de la actividad
Para agregar un elemento WebView
a tu app en el diseño, agrega el siguiente código a tu
archivo XML de diseño de la actividad:
<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" />
Para cargar una página web en WebView
, usa
loadUrl()
, como
como se muestra en el siguiente ejemplo:
Kotlin
val myWebView: WebView = findViewById(R.id.webview) myWebView.loadUrl("http://www.example.com")
Java
WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("http://www.example.com");
Agrega una WebView en onCreate()
Para agregar un WebView
a tu app en el método onCreate()
de una actividad, usa
lógica similar a la siguiente:
Kotlin
val myWebView = WebView(activityContext) setContentView(myWebView)
Java
WebView myWebView = new WebView(activityContext); setContentView(myWebView);
Luego, carga la página:
Kotlin
myWebView.loadUrl("http://www.example.com")
Java
myWebView.loadUrl("https://www.example.com");
O carga la URL desde una string HTML:
Kotlin
// Create an unencoded HTML string, then convert the unencoded HTML string into // bytes. Encode it with base64 and load the data. val unencodedHtml = "<html><body>'%23' is the percent code for ‘#‘ </body></html>"; val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING) myWebView.loadData(encodedHtml, "text/html", "base64")
Java
// Create an unencoded HTML string, then convert the unencoded HTML string into // bytes. Encode it with base64 and load the data. String unencodedHtml = "<html><body>'%23' is the percent code for ‘#‘ </body></html>"; String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(), Base64.NO_PADDING); myWebView.loadData(encodedHtml, "text/html", "base64");
Tu app debe tener acceso a Internet. Para obtener acceso a Internet, solicita la
el permiso INTERNET
en tu
archivo de manifiesto, como se muestra en el siguiente ejemplo:
<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... </manifest>
Puedes personalizar tu WebView
mediante una de las siguientes opciones:
- Habilita la compatibilidad con la pantalla completa con
WebChromeClient
Esta clase también se llama cuando un elementoWebView
necesita permiso para modificar la IU de la app host. como crear o cerrar ventanas o enviar diálogos de JavaScript a la usuario. Para obtener más información sobre la depuración en este contexto, consulta Depurar la Web. apps. - Control de eventos que afectan la renderización de contenido, como los errores en el formulario
las entregas o la navegación con
WebViewClient
También puedes usar esta subclase para interceptar la carga de URL. - Habilitar JavaScript modificando
WebSettings
- Cómo usar JavaScript para acceder a los objetos del framework de Android que insertaste
en un
WebView
.
Cómo usar JavaScript en WebView
Si la página web que quieres cargar en tu WebView
usa JavaScript, debes
habilita JavaScript para tu WebView
. Después de habilitar JavaScript, puedes
crear interfaces entre el código de tu app y el código de JavaScript.
Habilitar JavaScript
De forma predeterminada, JavaScript está inhabilitado en la WebView
. Puedes habilitarlo a través del
Se adjuntó WebSettings
a tu WebView
. Recupera WebSettings
con
getSettings()
y, luego, habilita
JavaScript con
setJavaScriptEnabled()
Observa el siguiente ejemplo:
Kotlin
val myWebView: WebView = findViewById(R.id.webview) myWebView.settings.javaScriptEnabled = true
Java
WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true);
WebSettings
brinda acceso a otros parámetros de configuración que podrías encontrar.
útiles. Por ejemplo, si estás desarrollando una aplicación web diseñada
específicamente para el WebView
en tu app para Android, puedes definir un
una cadena de usuario-agente con
setUserAgentString()
,
y, luego, consulta el usuario-agente personalizado
en tu página web para verificar
que solicitan tu página web es tu app para Android.
Vincula el código JavaScript con el código de Android
Cuando se desarrolla una aplicación web diseñada específicamente para WebView
En la app de Android, puedes crear interfaces entre el código JavaScript y
código de Android del cliente. Por ejemplo, tu código JavaScript puede llamar a un método en
tu código de Android para mostrar un Dialog
,
en lugar de usar la función alert()
de JavaScript.
Para vincular una nueva interfaz entre el código de JavaScript y el de Android, llama a
addJavascriptInterface()
:
y pasarle una instancia de clase para que se vincule con tu JavaScript y un nombre de interfaz
que tu JavaScript puede llamar para acceder a la clase.
Por ejemplo, puedes incluir la siguiente clase en tu app para Android:
Kotlin
/** Instantiate the interface and set the context. */ class WebAppInterface(private val mContext: Context) { /** Show a toast from the web page. */ @JavascriptInterface fun showToast(toast: String) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show() } }
Java
public class WebAppInterface { Context mContext; /** Instantiate the interface and set the context. */ WebAppInterface(Context c) { mContext = c; } /** Show a toast from the web page. */ @JavascriptInterface public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } }
En este ejemplo, la clase WebAppInterface
permite que la página web cree una
mensaje Toast
, con showToast()
.
Puedes vincular esta clase al JavaScript que se ejecuta en tu WebView
con
addJavascriptInterface()
, como se muestra en el siguiente ejemplo:
Kotlin
val webView: WebView = findViewById(R.id.webview) webView.addJavascriptInterface(WebAppInterface(this), "Android")
Java
WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new WebAppInterface(this), "Android");
Se creará una interfaz llamada Android
para JavaScript que se ejecuta en el
WebView
En este punto, tu aplicación web tiene acceso al archivo
Clase WebAppInterface
. Por ejemplo, aquí tienes algo de HTML y JavaScript que
Crea un mensaje de aviso con la interfaz nueva cuando el usuario presiona un botón:
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /> <script type="text/javascript"> function showAndroidToast(toast) { Android.showToast(toast); } </script>
No es necesario inicializar la interfaz Android
desde JavaScript. El
WebView
la pone a disposición de tu página web automáticamente. Entonces, cuando un usuario
presiona el botón, la función showAndroidToast()
usa la interfaz Android
para llamar al método WebAppInterface.showToast()
.
Cómo controlar la navegación de páginas
Cuando el usuario presiona un vínculo desde una página web en tu WebView
, la configuración predeterminada de Android
inicia una app que controla URLs. Por lo general, se abre el navegador web predeterminado y
carga la URL de destino. Sin embargo, puedes anular este comportamiento para tu
WebView
para que los vínculos se abran dentro de tu WebView
. Luego, puedes permitir que el usuario
navegar hacia atrás y hacia adelante por el historial de páginas web que se mantiene
por tu WebView
.
Para abrir vínculos que presionó el usuario, proporciona un WebViewClient
para tu WebView
.
mediante
setWebViewClient()
Todos los vínculos que presione el usuario se cargarán en tu WebView
. Si quieres tener más control
cuando se cargue un vínculo en el que se haya hecho clic, crea tu propio WebViewClient
que anule el
shouldOverrideUrlLoading()
. En el siguiente ejemplo, se supone que MyWebViewClient
es una clase interna
de Activity
.
Kotlin
private class MyWebViewClient : WebViewClient() { override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean { if (Uri.parse(url).host == "www.example.com") { // This is your website, so don't override. Let your WebView load // the page. return false } // Otherwise, the link isn't for a page on your site, so launch another // Activity that handles URLs. Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply { startActivity(this) } return true } }
Java
private class MyWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { if ("www.example.com".equals(request.getUrl().getHost())) { // This is your website, so don't override. Let your WebView load the // page. return false; } // Otherwise, the link isn't for a page on your site, so launch another // Activity that handles URLs. Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl()); startActivity(intent); return true; } }
Luego, crea una instancia de este nuevo WebViewClient
para la WebView
:
Kotlin
val myWebView: WebView = findViewById(R.id.webview) myWebView.webViewClient = MyWebViewClient()
Java
WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.setWebViewClient(new MyWebViewClient());
Ahora, cuando el usuario presiona un vínculo, el sistema llama al
shouldOverrideUrlLoading()
, que verifica si coincide el host de la URL.
en un dominio específico, como se definió en el ejemplo anterior. Si coincide, entonces
el método muestra el valor "false" y no anula la carga de la URL. Le permite a la
WebView
cargará la URL como de costumbre. Si el host de la URL no coincide, se mostrará una
Intent
se crea para iniciar la configuración
Activity
para controlar las URLs, que se resuelven en el navegador web predeterminado del usuario
Administra URLs personalizadas
WebView
aplica restricciones cuando solicita recursos y resuelve vínculos.
que usan un esquema de URL personalizada. Por ejemplo, si implementas devoluciones de llamada como
shouldOverrideUrlLoading()
o
shouldInterceptRequest()
,
entonces WebView
las invoca solo para URLs válidas.
Por ejemplo, es posible que WebView
no llame a tu método shouldOverrideUrlLoading()
.
para vínculos como este:
<a href="showProfile">Show Profile</a>
Las URLs no válidas, como la que se muestra en el ejemplo anterior, se manejan
de manera inconsistente en WebView
, por lo que te recomendamos que uses una URL con formato correcto en su lugar.
Puedes usar un esquema personalizado o una URL HTTPS para un dominio que tu organización
controles de seguridad.
En lugar de usar una cadena simple en un vínculo, como en el ejemplo anterior, puedes usa un esquema personalizado como el siguiente:
<a href="example-app:showProfile">Show Profile</a>
Luego, puedes manejar esta URL en tu método shouldOverrideUrlLoading()
de la siguiente manera:
esto:
Kotlin
// The URL scheme must be non-hierarchical, meaning no trailing slashes. const val APP_SCHEME = "example-app:" override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean { return if (url?.startsWith(APP_SCHEME) == true) { urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8") respondToData(urlData) true } else { false } }
Java
// The URL scheme must be non-hierarchical, meaning no trailing slashes. private static final String APP_SCHEME = "example-app:"; @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (url.startsWith(APP_SCHEME)) { urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8"); respondToData(urlData); return true; } return false; }
La API de shouldOverrideUrlLoading()
está diseñada principalmente para iniciar intents
para URLs específicas. Cuando lo implementes, asegúrate de mostrar false
para las URLs.
con los controladores WebView
. Sin embargo, no estás limitado a iniciar intents. Puedes
Reemplaza los intents de inicio con cualquier comportamiento personalizado en el código anterior.
de muestra.
Navegar por el historial de páginas web
Cuando tu WebView
anula la carga de la URL, acumula automáticamente un
de las páginas web visitadas. Puedes navegar hacia atrás y hacia adelante por el
historial con goBack()
y
goForward()
Por ejemplo, a continuación se muestra cómo tu Activity
puede usar el botón Atrás del dispositivo.
para navegar hacia atrás:
Kotlin
override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean { // Check whether the key event is the Back button and if there's history. if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) { myWebView.goBack() return true } // If it isn't the Back button or there isn't web page history, bubble up to // the default system behavior. Probably exit the activity. return super.onKeyDown(keyCode, event) }
Java
@Override public boolean onKeyDown(int keyCode, KeyEvent event) { // Check whether the key event is the Back button and if there's history. if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) { myWebView.goBack(); return true; } // If it isn't the Back button or there's no web page history, bubble up to // the default system behavior. Probably exit the activity. return super.onKeyDown(keyCode, event); }
Si tu app usa AndroidX AppCompat
1.6.0 o una versión posterior, puedes simplificar la versión anterior.
fragmento aún más:
Kotlin
onBackPressedDispatcher.addCallback { // Check whether there's history. if (myWebView.canGoBack()) { myWebView.goBack() } }
Java
onBackPressedDispatcher.addCallback { // Check whether there's history. if (myWebView.canGoBack()) { myWebView.goBack(); } }
Método canGoBack()
devuelve el valor true si hay un historial de páginas web que el usuario puede visitar. De la misma manera,
puedes usar canGoForward()
para
y verifica si hay un historial de reenvíos. Si no realizas esta verificación,
después de que el usuario llega al final del historial, goBack()
y goForward()
nada.
Cómo controlar los cambios en la configuración del dispositivo
Durante el tiempo de ejecución, los cambios en el estado de la actividad se producen cuando la configuración de un dispositivo
cambios, como cuando los usuarios rotan el dispositivo o descartan un editor de método de entrada
(IME). Estos cambios provocan que se destruya la actividad de un objeto WebView
y una
Nueva actividad que se creará, lo que también crea un nuevo objeto WebView
que se carga
la URL del objeto destruido. Para modificar el comportamiento predeterminado de tu actividad, puedes hacer lo siguiente:
Cambiar la forma en que controla los cambios de orientation
en tu manifiesto Para obtener más información
sobre cómo manejar los cambios de configuración durante el tiempo de ejecución, consulta Cómo administrar la configuración
de la configuración.
Administrar ventanas
De forma predeterminada, las solicitudes para abrir ventanas nuevas se ignoran. Esto es así,
Se abren con JavaScript o con el atributo de destino de un vínculo. Puedes personalizar
tu WebChromeClient
para proporcionar tu propio comportamiento para abrir múltiples
o períodos de medición correctos
frente a los incorrectos.
Para mantener tu app más segura, es mejor evitar que se muestren ventanas emergentes y nuevas
abriendo. La forma más segura de implementar este comportamiento es pasar "true"
a
setSupportMultipleWindows()
pero no anularás el
onCreateWindow()
de la que depende setSupportMultipleWindows()
. Esta lógica evita que cualquier
que usa target="_blank"
en sus vínculos.