Entwicklung einer Web-App unter Android

Android Web-App

Android Web-App mit WebView

Web-Apps bedienen sich HTML5, um damit viele Eigenschaften nativer Apps über die Funktionen moderner Browser zu erledigen. So ist es möglich die Web-App lokal zu speichern, offline verfügbar zu machen, Daten auf einer client-seitigen Datenbank zu speichern und vieles mehr. Web-Apps sind einfacher zu programmieren und flexibler als native Apps, können jedoch nicht auf Hardwarefunktionen des Smartphones zugreifen.

Eine Android-Web-App ist eine Anwendung, welche die WebView-Komponente verwendet, um einen Teil der GUI darzustellen. Die Bezeichnung Web-App mag ein wenig irreführend sein, da die App eigentlich eine Mischung aus einer nativen Android App und einer Web-App ist. Teile der App verwenden native Android-Komponenten und andere Teile werden mit Web-Technologien (HTML, CSS, JavaScript) in einem WebView gerendert.

Die WebView-Komponente ist ein vollwertiger Browser und als View-Unterklasse implementiert. Üblicherweise nimmt die WebView den meisten Platz auf dem Bildschirm ein. Ab Android Version 4.4 (Kitkat) basiert die WebView Komponente auf dem gleichen Code wie der Google Chrome Browser für Android. Dies gewährleistet eine gleichmäßige Anzeige der Webanwendung, egal ob sie dem Benutzer in einer App oder über den mobilen Browser angezeigt wird. Vor Android 4.4 basierte die WebView Komponente auf den internen Android Browser.

Layout

Um die Android WebView-Komponente zu verwenden, wird ein WebView-Element in die Layout XML-Datei eingefügt. Im folgenden Beispiel ist die WebView über den gesamten Bildschirm eingebettet:

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

     <WebView xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/webview"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_alignParentLeft="true"
     android:layout_alignParentTop="true"/>

</RelativeLayout>

Manifest.xml

Wenn die Web-App Webseiten über das Internet laden soll, muss dies in der Manifest Datei das Recht zur Verwendung des Internets gesetzt werden. Liegen die darzustellenden Webdaten lokal vor, wird dieses Recht nicht benötigt. Wenn der Anwendung die Internet-Berechtigung nicht gewährt, kann diese keine Internet-Verbindungen aufbauen. Hier ist ein Beispiel von einem Android-Manifest-Datei mit Internet-Berechtigung:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="at.gridtec.webapp_beispiel" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.INTERNET" />

</manifest>

Webview

Sobald die WebView in ein Layout eingefügt wurde, kann diese im Code verwendet werden. Dazu wird ein Verweis auf die WebView-Instanz geholt, welcher danach angewiesen wird eine URL zu laden. Die Ressourcen der URL werden innerhalb der WebView angezeigt. Hier ist ein Beispiel, um eine URL innerhalb eines WebView zu laden:

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://blog.gridtec.at");

Liegen die darzustellenden Daten Lokal vor, können diese aus dem assets Verzeichnis der App geladen werden:

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

Eine weitere Möglichkeit wäre noch, HTML als String direkt an das Webview zu übergeben:

String myHtml = "<HTML><BODY><H1>Lorem Ipsum</H1></BODY></HTML>";
myWebView.loadData(myHtml, "text/html", "UTF-8");

JavaScript

Standardmäßig ist Javascript für die WebView Komponente deaktiviert. Um die Ausführung von JavaScript zu aktivieren, welches innerhalb der Webseiten ausgeführt werden soll, muss setJavaScriptEnabled über das WebSetting des WebView Objekts true gesetzt werden. Hier ist ein Beispiel, wie JavaScript in einem WebView aktiviert wird:

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Weitere Links

Wenn ein Benutzer auf einen, in der im WebView angezeigten, Link klickt, ist das Standardverhalten, dass die URL des Links im System Browser geladen wird. Das bedeutet, dass die nächste Seite für den Link im Android-Browser dargestellt wird und nicht in der WebView der Anwendung. Um die Nutzererlebnis nicht zu unterbrechen und die Seitennavigation innerhalb der WebView zu halten, wird eine Unterklasse von WebViewClient erstellt und dessen shouldOverrideUrlLoading Methode überschrieben:

myWebView.setWebViewClient(new WebViewClient() {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
          view.loadUrl(url);
          return true;
     }
});

Navigation

Genauso wie die Schaltfläche „Zurück“ im Browser, soll nun auch dieses Beispiel rückwärts durch den Browser-Verlauf der WebView zu gehen, wenn die Schaltfläche „Zurück“ geklickt wird. Nur wenn die WebView wieder bei der ersten Seite angelangt ist und nochmals auf „Zurück“ geklickt wird, soll die App beendet werden. Um dies zu erreichen, wird die onKeyDown-Methode der MainActivity Klasse überschrieben:

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
     if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
          this.myWebView.goBack();
          return true;
     }
     return super.onKeyDown(keyCode, event);
}

Fertige App

Hier ein paar Ausschnitte der Web-App mit den zuvor vorgestellten Methoden, um HTML darzustellen. Zunächst auf dem Emulator, danach direkt auf dem Smartphone:

Web-App im Emulator HTML Web-App im Emulator Webseite Web-App im Emulator index.html

Web-App am Smartphone HTML Web-App am Smartphone Webseite Web-App am Smartphone index.html

Letzten Endes noch das gesamte MainActivity Klasse dieses Beispiels:

package at.gridtec.webapp_beispiel;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import at.gridtec.webapp_beispiel.R;

public class MainActivity extends Activity {

    private WebView myWebView = null;

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

        myWebView = (WebView) findViewById(R.id.webview);
        // Enable JavaScript
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // Simple load local file
        //myWebView.loadUrl("file:///android_asset/index.html");

        // Load URL
        myWebView.loadUrl("http://blog.gridtec.at");

        // Load HTML data
        //String myHtml = "<HTML><BODY><H1>Lorem Ipsum</H1></BODY></HTML>";
        //myWebView.loadData(myHtml, "text/html", "UTF-8");

        // Override URL Loading
        myWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
            this.myWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

}

Tagged with:     , ,

About the author /


Einst gelernter Werkzeugbautechniker, habe ich vor etlichen Jahren mein Leben der Informatik verschrieben. Zur Zeit studiere ich noch Informatik auf der Fachhochschule Technikum Wien und beschäftige mich am liebsten mit Java, Android und Elektronik.

Related Articles

Post your comments

Your email address will not be published. Required fields are marked *

*

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Unterstütz uns!

Folgt uns!

Diese Seite

wurde erstellt mit Ehrgeiz, Liebe und viel Koffein. Bei der Erstellung kamen keine jar-Dateien zu Schaden. Das Logo wurde erstellt von Star-seven.at.