Cette page a été traduite par l'API Cloud Translation.

Applications WebView pour les développeurs Web

Publié le 28 février 2014

Découvrez comment créer un projet Android, ajouter un WebView, charger une URL distante et charger une page HTML locale.

Dans ce tutoriel, nous partons du principe que vous êtes un développeur ayant une expérience limitée ou nulle de l'environnement de développement Android, mais que vous avez une certaine expérience avec Kotlin. Si vous connaissez déjà la programmation pour Android, nous vous recommandons de lire Développer des applications Web dans WebView sur le site des développeurs Android.

Installer Android Studio

Ce tutoriel utilise Android Studio, l'IDE de conception et de compilation pour Android.

Créer un projet Android

Une fois Android Studio installé, l'assistant de configuration se lance.

Pour créer un projet :

Cliquez sur New project (Nouveau projet).
Cliquez sur le modèle Activité vide pour le sélectionner pour votre projet. Les modèles créent la structure du projet et les fichiers dont Android Studio a besoin pour créer votre projet.
Cliquez sur Suivant pour ouvrir la boîte de dialogue "Nouveau projet".
Configurez votre projet. Saisissez le nom de votre application, le nom du package et les SDK cibles. Cliquez ensuite sur Next (Suivant).
Définissez SDK minimal requis sur API 24: Android 7.0 (Nougat).
Cliquez sur Terminer.

Android Studio ouvre le nouveau projet.

Structure du projet

Le projet initial créé par Android Studio contient du code standard pour configurer votre application. Voici quelques-uns des dossiers d'importation les plus courants:

src/main/java : code source Java Android.
src/main/res : ressources utilisées par l'application.
src/main/res/drawable : ressources d'image utilisées par l'application.
Fichiers de mise en page XML src/main/res/xml qui définissent la structure des composants d'interface utilisateur.
src/main/res/values : dimensions, chaînes et autres valeurs que vous ne souhaitez peut-être pas coder en dur dans votre application.
src/main/AndroidManifest.xml. Le fichier manifeste définit ce qui est inclus dans l'application, comme les activités, les autorisations et les thèmes.

Ajouter la WebView

Ajoutez ensuite un WebView à la mise en page de l'activité principale.

Ouvrez le fichier activity_main.xml dans le répertoire src/main/res/xml s'il n'est pas déjà ouvert. (Vous pouvez également voir un fichier fragment_main.xml. Vous pouvez ignorer cette information, car elle n'est pas requise pour ce tutoriel.)

Sélectionnez l'onglet Text (Texte) en bas de l'éditeur activity_main.xml pour afficher la balise XML.

Ce fichier définit la mise en page de votre activité principale, et les volets Preview (Aperçu) affichent un aperçu de l'activité. La mise en page Activité vide n'inclut aucun enfant. Vous devrez ajouter la WebView.

Dans le volet XML, supprimez la barre oblique autofermante à la fin de l'élément FrameLayout, puis ajoutez l'élément <WebView> et une nouvelle balise de fermeture, comme illustré:

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

Pour utiliser la WebView, vous devez la référencer dans l'activité. Ouvrez le fichier source Java de l'activité principale, MainActivity.java, dans le répertoire src/main/java/<PackageName>.

Ajoutez les lignes en gras.
```
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);
```
Le code existant de la méthode onCreate permet de connecter l'activité à la mise en page. Les lignes ajoutées créent une variable membre, mWebView, pour faire référence à la vue Web.

Supprimez le code suivant:
```
if (savedInstanceState == null) {
  getSupportFragmentManager().beginTransaction()
    .add(R.id.container, new PlaceholderFragment())
    .commit();
}
```
La WebView est identifiée par l'ID de ressource, qui est spécifié par cette ligne dans le fichier de mise en page:
```
android:id="@+id/activity_main_webview"
```
Après avoir ajouté le code, des messages d'avertissement s'affichent dans la marge de l'éditeur. En effet, vous n'avez pas importé les bonnes classes pour WebView. Heureusement, Android Studio peut vous aider à renseigner les classes manquantes. Le moyen le plus simple de procéder est de cliquer sur un nom de classe inconnu et de le survoler, puis d'attendre qu'un module affiche une "solution rapide" (dans ce cas, l'ajout d'une instruction import pour la classe WebView).

Appuyez sur Alt+Entrée (Option+Entrée sur Mac) pour accepter la correction rapide.

Maintenant que vous avez une WebView en main, vous pouvez passer à sa configuration et charger du contenu Web intéressant.

Activer JavaScript

WebView n'autorise pas JavaScript par défaut. Pour exécuter une application Web dans la WebView, vous devez activer explicitement JavaScript en ajoutant les lignes suivantes à la méthode onCreate:

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

Charger une URL distante

Si vous allez charger des données à partir d'une URL distante, votre application doit disposer d'une autorisation pour accéder à Internet. Cette autorisation doit être ajoutée dans le fichier manifeste de l'application.

Ouvrez le fichier AndroidManifest.xml dans le répertoire src/res. Ajoutez la ligne en gras avant la balise </manifest> de fermeture.

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

L'étape suivante consiste à appeler la méthode loadUrl sur la WebView. Ajoutez la ligne suivante à la fin de la méthode onCreate.
```
mWebView.loadUrl("[https://beta.html5test.com/][8]");
```
Essayez maintenant d'exécuter le projet. Si vous n'avez pas d'appareil à portée de main, vous pouvez créer un émulateur (AVD ou appareil virtuel Android) en accédant à Tools > Android > AVD Manager (Outils > Android > AVD Manager).

Gérer la navigation

Essayez de remplacer l'URL que vous chargez par https://www.css-tricks.com/, puis exécutez à nouveau votre application. Vous remarquerez quelque chose d'étrange.

Si vous exécutez l'application maintenant avec un site qui comporte une redirection comme css-tricks.com, votre application finit par ouvrir le site dans un navigateur sur l'appareil, et non dans votre WebView. Ce n'est probablement pas ce que vous attendiez. Cela est dû à la façon dont la WebView gère les événements de navigation.

Voici la séquence d'événements:

WebView tente de charger l'URL d'origine à partir du serveur distant et reçoit une redirection vers une nouvelle URL.
La WebView vérifie si le système peut gérer un intent de vue pour l'URL. Si c'est le cas, le système gère la navigation vers l'URL. Sinon, la WebView navigue en interne (par exemple, si l'utilisateur n'a pas de navigateur installé sur son appareil).
Le système sélectionne l'application préférée de l'utilisateur pour gérer un schéma d'URL https://, c'est-à-dire le navigateur par défaut de l'utilisateur. Si vous avez installé plusieurs navigateurs, une boîte de dialogue peut s'afficher à ce stade.

Si vous utilisez une WebView dans une application Android pour afficher du contenu (par exemple, une page d'aide), il se peut que ce soit exactement ce que vous souhaitiez faire. Toutefois, pour des applications plus sophistiquées, vous pouvez gérer vous-même les liens de navigation.

Pour gérer la navigation dans la WebView, vous devez remplacer le WebViewClient de la WebView, qui gère les différents événements générés par la WebView. Vous pouvez l'utiliser pour contrôler la façon dont la WebView gère les clics sur les liens et les redirections de pages.

L'implémentation par défaut de WebViewClient permet d'ouvrir n'importe quelle URL dans la WebView:

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

C'est un bon pas en avant, mais que faire si vous souhaitez gérer uniquement les liens vers votre site, tout en ouvrant d'autres URL dans un navigateur ?

Pour ce faire, vous devez étendre la classe WebViewClient et implémenter la méthode shouldOverrideUrlLoading. Cette méthode est appelée chaque fois que WebView tente d'accéder à une autre URL. Si elle renvoie la valeur "false", WebView ouvre l'URL elle-même. (L'implémentation par défaut renvoie toujours la valeur "false", c'est pourquoi elle fonctionne dans l'exemple précédent.)

Créez une classe:

Effectuez un clic droit sur le nom du package de votre application, puis sélectionnez New > Java Class (Nouveau > Classe Java).
Saisissez MyAppWebViewClient comme nom de classe, puis cliquez sur OK.
Dans le nouveau fichier MyAppWebViewClient.java, ajoutez le code suivant (les modifications sont en gras):
```
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;
  }
}
```
Le nouveau code définit MyAppWebViewClient comme une sous-classe de WebViewClient et implémente la méthode shouldOverrideUrlLoading.

La méthode shouldOverrideUrlLoading est appelée chaque fois que WebView est sur le point de charger une URL. Cette implémentation recherche la chaîne "css-tricks.com" à la fin du nom d'hôte de l'URL. Si la chaîne existe, la méthode renvoie la valeur "false", ce qui indique à la plate-forme de ne pas remplacer l'URL, mais de la charger dans la WebView.

Pour tout autre nom d'hôte, la méthode envoie une requête au système pour ouvrir l'URL. Pour ce faire, il crée un intent Android et l'utilise pour lancer une nouvelle activité. Si vous renvoyez la valeur "true" à la fin de la méthode, l'URL ne sera pas chargée dans la WebView.
Pour utiliser votre nouveau WebViewClient personnalisé, ajoutez les lignes suivantes à votre classe MainActivity:
```
// Stop local links and redirects from opening in browser instead of WebView
mWebView.setWebViewClient(new MyAppWebViewClient());
```
Désormais, un utilisateur peut cliquer sur l'un des liens CSS Tricks et rester dans l'application, mais les liens vers des sites externes s'ouvrent dans un navigateur.

Gérer le bouton "Retour" d'Android

Lorsque vous commencez à jouer et à parcourir les articles de CSS Tricks, cliquer sur le bouton Retour sur Android ferme l'application.

La méthode WebView canGoBack vous indique si un élément de la pile de pages peut être affiché. Pour détecter une pression sur le bouton Retour et déterminer si vous devez revenir en arrière dans l'historique de la WebView ou laisser la plate-forme déterminer le comportement approprié, ajoutez la méthode onBackPressed() à votre 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) {
       ...
    }
}

Charger du code HTML à partir du système de fichiers

L'un des grands avantages de l'utilisation d'une WebView dans une application installable est que vous pouvez stocker des éléments dans l'application. Cela permet à votre application de fonctionner hors connexion et améliore les temps de chargement, car la WebView peut récupérer des éléments directement à partir du système de fichiers local.

Pour stocker des fichiers en local, y compris des fichiers HTML, JavaScript et CSS, stockez-les dans le répertoire "assets". Il s'agit d'un répertoire réservé qu'Android utilise pour les fichiers bruts. Votre application a besoin d'accéder à ce répertoire, car elle peut avoir besoin de réduire ou de compresser certains fichiers.

Créez le répertoire assets/www dans le répertoire principal (src/main/assets/www).
- Il est recommandé de conserver les fichiers Web dans un sous-répertoire de /assets.
Remarque :Seuls les chemins relatifs fonctionnent dans la WebView lorsque vous faites référence à d'autres fichiers, tels que CSS et JavaScript. Au lieu de chemins absolus tels que /pages/somelink.html, utilisez des chemins relatifs tels que ./pages/somelink.html.
Importez tous les fichiers dans le répertoire.

Chargez le fichier approprié:

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

Mettez à jour la méthode shouldOverrideUrlLoading pour ouvrir un navigateur pour les pages non locales:

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

Vous êtes maintenant prêt à créer une excellente application WebView.

Pour obtenir des conseils sur l'optimisation des visuels, consultez la section UI Pixel Perfect dans la WebView.

Si vous rencontrez des difficultés, les outils de développement Chrome sont vos amis. Pour commencer, consultez la section Débogage à distance sur Android.