WebView App verbessern

Eine WebView Android App ist schnell erstellt, doch für manche Webseiten stellt sich schnell heraus, dass beim Drehen des Bildschirms die Session verloren geht. Wechselt man also von der Portrait- in die Landscape-Ansicht oder umgekehrt, dann kommt es zu einem Seitenreload und noch dazu geht die aktuelle Session verloren. Ich zeige euch wie man das umgehen kann und zusätzlich die Webseite weniger oft nachladen muss.

WebView App verbessern

Das responsive Webdesign erlaubt Webseiten zu bauen die auf beliebiger Displaygröße gut aussehen. Die Blöcke mit dem Inhalt passen sich dynamisch an die Größe des Displays an. Deshalb ist es nicht verwunderlich, wenn Benutzer gerne von Portrait Ansicht, also dem aufgestellten Smartphone in den Landscape Modus wechseln. Die Elemente der Webseite richten sich dabei neu aus und je nach Programmierung und Displaygröße kann man im Landscape Modus mehr Information sehen oder eventuell auch eine 2. Spalte mit Content. Bei zahlreichen Webseiten ist die Interaktion leichter.

Orientierung ändert sich, die Seite lädt neu

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

    //WebView Dinge
    wv = (WebView)findViewById(R.id.webView);
    wv.setWebViewClient(new WebViewClient());
    wv.getSettings().setJavaScriptEnabled(true);

    wv.loadUrl("http://example.com");
}

In meiner Activity wird in der onCreate Methode das WebView Element geladen und eine fix hinterlegte URL aufgerufen. Das Problem ist nun, dass bei einer Änderung der Ausrichtung diese onCreate Methode erneut aufgerufen wird. Das bedeutet bei jeder Änderung der Orientierung wird auch die Activity neu erstellt.

Wir müssen nun dafür sorgen, dass wir den aktuellen Zustand des WebView Elements beziehungsweise der Activity abspeichern und beim onCreate wieder laden. Wir benötigen auf diesem Weg 2 Änderungen am Source Code.

onSaveInstanceState

@Override
protected void onSaveInstanceState(Bundle outState) {
    wv.saveState(outState);
}

Der erste Ansatzpunkt ist die onSaveInstanceState Methode. Diese überschreiben wir für unsere Activity Klasse. Das WebView Element wv bietet eine saveState Methode. Wobei wir in der onSaveInstanceState Methode das Bundle übergeben bekommen in dem wir den aktuellen Status speichern können und die saveState Methode genau ein solches Bundle verlangt. Nachdem nun der Status persistent gespeichert ist müssen wir uns nur noch darum kümmern diesen wieder herzustellen.

restoreState in der onCreate Methode

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

    //WebView Dinge
    wv = (WebView)findViewById(R.id.webView);
    wv.setWebViewClient(new WebViewClient());
    wv.getSettings().setJavaScriptEnabled(true);

    if (savedInstanceState != null)
        wv.restoreState(savedInstanceState);
    else {
        wv.loadUrl("http://example.com");
    }
}

In einer IF Abfrage schauen wir ob im übergebenen Bundle savedInstanceState bereits ein gespeicherter Zustand existiert. Falls dem so ist laden wir diesen für das WebView Element mit der restoreState Methode. Falls es noch keinen gespeicherten Zustand gibt, was bei einen erstmaligen Start der App auftritt, dann laden wir wie gehabt die URL.

Fazit

Eine WebView App lässt sich dank einigen Features von Android leicht verbessern. Man kann den aktuellen Zustand des WebView Elements speichern und bei jeder Änderung der Orientierung wieder laden. Das trifft auch für jede andere Aktion zu, bei der die aktuelle Activity zerstört und eine neue erstellt wird. Das Speichern des aktuellen Zustands einer Activity ist eines der Konzepte, die man bei der Programmierung von mobilen Apps lernen muss.

Habt ihr andere Ideen um die WebView App noch besser zu machen? Welche anderen Elemente einer Activity speichert ihr ab?