Créer son Application Android Webview

Les instructions pour fabriquer son application android en utilisant le composant Webview

Voilà un sujet qui peut probablement vous intéresser,comment programmer son application android en Java à partir de son site, cet article comprends les consignes d'utilisation de la class webview sur android. Dans cet article qui abouti à la création de l'application blog thibautlombard.space sur android,  nous parlerons de plusieurs points intéressants :

  • L'arboresence du projet
  • L'affichage d'une page distante avec webview
  • Les restriction de domaines avec Webview
  • La création d'un Splash Screen
  • Liens connexes et annexes : source et application android
 

L'arboresence du projet

Le projet android est conçu avec Android Studio et non eclipse, celui-ci se nomme My application, ctrlfagency, comme vous pourrez le constater dans l'arboresence des sources. Le projet android programmé utilise l'API 17. La particularité de ce projet est qu'il comprends 2 class java : MainActivity.java et la seconde class qui hérite de la première MyWebAppViewClient.java, ce projet comprends aussi 2 layout, activity_main.xml et activity2_main.xml dont je parlerai plus loin dans l'article (dans la partie splashscreen).

Ci dessous, l’arborescence du projet avec tree.

app/src/
--- main
    --- AndroidManifest.xml
    --- java
    |   --- ctrlfagency
    |       --- myapplication
    |           --- MainActivity.java
    |           --- MyAppWebViewClient.java
    --- res
        --- drawable
        --- layout
        |   --- activity2_main.xml
        |   --- activity_main.xml
        --- menu
        |   --- menu_main.xml
        |   --- menu_splash.xml
        --- mipmap-hdpi
        |   --- ic_launcher.png
        |   --- splash_loading2.png
        |   --- splash_loading.png
        --- mipmap-mdpi
        |   --- ic_launcher.png
        --- mipmap-xhdpi
        |   --- ic_launcher.png
        --- mipmap-xxhdpi
        |   --- ic_launcher.png
        --- mipmap-xxxhdpi
        |   --- ic_launcher.png
        --- values
        |   --- colors.xml
        |   --- dimens.xml
        |   --- strings.xml
        |   --- styles.xml
        --- values-w820dp
            --- dimens.xml

15 directories, 19 files

Passons à l'étape suivante qui est l'affichage d'une page distante avec WebView.

L'affichage d'une page distante avec Webview

Depuis Android 4.4 le composant WebView est implémenté nativement à Android, celui-ci est basé sur la version de développement de Google Chrome nommée Chromium-browser (open source), les applications utilisant Webview ont à priori les mêmes fonctions de rendu que le navigateur chromium bien que certaines fonctionnalités API soient dispersées dans des fonctionnalités android native. Pour utiliser WebView nous devons ajouter la permission pour notre application d'utiliser internet dans le fichier AndroidManifest.xml.

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

Notre WebView qui est pour résumer une sorte de navigateur dans notre application doît être placé dans le fichier layout activity_main.xml.

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

Voici le code source commenté de la class MainActivity.java.

package ctrlfagency.myapplication;
/* importation des class */
import android.app.Activity;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;

/* déclaration de la class public MainActivity */
public class MainActivity extends Activity {

    /* Création de la variable membre mWebView */
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    /* La méthode onCreate permet de hooker l'activité ainsi que le layout */
        super.onCreate(savedInstanceState);

        // Configure le layout activity_main.xml
        setContentView(R.layout.activity_main);

	// Déclare mWebView à activity_main (le layout)
        mWebView = (WebView) findViewById(R.id.activity_main_webview);

        // Configure la webview pour l'utilisation du javascript
        WebSettings webSettings = mWebView.getSettings();
        WebSettings.setJavaScriptEnabled(true);

        // Permet l'ouverture des fenêtres
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // Autorise le stockage DOM (Document Object Model)
        webSettings.setDomStorageEnabled(true);

        // Charge l'url 
        mWebView.loadUrl("https://blog.thibautlombard.space");
        
                /* 
		 * Les instructions ci-dessous permettent de forcer l'application
		 * à ouvrir les Url directement dans l'application et non dans
		 * un navigateur externe. MyAppWebViewClient() est la fonction
		 * contenue dans le fichier MyAppWebViewClient.java .
		 */
		 
        mWebView.setWebViewClient(new MyAppWebViewClient() {
            @Override
            // Fonction qui permet l'affichage de la page lorsque tout est chargé (événement onPageFinished)

            public void onPageFinished(WebView view, String url) {
                findViewById(R.id.activity_main_webview).setVisibility(View.VISIBLE);
            }
        });
    }

	/* 
	 * Fonction qui permet de revenir à la page précédente 
	 * au lieu de quitter l'application lorsque le bouton
	 * revenir en arrière est appuyé.
	 */
    @Override
    public void onBackPressed() {
        if (mWebView.canGoBack()) {
            mWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public void onStart() {
        super.onStart();

    }


}

Notre première fonction WebView est créée , toutefois nous devons par sécurité restreindre l'affichage des pages web uniquement à notre domaine.

Restriction de domaine avec Webview

Afin d'éviter les problèmes de sécurité il est conseillé de restreindre l'accès aux pages externes à notre site web sur l'application. Il est aussi conseillé d'utiliser des certificats ssl pour sécuriser notre connection entre l'application et le serveur web. Pour cela je vais utiliser la class MyAppWebViewClient.java. Le script suivant permet l'utilisation d'une fonction de restriction de l'url chargée en WebView à une chaîne de caractères, suivi d'une opération INTENT. L 'intent est une opération permettant la communication entre une activity et une fonction ou un service (lire la documentation).

package ctrlfagency.myapplication; 

import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MyAppWebViewClient extends WebViewClient {

    @Override
    /* 
     * La fonction shouldOverrideUrlLoading permet de restreindre l'url configurée avec loadurl
     * à une chaîne de caractère précise, soit le nom de domaine dans le script suivant
     */
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(Uri.parse(url).getHost().endsWith("thibautlombard.space")) {
            return false;
        }

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

La création d'un SplashScreen

L'utilité de fabriquer un splashscreen (ou écran de chargement) est de cacher le temps de chargement de la page par une image où une animation gif, css, swf etc... Je vais devoir prendre en compte deux contraintes qui sont l'orientation de l'écran , car si l'on insère un splashscreen dans notre layout, celui-ci ne sera pas redimensionné correctement si l'on change l'orientation de l'écran. Les étapes à suivre sont les suivantes.

  • Modifier le fichier AndroidManifest.xml pour la prise en compte de l'orientation de l'écran.
  • Modifier activity_main.xml et ajouter 1 layout activity2_main.xml pour le chargement du splashscreen
  • Modifier la fonction d'activity java MainActivity.java pour qu'il prenne en compte le splashscreen ainsi que l'orientation de l'écran.

à ajouter dans AndroidManifest.xml

<activity android:name=".MainActivity"
            android:configChanges="keyboardHidden|orientation">

Créer activity2_main.xml et modifier activity_main.xml comme suit :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <ImageView android:id="@+id/imageLoading1"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:visibility="visible"
        android:scaleType="fitXY"
        android:background="@mipmap/splash_loading" />

L'écran de splash est situé dans le dossier ressources res/mipmap/splash_loading.png et la version verticale est res/mipmap/splash_loading2.png. L'option android:scaleType="fitXY" permet d'ajuster l'image pour que celle-ci corresponde à la taille de l'écran. L'option android:orientation="vertical" permet de règler l'orientation correspondant au layout (vertical pour activiy_main.xml et horizontal pour activity2_main.xml).

Dans le fichier MainActivity.java, j'ai ajouté une condition permettant de charger automatiquement le layout correspondant à l'orientation de l'écran puis, lorsque la page à terminé de se charger grâce à l'événement (onPageFinished) désactive l'image de splashscreen.

public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // condition de vérification de l'orientation portrait ou paysage
        // si l'orientation est paysage
        if (getResources().getConfiguration().orientation ==
                Configuration.ORIENTATION_PORTRAIT) {
        // on configure le layout activity_main.xml
            setContentView(R.layout.activity_main);
        } else {
        // sinon on configure activity2_main.xml
            setContentView(R.layout.activity2_main);
        }

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setDomStorageEnabled(true);
        mWebView.loadUrl("https://blog.thibautlombard.space");
        mWebView.setWebViewClient(new MyAppWebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                // Cache le splashscreen imageLoading1 grâce à l'événement onPageFinished 
                findViewById(R.id.imageLoading1).setVisibility(View.GONE);
                // Permet d'afficher la page web à l'aide de la méthode webview
                findViewById(R.id.activity_main_webview).setVisibility(View.VISIBLE);
            }
        });
    }

Liens connexes et annexes : source et application android

Liens Connexes

Liens Annexes