Esta página foi traduzida pela API Cloud Translation.

Criar apps da Web no WebView

Usar WebView para entregar um aplicativo da Web ou uma página da Web como parte de um aplicativo cliente. A classe WebView é uma extensão da classe View do Android que permite você exibe páginas da Web como parte do layout da sua atividade. Ele não inclui recursos de um navegador da Web completo, como controles de navegação ou uma na barra de endereço. Todo o WebView mostra, por padrão, uma página da Web.

WebView pode ajudar a fornecer informações no app que talvez você precise como um contrato de usuário final ou um guia do usuário. No seu app Android, você pode criar um Activity que contenha um WebView e use-a para exibir seu documento hospedado on-line.

A WebView também pode ajudar quando o app fornece dados ao usuário que precisam de uma uma conexão de Internet para recuperar dados, como e-mails. Nesse caso, é possível achar que é mais fácil criar uma WebView no seu app Android que mostre uma página com todos os dados do usuário, em vez de realizar uma solicitação de rede, analisando e renderizando os dados em um layout do Android. Em vez disso, você pode projetar uma página web personalizada para dispositivos com tecnologia Android e, em seguida, implementar uma WebView no seu app Android que carrega a página da Web.

Este documento descreve como começar a usar o WebView e como vincular contas JavaScript da página da Web para código do lado do cliente no app Android, como processar a navegação nas páginas e como gerenciar janelas ao usar WebView.

Trabalhar com o WebView em versões anteriores do Android

Para usar com segurança recursos mais recentes do WebView no dispositivo em que seu app está em execução, adicione a extensão AndroidX do Webkit. Este é um modelo estático que você pode adicionar ao aplicativo para usar APIs android.webkit que não estão disponíveis para versões anteriores da plataforma.

Adicione-o ao arquivo build.gradle da seguinte maneira:

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}

Groovy

dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

Conheça o WebView exemplo no GitHub para mais detalhes.

Adicionar uma WebView ao app

Para adicionar um WebView ao app, inclua o elemento <WebView> no seu o layout da atividade ou defina toda a janela Activity como um WebView em onCreate()

Adicionar uma WebView ao layout da atividade

Para adicionar um WebView ao app no layout, adicione o seguinte código ao seu no arquivo XML de layout da atividade:

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

Para carregar uma página da Web no WebView, use loadUrl(), conforme como mostrado no exemplo a seguir:

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");

Adicionar uma WebView a onCreate()

Para adicionar um WebView ao app no método onCreate() de uma atividade, use semelhante a esta:

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

Em seguida, carregue a página:

Kotlin

myWebView.loadUrl("http://www.example.com")

Java

myWebView.loadUrl("https://www.example.com");

Ou carregue o URL a partir de uma 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");

O app precisa ter acesso à Internet. Para ter acesso à Internet, solicite o Permissão INTERNET em seu de manifesto do aplicativo, conforme mostrado no exemplo a seguir:

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

Para personalizar o WebView, siga um destes procedimentos:

Como ativar o suporte a tela cheia usando WebChromeClient Esta turma também é chamado quando uma WebView precisa de permissão para mudar a interface do app host. como criar ou fechar janelas ou enviar caixas de diálogo JavaScript ao usuário. Para saber mais sobre a depuração nesse contexto, leia Depurar a Web apps.
Tratamento de eventos que afetam a renderização de conteúdo, como erros no formulário envios ou navegação usando WebViewClient Você também pode usar essa subclasse para interceptar o carregamento do URL.
Ativar o JavaScript modificando WebSettings
Usar o JavaScript para acessar objetos do framework do Android que você injetou em um WebView.

Usar JavaScript na WebView

Se a página da Web que você quer carregar no WebView usar JavaScript, será preciso ativar o JavaScript para o WebView. Depois de ativar o JavaScript, você pode criar interfaces entre o código do app e o código JavaScript.

Ativar o JavaScript

Por padrão, o JavaScript fica desativado em uma WebView. Você pode ativá-lo por meio do WebSettings anexado ao seu WebView. Recuperar WebSettings com getSettings() e ative JavaScript com setJavaScriptEnabled()

Confira este exemplo:

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);

O WebSettings fornece acesso a várias outras configurações que você pode encontrar úteis. Por exemplo, se você estiver desenvolvendo um aplicativo da web projetado especificamente para a WebView no seu app Android, defina uma string do user agent com setUserAgentString(), consultar o user agent personalizado na página da Web para verificar se o cliente que solicitam sua página da Web é seu app Android.

Vincular o código JavaScript ao código do Android

Ao desenvolver um aplicativo da Web projetado especificamente para a WebView no app Android, é possível criar interfaces entre o código JavaScript e código do Android no lado do cliente. Por exemplo, o código JavaScript pode chamar um método em seu código do Android para exibir uma Dialog, em vez de usar a função alert() do JavaScript.

Para vincular uma nova interface entre o código JavaScript e do Android, chame addJavascriptInterface(), passando uma instância de classe para vincular ao JavaScript e um nome de interface que o JavaScript pode chamar para acessar a classe.

Aviso: o uso de addJavascriptInterface() permite que o JavaScript controle seu Android app. Embora isso possa ser útil, também pode ser um problema de segurança perigoso. Quando o HTML no WebView não é confiável, por exemplo, parte ou todo do HTML seja fornecida por uma pessoa ou um processo desconhecido – um atacante pode incluir HTML que executa seu código do lado do cliente e possivelmente qualquer código de à escolha do atacante. Portanto, não use addJavascriptInterface(), a menos que você tenha criado todos os códigos HTML e JavaScript que aparecem na sua WebView. O que não fazer permitem que o usuário navegue dentro do WebView para páginas da Web que não sejam suas. Em vez disso, permita que o aplicativo de navegador padrão do usuário abra links estrangeiros. De padrão, o navegador da Web do usuário abre todos os links de URL. Portanto, esse aviso se você mesmo lida com a navegação nas páginas, conforme descrito a seguir .

Por exemplo, você pode incluir a seguinte classe no 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();
    }
}

Neste exemplo, a classe WebAppInterface permite que a página da Web crie uma Mensagem Toast usando a showToast() .

Você pode vincular essa classe ao JavaScript executado no WebView com addJavascriptInterface(), conforme mostrado no exemplo a seguir:

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");

Isso cria uma interface chamada Android para o JavaScript em execução no WebView. Neste ponto, seu aplicativo da Web já tem acesso ao WebAppInterface. Por exemplo, aqui estão alguns códigos HTML e JavaScript que cria uma mensagem de aviso usando a nova interface quando o usuário toca em um botão:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

Não é necessário inicializar a interface Android do JavaScript. A WebView o disponibiliza automaticamente para sua página da Web. Então, quando um usuário tocar no botão, a função showAndroidToast() usará a interface Android para chamar o método WebAppInterface.showToast().

Gerenciar a navegação nas páginas

Quando o usuário toca em um link de uma página da Web no WebView, por padrão, o Android inicializa um aplicativo que lida com URLs. Normalmente, o navegador da Web padrão abre e carrega o URL de destino. No entanto, você pode substituir esse comportamento para WebView para que os links sejam abertos no WebView. Você pode permitir que o usuário navegar para trás e para frente pelo histórico da página da Web que é mantido pelo seu WebView.

Para abrir os links tocados pelo usuário, forneça um WebViewClient para o WebView usando setWebViewClient(). Todos os links em que o usuário toca são carregados em WebView. Para ter mais controle sobre quando um link clicado for carregado, crie seu próprio WebViewClient que modifica o shouldOverrideUrlLoading() . O exemplo abaixo pressupõe que MyWebViewClient é uma classe 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;
  }
}

Em seguida, crie uma instância desse novo WebViewClient para a WebView:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

Agora, quando o usuário tocar em um link, o sistema chamará a Método shouldOverrideUrlLoading(), que verifica se o host do URL corresponde um domínio específico, conforme definido no exemplo anterior. Se houver correspondência, o método retorna falso e não substitui o carregamento do URL. Ela permite que WebView carrega o URL normalmente. Se o host do URL não for correspondente, O Intent é criado para iniciar o Activity para processar URLs, que são resolvidos para o navegador da Web padrão do usuário.

Processar URLs personalizados

O WebView aplica restrições ao solicitar recursos e resolver links que usam um esquema de URL personalizado. Por exemplo, se você implementar callbacks como shouldOverrideUrlLoading() ou shouldInterceptRequest(), então WebView os invoca apenas para URLs válidos.

Por exemplo, WebView pode não chamar o método shouldOverrideUrlLoading() para links como este:

<a href="showProfile">Show Profile</a>

Os URLs inválidos, como o mostrado no exemplo anterior, são tratados de forma inconsistente em WebView. Por isso, recomendamos usar um URL bem formado. É possível usar um esquema personalizado ou um URL HTTPS para um domínio que sua organização controles de segurança.

Em vez de usar uma string simples em um link, como no exemplo anterior, é possível use um esquema personalizado como o seguinte:

<a href="example-app:showProfile">Show Profile</a>

Em seguida, você pode processar esse URL no método shouldOverrideUrlLoading() da seguinte forma: isso:

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;
}

A API shouldOverrideUrlLoading() se destina principalmente a iniciar intents. para URLs específicos. Ao implementá-la, retorne false para URLs os identificadores WebView. No entanto, você não está limitado a iniciar intents. Você pode substituir a inicialização de intents por qualquer comportamento personalizado no código anterior; de amostra.

Navegar no histórico da página da Web

Quando WebView substitui o carregamento do URL, ele acumula automaticamente um histórico de páginas da Web visitadas. Você pode voltar e avançar na histórico com o goBack() e goForward()

O exemplo a seguir mostra como o Activity pode usar a tela "Voltar" do dispositivo para navegar para trá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);
}

Se o app usa o AndroidX AppCompat 1.6.0 ou mais recente, é possível simplificar a versão anterior snippet ainda mais:

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();
    }
}

O método canGoBack() retorna verdadeiro se houver um histórico da página da Web para o usuário visitar. Da mesma forma, pode usar canGoForward() para verificar se há um histórico de encaminhamento. Se você não fizer essa verificação, depois que o usuário chega ao fim do histórico, goBack() e goForward() fazem nada.

Gerenciar mudanças de configuração do dispositivo

Durante o tempo de execução, mudanças no estado da atividade ocorrem quando a configuração de um dispositivo mudanças, como quando os usuários giram o dispositivo ou dispensam um editor de método de entrada (IME). Essas mudanças fazem com que a atividade de um objeto WebView seja destruída e uma uma nova atividade a ser criada, o que também cria um novo objeto WebView que é carregado o URL do objeto destruído. Para modificar o comportamento padrão da sua atividade, você pode mudar a forma como ele gerencia mudanças de orientation no manifesto. Para saber mais sobre como lidar com mudanças de configuração durante o tempo de execução, leia Processar configurações mudanças.

Gerenciar janelas

Por padrão, as solicitações para abrir novas janelas são ignoradas. Isso é verdade não importa se eles são abertos por JavaScript ou pelo atributo de destino de um link. Você pode personalizar WebChromeClient para fornecer seu próprio comportamento ao abrir vários janelas.

Para manter seu app mais seguro, é melhor evitar pop-ups e novas janelas abertura. A maneira mais segura de implementar esse comportamento é transmitir "true" ao setSupportMultipleWindows() mas sem substituir o onCreateWindow() do qual setSupportMultipleWindows() depende. Essa lógica impede que página que usa target="_blank" no carregamento dos links.