Esta página foi traduzida pela API Cloud Translation.

Aplicativos da WebView para desenvolvedores da Web

Publicado em 28 de fevereiro de 2014

Aprenda a criar um novo projeto do Android, adicionar uma WebView, carregar um URL remoto e carregar uma página HTML local.

Neste tutorial, pressupomos que você é um desenvolvedor com pouca ou nenhuma experiência no ambiente de desenvolvimento do Android, mas com alguma experiência em Kotlin. Se você já conhece a programação para Android, recomendamos ler Criar apps da Web no WebView no site para desenvolvedores Android.

Instalar o Android Studio

Este tutorial usa o Android Studio, o ambiente de desenvolvimento integrado de design e criação para Android.

Criar um novo projeto Android

Depois que o Android Studio é instalado, ele inicia o assistente de configuração.

Para criar um novo projeto:

Clique em New project.
Clique no modelo Empty Activity para selecioná-lo como modelo do projeto. Os modelos criam a estrutura do projeto e os arquivos necessários para que o Android Studio o crie.
Clique em Next para abrir a caixa de diálogo "New Project".
Configure seu projeto. Insira o nome do aplicativo, o nome do pacote e os SDKs de destino. Depois clique em Next.
Defina o SDK mínimo necessário como API 24: Android 7.0 (Nougat).
Clique em Concluir.

O Android Studio abre o novo projeto.

Estrutura do projeto

O projeto inicial criado pelo Android Studio tem um código boilerplate para configurar seu aplicativo. Algumas das pastas mais importantes incluem:

src/main/java. Código-fonte Java do Android.
src/main/res: recursos usados pelo aplicativo.
src/main/res/drawable. Recursos de imagem usados pelo aplicativo.
src/main/res/xml: arquivos de layout XML que definem a estrutura dos componentes da interface.
src/main/res/values: dimensões, strings e outros valores que você não quer codificar no aplicativo.
src/main/AndroidManifest.xml. O arquivo de manifesto define o que está incluído no aplicativo, como atividades, permissões e temas.

Adicionar a WebView

Em seguida, adicione uma WebView ao layout da atividade principal.

Abra o arquivo activity_main.xml no diretório src/main/res/xml, se ele ainda não estiver aberto. Você também pode encontrar um arquivo fragment_main.xml. Ignore isso, porque não é necessário para este tutorial.)

Selecione a guia Text na parte de baixo do editor activity_main.xml para conferir o marcador XML.

Esse arquivo define o layout da sua atividade principal, e os painéis Preview mostram uma visualização da atividade. O layout da atividade em branco não inclui filhos. Você vai precisar adicionar a WebView.

No painel XML, remova a barra inclinada de fechamento automático do final do elemento FrameLayout e adicione o elemento <WebView> e uma nova tag de fechamento, conforme mostrado:

<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    tools:ignore="MergeRootFrame">

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

Para usar a WebView, você precisa fazer referência a ela na atividade. Abra o arquivo de origem Java da atividade principal, MainActivity.java, no diretório src/main/java/<PackageName>.

Adicione as linhas mostradas em negrito.
```
public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
```
O código existente no método onCreate conecta a atividade ao layout. As linhas adicionadas criam uma nova variável de membro, mWebView, para se referir à visualização da Web.

Remova o seguinte código:
```
if (savedInstanceState == null) {
  getSupportFragmentManager().beginTransaction()
    .add(R.id.container, new PlaceholderFragment())
    .commit();
}
```
A WebView é identificada pelo ID do recurso, especificado por esta linha no arquivo de layout:
```
android:id="@+id/activity_main_webview"
```
Depois de adicionar o código, algumas mensagens de aviso vão aparecer na margem do editor. Isso ocorre porque você não importou as classes corretas para a WebView. Felizmente, o Android Studio pode ajudar a preencher as classes ausentes. A maneira mais fácil de fazer isso é clicar e passar o cursor sobre um nome de classe desconhecido e esperar que um módulo mostre uma "correção rápida". Nesse caso, adicione uma instrução import para a classe WebView.

Pressione Alt + Enter (ou Option + Enter no Mac) para aceitar a correção rápida.

Com a WebView em mãos, você pode configurá-la e carregar conteúdo interessante da Web.

Ativar o JavaScript

A WebView não permite JavaScript por padrão. Para executar um aplicativo da Web na WebView, é necessário ativar explicitamente o JavaScript adicionando as linhas abaixo ao método onCreate:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Carregar um URL remoto

Se você for carregar dados de um URL remoto, seu aplicativo precisará de permissão para acessar a Internet. Essa permissão precisa ser adicionada ao arquivo de manifesto do aplicativo.

Abra o arquivo AndroidManifest.xml no diretório src/res. Adicione a linha em negrito antes da tag </manifest> de fechamento.

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
...
 
  </application>
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

A próxima etapa é chamar o método loadUrl na visualização da Web. Adicione a linha a seguir ao final do método onCreate.
```
mWebView.loadUrl("[https://beta.html5test.com/][8]");
```
Agora tente executar o projeto. Se você não tiver um dispositivo disponível, crie um emulador (AVD ou Dispositivo virtual Android) em Tools > Android > AVD Manager.

Processar a navegação

Tente mudar o URL que você está carregando para https://www.css-tricks.com/ e execute seu aplicativo novamente. Você vai notar algo estranho.

Se você executar o aplicativo agora com um site que tem um redirecionamento como css-tricks.com, o app vai abrir o site em um navegador no dispositivo, não na WebView. Provavelmente não é o que você esperava. Isso ocorre devido à forma como a WebView processa eventos de navegação.

Confira a sequência de eventos:

A WebView tenta carregar o URL original do servidor remoto e recebe um redirecionamento para um novo URL.
A WebView verifica se o sistema pode processar uma intent de visualização para o URL. Se ele puder, o sistema vai processar a navegação do URL. Caso contrário, a WebView vai navegar internamente (por exemplo, se o usuário não tiver um navegador instalado no dispositivo).
O sistema escolhe o aplicativo preferido do usuário para processar um esquema de URL https://, ou seja, o navegador padrão do usuário. Se você tiver mais de um navegador instalado, uma caixa de diálogo vai aparecer.

Se você estiver usando uma WebView em um aplicativo Android para mostrar conteúdo (por exemplo, uma página de ajuda), isso pode ser exatamente o que você quer fazer. No entanto, para aplicativos mais sofisticados, é recomendável processar os links de navegação por conta própria.

Para processar a navegação dentro da WebView, é necessário substituir o WebViewClient da WebView, que processa vários eventos gerados por ela. Ele pode ser usado para controlar como a WebView processa cliques em links e redirecionamentos de página.

A implementação padrão de WebViewClient faz com que qualquer URL seja aberto na WebView:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

Essa é uma boa etapa, mas e se você quiser processar links apenas para seu site, abrindo outros URLs em um navegador?

Para fazer isso, você precisa estender a classe WebViewClient e implementar o método shouldOverrideUrlLoading. Esse método é chamado sempre que a WebView tenta navegar para um URL diferente. Se ele retornar "false", a WebView vai abrir o URL. A implementação padrão sempre retorna "falso", e é por isso que ela funciona no exemplo anterior.

Crie uma nova classe:

Clique com o botão direito do mouse no nome do pacote do app e selecione New > Java Class.
Digite MyAppWebViewClient como o nome da classe e clique em OK.
No novo arquivo MyAppWebViewClient.java, adicione o seguinte código (as mudanças estão em negrito):
```
public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
      return false;
    }
               
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}
```
O novo código define MyAppWebViewClient como uma subclasse de WebViewClient e implementa o método shouldOverrideUrlLoading.

O método shouldOverrideUrlLoading é chamado sempre que a WebView está prestes a carregar um URL. Essa implementação verifica a string "css-tricks.com" no final do nome do host do URL. Se a string existir, o método retornará falso, o que informa à plataforma para não modificar o URL, mas para carregá-lo na WebView.

Para qualquer outro nome de host, o método faz uma solicitação ao sistema para abrir o URL. Para isso, crie uma nova intent do Android e use-a para iniciar uma nova atividade. Retornar "true" no final do método impede que o URL seja carregado na WebView.
Para usar o novo WebViewClient personalizado, adicione as linhas a seguir à classe MainActivity:
```
// Stop local links and redirects from opening in browser instead of WebView
mWebView.setWebViewClient(new MyAppWebViewClient());
```
Agora, o usuário pode clicar em qualquer um dos links do CSS Tricks e permanecer no app, mas os links para sites externos são abertos em um navegador.

Processar o botão "Voltar" do Android

Ao começar a brincar e navegar pelos artigos do CSS Tricks, clicar no botão "Voltar" no Android sai do aplicativo.

O método canGoBack da WebView informa se há algo na pilha de páginas que pode ser aberto. Para detectar um pressionamento do botão "Voltar" e determinar se você precisa voltar pelo histórico da WebView ou permitir que a plataforma determine o comportamento correto, adicione o método onBackPressed() ao MainActivity:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

Carregar HTML do sistema de arquivos

Uma grande vantagem de usar uma WebView em um aplicativo instalável é que é possível armazenar recursos dentro dele. Isso permite que o app funcione off-line e melhora os tempos de carregamento, já que a WebView pode recuperar recursos diretamente do sistema de arquivos local.

Para armazenar arquivos localmente, incluindo HTML, JavaScript e CSS, armazene-os no diretório de recursos. Este é um diretório reservado que o Android usa para arquivos brutos. O app precisa ter acesso a esse diretório, já que pode ser necessário minimizar ou compactar determinados arquivos.

Crie o diretório assets/www no principal (src/main/assets/www).
- É uma prática recomendada manter os arquivos da Web em um subdiretório de /assets.
Observação: apenas caminhos relativos funcionam na WebView quando se referem a outros arquivos, como CSS e JavaScript. Em vez de caminhos absolutos, como /pages/somelink.html, use caminhos relativos, como ./pages/somelink.html.
Faça upload de todos os arquivos no diretório.

Carregue o arquivo apropriado:

mWebView.loadUrl("file:///android_asset/www/index.html");

Atualize o método shouldOverrideUrlLoading para abrir um navegador para páginas não locais:

public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().length() == 0) {
      return false;
    }

    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}

Agora você está pronto para criar um ótimo app da WebView.

Para dicas sobre como ajustar os recursos visuais, consulte Interface Pixel-Perfect na WebView.

Se você tiver problemas, as Ferramentas do desenvolvedor do Chrome são seus amigos. Consulte Depuração remota no Android para começar.