Développement Android : Application hybride

Différents types d’application

Il existe trois types d’application pour mobile :

Application mobile native
Application web
Application hybride : encapsulation d’une application web dans une application mobile (cf. cordova)

Lire : Application mobile : web ou natif ?

En résumé :

Pour une application native (voir l’activité n°1) :
- développement spécifique à la plateforme (SDK + langage)
- exploitation de l’ensemble des fonctionnalités du mobile
- utilisation avec et sans réseau
Pour une application web (voir l’activité n°5) :
- besoin d’un navigateur et d’une connexion réseau
- développement portable (langages du web)
- difficulté d’exploiter l’ensemble des fonctionnalités du mobile (limitation d’au navigateur)

Voir aussi

Ressources

Documentations

Application Hybride

Lien : tvaira.free.fr.apk

Extrait du document : Cours Android de Jean-Francois Lalande

Pour réaliser une application hybride, il suffit d’utiliser un objet de type WebView qui, comme son nom l’indique, est un object graphique fait pour visualiser une page web. Cependant, les liens web appelent tout de même le navigateur, ce qui est assez génant.

Afin de ne pas lancer le navigateur par défaut, il faut surcharger le client web afin de recoder la méthode agissant lorsqu’un lien est cliqué. La classe est très simple :

private class MyWebViewClient extends WebViewClient
{
  Context context;

  public MyWebViewClient(Context c)
  {
      context = c;
  }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url)
    {
        //if(!url.startsWith("https://drive.google.com/viewerng") && url.endsWith(".pdf"))
        if(!url.startsWith("https://drive.google.com/viewerng") && url.contains(".pdf"))
        {
            if(url.endsWith(".pdf"))
            {
                //cf. https://stackoverflow.com/questions/2655972/how-can-i-display-a-pdf-document-into-a-webview
                if (PDFTools.isPDFSupported(context))
                {
                    PDFTools.downloadAndOpenPDF(context, url);
                } else
                {
                    // dans le navigateur
                    //PDFTools.askToOpenPDFThroughGoogleDrive( context, url );
                    // dans la vue
                    //view.loadUrl("http://drive.google.com/viewerng/viewer?embedded=true&url=" + url);
                    view.loadUrl("https://drive.google.com/viewerng/viewer?url=" + url);
                }
            }
            else
            {
                view.loadUrl("https://drive.google.com/viewerng/viewer?url=" + url);
            }
        }
        else
        {
            view.loadUrl(url);
        }

        //Log.d("MyWebViewClient", "Chargement " + url);
        Toast.makeText(getApplicationContext(), "Chargement " + url, Toast.LENGTH_SHORT).show();

        return true;
    }
}

Du côté de l’activité, il faut remplacer le comportement du client web par défaut. On peut aussi prévoir des boutons afin de pouvoir revenir en arrière (back), aller en avant (forward) ou recharger la page (reload).

public class MainActivity extends Activity
{
  WebView wv = null;
  final private String url = "http://tvaira.free.fr/index.html";

  @Override
  public void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    //requestWindowFeature(Window.FEATURE_NO_TITLE); // enlève la barre de menu
    setContentView(R.layout.activity_main);

    wv = (WebView)findViewById(R.id.webView1);
    wv.setWebViewClient(new MyWebViewClient(this));
    wv.getSettings().setJavaScriptEnabled(true);
    wv.loadUrl(url);

    ImageButton back = (ImageButton)findViewById(R.id.back);
    back.setOnClickListener(new OnClickListener()
    {
      @Override
      public void onClick(View v)
      {
          wv.goBack();
      }
    });
    ImageButton reload = (ImageButton)findViewById(R.id.reload);
    reload.setOnClickListener(new OnClickListener()
    {
      @Override
      public void onClick(View v)
      {
          wv.reload();
      }
    });
    ImageButton forward = (ImageButton)findViewById(R.id.forward);
    forward.setOnClickListener(new OnClickListener()
    {
      @Override
      public void onClick(View v)
      {
          wv.goForward();
      }
    });
  }
  
  private class MyWebViewClient extends WebViewClient
  {
    // ...
  }
}

On définit le layout activity_main.xml pour notre WebView et les 3 boutons :

<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">
  <WebView
      android:id="@+id/webView1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"/>
  <ImageButton
      android:id="@+id/forward"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_margin="5dp"
      android:background="@android:color/transparent"
      android:src="@drawable/ic_right"/>
  <ImageButton
      android:id="@+id/reload"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_centerHorizontal="true"
      android:layout_margin="5dp"
      android:background="@android:color/transparent"
      android:src="@drawable/ic_reload"/>
  <ImageButton
      android:id="@+id/back"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentLeft="true"
      android:layout_margin="5dp"
      android:background="@android:color/transparent"
      android:src="@drawable/ic_left"/>
</RelativeLayout>

Si la page contient des liens vers des documents PDF, il faudra mettre en place leur visualisation. Il y a différentes techniques qui sont envisagées dans ce post how-can-i-display-a-pdf-document-into-a-webview.

L’exemple ci-dessus utilise la classe PDFTools.

Retour